tokentrace 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -2,7 +2,28 @@
 
 All notable changes to TokenTrace are documented here.
 
-## Unreleased
+## [0.7.0] - 2026-05-12
+
+### Added
+
+- 0.7.0 Usage Intelligence roadmap for local guardrails, savings review, session comparison, project intelligence, and daily digest work.
+- Local monthly cost and token guardrails stored in Settings.
+- Overview Monthly Guardrails panel showing month-to-date local usage against configured limits.
+- Recommendation rules for monthly guardrails that are near or over limit.
+- Evidence-backed Review Queue on Insights, ranked from guardrails, unknown cost repair, high-impact sessions, dominant projects, model review, and cache reuse.
+- `tokentrace insights --json` now includes the Review Queue for local automation.
+- `tokentrace digest` and `tokentrace digest --json` for current-month local usage, guardrails, top review item, unknown-cost count, top project, and latest scan status.
+- Session Comparison Flags on Sessions to highlight token and cost outliers compared with matching project, tool, and primary-model peers.
+- Project Signals on Projects for dominant usage, unknown cost, estimated-token confidence, and model concentration patterns.
+
+### Changed
+
+- Renamed the Insights page header to Usage Intelligence to match the 0.7.0 product theme.
+- Refreshed README screenshots for Overview, Usage Intelligence, Sessions, Projects, and local guardrail Settings using public-safe synthetic local data.
+
+### Fixed
+
+- Increased the forced packed-install smoke test timeout so native SQLite dependency installation is not killed on slower machines.
 
 ## [0.6.0] - 2026-05-10
 

package/README.md

@@ -8,7 +8,7 @@ Local-first analytics for AI CLI usage. TokenTrace scans local CLI logs, normali
 
 TokenTrace is designed for local development machines first, with macOS-oriented defaults. It does not require a cloud account and does not send telemetry or logs anywhere.
 
-![TokenTrace overview dashboard](docs/assets/overview.png)
+![TokenTrace 0.7.0 overview dashboard](docs/assets/overview-0.7.0.png)
 
 ## Start In Seconds
 
@@ -37,6 +37,8 @@ tokentrace serve --port 3210 --no-open
 tokentrace scan         # Scan local AI CLI usage logs
 tokentrace doctor --json
                         # Inspect scan health and repair recommendations
+tokentrace digest --json
+                        # Print current-month local usage digest
 tokentrace insights --json
                         # Print local recommendations as JSON
 tokentrace status --json
@@ -82,7 +84,7 @@ npm run db:migrate   # Create/update local SQLite tables
 npm run db:seed      # Seed editable provider/model prices
 npm run reset        # Clear imported data and scan history
 npm test             # Run parser and cost tests
-npm run verify       # Run Vitest and TypeScript checks
+npm run verify       # Run Vitest, TypeScript, and ESLint checks
 npm run package:test # Verify, build, and dry-run the npm package
 npm run package:inspect
                     # Check package transparency guardrails
@@ -129,6 +131,10 @@ Default discovery checks these locations when present:
 
 Use **Settings** in the dashboard to add custom folders, toggle raw message storage, and trigger scans. Use **Doctor**, **Discovery**, **Parser Debug**, and **Raw Data** to inspect discovered files, parser decisions, warnings, failures, extracted metadata, and confidence levels.
 
+Settings also supports optional local monthly usage guardrails. Set a cost
+limit, token limit, or both, and Overview will show month-to-date progress from
+imported local CLI usage.
+
 ## Ingestion Architecture
 
 TokenTrace's primary ingestion architecture is direct local filesystem ingestion:
@@ -191,6 +197,22 @@ Codex CLI status-line integration is intentionally deferred until its status-lin
 
 ## Screenshots
 
+Usage Intelligence views from `0.7.0`:
+
+![TokenTrace 0.7.0 overview dashboard](docs/assets/overview-0.7.0.png)
+
+![TokenTrace 0.7.0 Usage Intelligence review queue](docs/assets/usage-intelligence-0.7.0.png)
+
+![TokenTrace 0.7.0 session comparison flags](docs/assets/sessions-0.7.0.png)
+
+![TokenTrace 0.7.0 project signals](docs/assets/projects-0.7.0.png)
+
+![TokenTrace 0.7.0 local guardrail settings](docs/assets/settings-guardrails-0.7.0.png)
+
+Stable Daily Tool views from `0.6.0`:
+
+![TokenTrace 0.6.0 Scan Doctor](docs/assets/doctor-0.6.0.png)
+
 CLI startup and help:
 
 ![TokenTrace CLI help](docs/assets/cli-help.gif)

package/app/api/settings/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { getDatabasePath } from "@/src/db/client";
-import { getAppSettings, saveAppSettings } from "@/src/db/settings";
+import { getAppSettings, normalizeUsageGuardrails, saveAppSettings } from "@/src/db/settings";
 
 export const dynamic = "force-dynamic";
 
@@ -18,7 +18,8 @@ export async function PUT(request: Request) {
     : [];
   const saved = saveAppSettings({
     customFolders,
-    storeRawMessageContent: Boolean(body.storeRawMessageContent)
+    storeRawMessageContent: Boolean(body.storeRawMessageContent),
+    usageGuardrails: normalizeUsageGuardrails(body.usageGuardrails)
   });
 
   return NextResponse.json(saved);

package/app/optimisation/page.tsx

@@ -1,6 +1,9 @@
+import Link from "next/link";
 import { AlertTriangle, CheckCircle2, Info, Lightbulb } from "lucide-react";
 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 { PageHeader } from "@/components/ui/typography";
 import { getAnalyticsData } from "@/src/lib/analytics";
 
@@ -24,10 +27,60 @@ export default function OptimisationPage() {
   return (
     <div className="space-y-6">
       <PageHeader
-        title="Optimisation Insights"
-        description="Deterministic recommendations based on imported usage patterns."
+        title="Usage Intelligence"
+        description="Deterministic local review queue based on guardrails, repair work, and usage impact."
       />
 
+      <Card>
+        <CardHeader className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <CardTitle>Review Queue</CardTitle>
+            <CardDescription>
+              Evidence-backed next actions ordered by guardrails, repair work, and usage impact.
+            </CardDescription>
+          </div>
+          <Button asChild variant="outline" size="sm">
+            <Link href="/sessions">Open sessions</Link>
+          </Button>
+        </CardHeader>
+        <CardContent className="table-scroll">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Priority</TableHead>
+                <TableHead>Category</TableHead>
+                <TableHead>Review item</TableHead>
+                <TableHead>Impact</TableHead>
+                <TableHead>Action</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {data.reviewQueue.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell>
+                    <Badge variant={severityVariant[item.severity]}>{item.severity}</Badge>
+                  </TableCell>
+                  <TableCell className="capitalize">{item.category.replace("-", " ")}</TableCell>
+                  <TableCell className="max-w-xl">
+                    <div className="font-medium">{item.title}</div>
+                    <div className="mt-1 text-xs leading-relaxed text-muted-foreground">{item.evidence}</div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="text-sm font-medium">{item.impactValue}</div>
+                    <div className="text-xs text-muted-foreground">{item.impactLabel}</div>
+                  </TableCell>
+                  <TableCell>
+                    <Link href={item.href} className="font-medium text-primary underline-offset-4 hover:underline">
+                      {item.action}
+                    </Link>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
       <div className="grid gap-4">
         {data.insights.map((insight) => {
           const Icon = severityIcon[insight.severity] ?? CheckCircle2;

package/app/page.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { ArrowRight, Coins, Database, MessageSquare, Minus, Sparkles, TrendingDown, TrendingUp } from "lucide-react";
+import { ArrowRight, Coins, Database, Gauge, MessageSquare, Minus, Sparkles, TrendingDown, TrendingUp } from "lucide-react";
 import { RankBarChart } from "@/components/charts/rank-bar-chart";
 import { TrendChart } from "@/components/charts/trend-chart";
 import { PeriodFilter } from "@/components/period-filter";
@@ -16,6 +16,7 @@ import { buildFirstRunStatus, type FirstRunStatus } from "@/src/lib/first-run-st
 import { resolveDateRange } from "@/src/lib/date-range";
 import { formatCurrency, formatTokens, percent } from "@/src/lib/format";
 import { cn } from "@/src/lib/utils";
+import type { UsageGuardrailMetric } from "@/src/lib/usage-guardrails";
 
 export const dynamic = "force-dynamic";
 
@@ -127,6 +128,98 @@ function DeltaMetric({
   );
 }
 
+function guardrailBadgeVariant(status: UsageGuardrailMetric["status"]) {
+  if (status === "exceeded") return "destructive";
+  if (status === "warning") return "warning";
+  if (status === "ok") return "success";
+  return "secondary";
+}
+
+function guardrailLabel(status: UsageGuardrailMetric["status"]) {
+  if (status === "exceeded") return "exceeded";
+  if (status === "warning") return "watch";
+  if (status === "ok") return "within limit";
+  return "not set";
+}
+
+function GuardrailMetricPanel({
+  label,
+  metric,
+  formatValue
+}: {
+  label: string;
+  metric: UsageGuardrailMetric;
+  formatValue: (value: number | null) => string;
+}) {
+  const cappedPercent = Math.min(1, Math.max(0, metric.percent));
+  const barClass =
+    metric.status === "exceeded"
+      ? "bg-destructive"
+      : metric.status === "warning"
+        ? "bg-amber-500"
+        : "bg-primary";
+
+  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">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <FieldLabel>{label}</FieldLabel>
+        <Badge variant={guardrailBadgeVariant(metric.status)}>{guardrailLabel(metric.status)}</Badge>
+      </div>
+      <DataValue className="mt-1" size="md">
+        {metric.configured ? `${formatValue(metric.used)} / ${formatValue(metric.limit)}` : formatValue(metric.used)}
+      </DataValue>
+      <div className="mt-3 h-2 overflow-hidden rounded-full bg-muted">
+        <div className={cn("h-full rounded-full", barClass)} style={{ width: `${cappedPercent * 100}%` }} />
+      </div>
+      <div className="mt-2 text-xs text-muted-foreground">
+        {metric.configured
+          ? `${percent(metric.percent)} used, ${formatValue(metric.remaining)} remaining`
+          : "Set a local monthly limit in Settings."}
+      </div>
+    </div>
+  );
+}
+
+function UsageGuardrailsPanel({
+  progress
+}: {
+  progress: {
+    monthLabel: string;
+    cost: UsageGuardrailMetric;
+    tokens: UsageGuardrailMetric;
+  };
+}) {
+  const configured = progress.cost.configured || progress.tokens.configured;
+  return (
+    <Card>
+      <CardHeader className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+        <div>
+          <CardTitle className="flex items-center gap-2">
+            <Gauge className="h-4 w-4 text-primary" />
+            Monthly Guardrails
+          </CardTitle>
+          <CardDescription>
+            {configured
+              ? `Month-to-date checks for ${progress.monthLabel}, based only on imported local CLI usage.`
+              : "Optional local limits for monthly cost and tokens."}
+          </CardDescription>
+        </div>
+        <Button asChild variant="outline" size="sm">
+          <Link href="/settings">
+            Configure <ArrowRight className="h-4 w-4" />
+          </Link>
+        </Button>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className="grid border-t md:grid-cols-2">
+          <GuardrailMetricPanel label="Cost" metric={progress.cost} formatValue={formatCurrency} />
+          <GuardrailMetricPanel label="Tokens" metric={progress.tokens} formatValue={formatTokens} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
 function FirstRunPanel({ status }: { status: FirstRunStatus }) {
   return (
     <Card className={status.tone === "warning" ? "border-amber-300 bg-amber-50/50" : undefined}>
@@ -253,6 +346,8 @@ export default async function OverviewPage({ searchParams }: OverviewPageProps)
         </CardContent>
       </Card>
 
+      <UsageGuardrailsPanel progress={data.usageGuardrails} />
+
       <Card>
         <CardHeader>
           <h2 className="text-sm font-semibold leading-tight">Recommended Next Actions</h2>

package/app/projects/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { RankBarChart } from "@/components/charts/rank-bar-chart";
 import { TrendChart } from "@/components/charts/trend-chart";
+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 { DataValue, MonoText, PageHeader } from "@/components/ui/typography";
@@ -20,6 +21,56 @@ export default function ProjectAnalyticsPage() {
         description="Group usage by local repository or inferred project path."
       />
 
+      {data.projectSignals.length ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>Project Signals</CardTitle>
+            <CardDescription>
+              Local project-level patterns that deserve review before optimizing individual sessions.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="table-scroll">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Priority</TableHead>
+                  <TableHead>Signal</TableHead>
+                  <TableHead>Project</TableHead>
+                  <TableHead>Metric</TableHead>
+                  <TableHead>Action</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data.projectSignals.slice(0, 8).map((signal) => (
+                  <TableRow key={signal.id}>
+                    <TableCell>
+                      <Badge variant={signal.severity === "high" ? "destructive" : signal.severity === "medium" ? "warning" : "secondary"}>
+                        {signal.severity}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="capitalize">{signal.signal}</TableCell>
+                    <TableCell className="max-w-lg">
+                      <div className="font-medium">{signal.project}</div>
+                      <MonoText className="mt-1 block truncate text-muted-foreground">{signal.path}</MonoText>
+                      <div className="mt-1 text-xs text-muted-foreground">{signal.evidence}</div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="font-medium">{signal.metricValue}</div>
+                      <div className="text-xs text-muted-foreground">{signal.metricLabel}</div>
+                    </TableCell>
+                    <TableCell>
+                      <Link href={signal.href} className="font-medium text-primary underline-offset-4 hover:underline">
+                        {signal.action}
+                      </Link>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      ) : null}
+
       <div className="grid gap-4 lg:grid-cols-[1fr_1.4fr]">
         <Card>
           <CardHeader>

package/app/sessions/page.tsx

@@ -1,6 +1,11 @@
+import Link from "next/link";
 import { SessionExplorer } from "@/components/session-explorer";
+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 { PageHeader } from "@/components/ui/typography";
 import { getAnalyticsData } from "@/src/lib/analytics";
+import { formatCurrency, formatTokens } from "@/src/lib/format";
 
 export const dynamic = "force-dynamic";
 
@@ -24,6 +29,56 @@ export default async function SessionsPage({
         title="Session Explorer"
         description="Search and filter imported sessions by tool, model, project, cost, and estimation status."
       />
+      {data.sessionComparisons.length ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>Session Comparison Flags</CardTitle>
+            <CardDescription>
+              Sessions that are unusual compared with the same project, tool, and primary model.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="table-scroll">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Priority</TableHead>
+                  <TableHead>Flag</TableHead>
+                  <TableHead>Session</TableHead>
+                  <TableHead>Tokens</TableHead>
+                  <TableHead>Cost</TableHead>
+                  <TableHead>Peer median</TableHead>
+                  <TableHead>Action</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data.sessionComparisons.slice(0, 6).map((row) => (
+                  <TableRow key={row.sessionId}>
+                    <TableCell>
+                      <Badge variant={row.severity === "high" ? "destructive" : "warning"}>{row.severity}</Badge>
+                    </TableCell>
+                    <TableCell>{row.flag}</TableCell>
+                    <TableCell className="max-w-lg">
+                      <div className="font-medium">{row.title}</div>
+                      <div className="mt-1 text-xs text-muted-foreground">{row.project} / {row.tool} / {row.models}</div>
+                    </TableCell>
+                    <TableCell>{formatTokens(row.totalTokens)}</TableCell>
+                    <TableCell>{formatCurrency(row.cost)}</TableCell>
+                    <TableCell>
+                      <div>{formatTokens(row.peerMedianTokens)}</div>
+                      <div className="text-xs text-muted-foreground">{row.peerSessions} peer sessions</div>
+                    </TableCell>
+                    <TableCell>
+                      <Link href={row.href} className="font-medium text-primary underline-offset-4 hover:underline">
+                        Compare evidence
+                      </Link>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      ) : null}
       <SessionExplorer
         sessions={data.sessions}
         initialProject={params?.project}

package/bin/tokentrace.js

@@ -28,6 +28,8 @@ Usage:
   tokentrace scan         Scan local AI CLI usage logs
   tokentrace doctor --json
                           Inspect scan health and repair recommendations
+  tokentrace digest --json
+                          Print current-month local usage digest
   tokentrace insights --json
                           Print local recommendations as JSON
   tokentrace status --json
@@ -365,6 +367,11 @@ async function doctor(args) {
   await runNodeScript("doctor", args);
 }
 
+async function digest(args) {
+  await initializeDatabase({ quiet: true, refreshPrices: false });
+  await runNodeScript("digest", args);
+}
+
 async function insights(args) {
   await initializeDatabase({ quiet: true, refreshPrices: false });
   await runNodeScript("insights", args);
@@ -527,6 +534,10 @@ async function main() {
     await doctor(args);
     return;
   }
+  if (command === "digest") {
+    await digest(args);
+    return;
+  }
   if (command === "insights") {
     await insights(args);
     return;

package/components/settings-panel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useTransition } from "react";
-import { FolderPlus, Play, RotateCcw, ShieldCheck, Trash2 } from "lucide-react";
+import { FolderPlus, Gauge, Play, RotateCcw, ShieldCheck, Trash2 } from "lucide-react";
 import type { ScanHealth } from "@/src/lib/scan-health";
 import { formatAppVersion } from "@/src/lib/app-version";
 import { formatDate, percent } from "@/src/lib/format";
@@ -15,6 +15,10 @@ import { DataValue, FieldLabel, MonoText } from "@/components/ui/typography";
 type SettingsPayload = {
   customFolders: string[];
   storeRawMessageContent: boolean;
+  usageGuardrails: {
+    monthlyCostLimitUsd: number | null;
+    monthlyTokenLimit: number | null;
+  };
   databasePath: string;
   appVersion: string;
 };
@@ -38,6 +42,13 @@ function toneVariant(tone: ScanHealth["tone"]) {
   return "secondary";
 }
 
+function parseLimitInput(value: string) {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  const parsed = Number(trimmed);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+
 export function SettingsPanel({
   initialSettings,
   initialScanHealth
@@ -47,6 +58,12 @@ export function SettingsPanel({
 }) {
   const [customFolders, setCustomFolders] = useState(initialSettings.customFolders);
   const [storeRaw, setStoreRaw] = useState(initialSettings.storeRawMessageContent);
+  const [monthlyCostLimitUsd, setMonthlyCostLimitUsd] = useState(
+    initialSettings.usageGuardrails.monthlyCostLimitUsd?.toString() ?? ""
+  );
+  const [monthlyTokenLimit, setMonthlyTokenLimit] = useState(
+    initialSettings.usageGuardrails.monthlyTokenLimit?.toString() ?? ""
+  );
   const [newFolder, setNewFolder] = useState("");
   const [force, setForce] = useState(false);
   const [message, setMessage] = useState("");
@@ -64,16 +81,24 @@ export function SettingsPanel({
     setCustomFolders((current) => current.filter((item) => item !== folder));
   }
 
+  function settingsPayload() {
+    return {
+      customFolders,
+      storeRawMessageContent: storeRaw,
+      usageGuardrails: {
+        monthlyCostLimitUsd: parseLimitInput(monthlyCostLimitUsd),
+        monthlyTokenLimit: parseLimitInput(monthlyTokenLimit)
+      }
+    };
+  }
+
   function saveSettings() {
     startTransition(async () => {
       setMessage("");
       const response = await fetch("/api/settings", {
         method: "PUT",
         headers: { "content-type": "application/json" },
-        body: JSON.stringify({
-          customFolders,
-          storeRawMessageContent: storeRaw
-        })
+        body: JSON.stringify(settingsPayload())
       });
       setMessage(response.ok ? "Settings saved." : "Settings save failed.");
     });
@@ -86,10 +111,7 @@ export function SettingsPanel({
       await fetch("/api/settings", {
         method: "PUT",
         headers: { "content-type": "application/json" },
-        body: JSON.stringify({
-          customFolders,
-          storeRawMessageContent: storeRaw
-        })
+        body: JSON.stringify(settingsPayload())
       });
       const response = await fetch("/api/scan", {
         method: "POST",
@@ -189,6 +211,48 @@ export function SettingsPanel({
         </CardContent>
       </Card>
 
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Gauge className="h-4 w-4 text-primary" />
+            Local Usage Guardrails
+          </CardTitle>
+          <CardDescription>
+            Optional month-to-date limits for local cost and token awareness.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4 border-y p-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="monthly-cost-limit">Monthly cost limit</Label>
+            <Input
+              id="monthly-cost-limit"
+              type="number"
+              min="0"
+              step="0.01"
+              inputMode="decimal"
+              value={monthlyCostLimitUsd}
+              onChange={(event) => setMonthlyCostLimitUsd(event.target.value)}
+              placeholder="250"
+            />
+            <p className="text-xs text-muted-foreground">USD limit for imported CLI usage this calendar month.</p>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="monthly-token-limit">Monthly token limit</Label>
+            <Input
+              id="monthly-token-limit"
+              type="number"
+              min="0"
+              step="1000"
+              inputMode="numeric"
+              value={monthlyTokenLimit}
+              onChange={(event) => setMonthlyTokenLimit(event.target.value)}
+              placeholder="10000000"
+            />
+            <p className="text-xs text-muted-foreground">Leave either field blank to disable that guardrail.</p>
+          </div>
+        </CardContent>
+      </Card>
+
       <Card>
         <CardHeader>
           <CardTitle className="flex flex-wrap items-center gap-2">