tokentrace 0.1.0

package/components/session-explorer.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Download, Filter } from "lucide-react";
+import type { SessionRow } from "@/src/lib/analytics";
+import { formatCurrency, formatDate, formatDuration, formatTokens } from "@/src/lib/format";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+type ExactFilter = "all" | "exact" | "estimated";
+
+export function SessionExplorer({
+  sessions,
+  initialProject
+}: {
+  sessions: SessionRow[];
+  initialProject?: string;
+}) {
+  const [query, setQuery] = useState("");
+  const [tool, setTool] = useState("all");
+  const [model, setModel] = useState("all");
+  const [project, setProject] = useState(initialProject ?? "all");
+  const [exact, setExact] = useState<ExactFilter>("all");
+  const [from, setFrom] = useState("");
+  const [to, setTo] = useState("");
+  const [highCost, setHighCost] = useState(false);
+
+  const tools = useMemo(() => Array.from(new Set(sessions.map((session) => session.tool))).sort(), [sessions]);
+  const models = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          sessions.flatMap((session) =>
+            session.models
+              .split(",")
+              .map((item) => item.trim())
+              .filter(Boolean)
+          )
+        )
+      ).sort(),
+    [sessions]
+  );
+  const projects = useMemo(
+    () => Array.from(new Set(sessions.map((session) => session.project))).sort(),
+    [sessions]
+  );
+  const highCostThreshold = useMemo(() => {
+    const costs = sessions
+      .map((session) => session.cost ?? 0)
+      .filter((cost) => cost > 0)
+      .sort((a, b) => a - b);
+    return costs.length ? costs[Math.floor(costs.length * 0.85)] : 0;
+  }, [sessions]);
+
+  const filtered = useMemo(() => {
+    const fromMs = from ? new Date(`${from}T00:00:00`).getTime() : null;
+    const toMs = to ? new Date(`${to}T23:59:59`).getTime() : null;
+    const normalizedQuery = query.toLowerCase();
+
+    return sessions.filter((session) => {
+      if (tool !== "all" && session.tool !== tool) return false;
+      if (model !== "all" && !session.models.split(",").map((item) => item.trim()).includes(model)) return false;
+      if (project !== "all" && session.project !== project) return false;
+      if (exact === "exact" && session.estimatedTokens) return false;
+      if (exact === "estimated" && !session.estimatedTokens) return false;
+      if (fromMs && (!session.startedAt || session.startedAt < fromMs)) return false;
+      if (toMs && (!session.startedAt || session.startedAt > toMs)) return false;
+      if (highCost && (session.cost ?? 0) < highCostThreshold) return false;
+      if (!normalizedQuery) return true;
+      return [
+        session.title,
+        session.sourceFile,
+        session.tool,
+        session.project,
+        session.models
+      ]
+        .join(" ")
+        .toLowerCase()
+        .includes(normalizedQuery);
+    });
+  }, [exact, from, highCost, highCostThreshold, model, project, query, sessions, to, tool]);
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Filter className="h-4 w-4" />
+            Filters
+          </CardTitle>
+          <CardDescription>Search by date, tool, model, project, estimated status, or high cost.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-3 md:grid-cols-4">
+            <div className="space-y-1.5">
+              <Label htmlFor="query">Search</Label>
+              <Input id="query" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Title, file, model" />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="tool">Tool</Label>
+              <select id="tool" className="h-9 w-full rounded-md border bg-card px-3 text-sm" value={tool} onChange={(event) => setTool(event.target.value)}>
+                <option value="all">All tools</option>
+                {tools.map((item) => (
+                  <option key={item} value={item}>{item}</option>
+                ))}
+              </select>
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="model">Model</Label>
+              <select id="model" className="h-9 w-full rounded-md border bg-card px-3 text-sm" value={model} onChange={(event) => setModel(event.target.value)}>
+                <option value="all">All models</option>
+                {models.map((item) => (
+                  <option key={item} value={item}>{item}</option>
+                ))}
+              </select>
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="project">Project</Label>
+              <select id="project" className="h-9 w-full rounded-md border bg-card px-3 text-sm" value={project} onChange={(event) => setProject(event.target.value)}>
+                <option value="all">All projects</option>
+                {projects.map((item) => (
+                  <option key={item} value={item}>{item}</option>
+                ))}
+              </select>
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="from">From</Label>
+              <Input id="from" type="date" value={from} onChange={(event) => setFrom(event.target.value)} />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="to">To</Label>
+              <Input id="to" type="date" value={to} onChange={(event) => setTo(event.target.value)} />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="exact">Token source</Label>
+              <select id="exact" className="h-9 w-full rounded-md border bg-card px-3 text-sm" value={exact} onChange={(event) => setExact(event.target.value as ExactFilter)}>
+                <option value="all">Exact and estimated</option>
+                <option value="exact">Exact only</option>
+                <option value="estimated">Estimated only</option>
+              </select>
+            </div>
+            <div className="flex items-end">
+              <label className="flex h-9 items-center gap-2 rounded-md border bg-card px-3 text-sm">
+                <input type="checkbox" checked={highCost} onChange={(event) => setHighCost(event.target.checked)} />
+                High-cost sessions
+              </label>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <CardTitle>Sessions</CardTitle>
+            <CardDescription>{filtered.length.toLocaleString()} sessions match the current filters.</CardDescription>
+          </div>
+          <div className="flex gap-2">
+            <Button asChild variant="outline" size="sm">
+              <a href="/api/export?type=sessions">
+                <Download className="h-4 w-4" />
+                CSV
+              </a>
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="table-scroll">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Date</TableHead>
+                <TableHead>Tool</TableHead>
+                <TableHead>Project</TableHead>
+                <TableHead>Model</TableHead>
+                <TableHead>Tokens</TableHead>
+                <TableHead>Cost</TableHead>
+                <TableHead>Duration</TableHead>
+                <TableHead>Flag</TableHead>
+                <TableHead>Source file</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filtered.map((session) => (
+                <TableRow key={session.id}>
+                  <TableCell>{formatDate(session.startedAt)}</TableCell>
+                  <TableCell className="font-medium">{session.tool}</TableCell>
+                  <TableCell>{session.project}</TableCell>
+                  <TableCell className="max-w-44 truncate">{session.models}</TableCell>
+                  <TableCell>{formatTokens(session.totalTokens)}</TableCell>
+                  <TableCell>{formatCurrency(session.cost)}</TableCell>
+                  <TableCell>{formatDuration(session.durationMs)}</TableCell>
+                  <TableCell>
+                    <Badge variant={session.tokenConfidence === "exact" ? "success" : session.tokenConfidence === "unknown" ? "destructive" : "warning"}>
+                      {session.tokenConfidence}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="max-w-72 truncate">{session.sourceFile}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/components/settings-panel.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { FolderPlus, Play, RotateCcw, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+
+type SettingsPayload = {
+  customFolders: string[];
+  storeRawMessageContent: boolean;
+  databasePath: string;
+};
+
+type ScanResult = {
+  scanRunId: string;
+  filesScanned: number;
+  recordsImported: number;
+  warnings: string[];
+  errors: string[];
+};
+
+export function SettingsPanel({ initialSettings }: { initialSettings: SettingsPayload }) {
+  const [customFolders, setCustomFolders] = useState(initialSettings.customFolders);
+  const [storeRaw, setStoreRaw] = useState(initialSettings.storeRawMessageContent);
+  const [newFolder, setNewFolder] = useState("");
+  const [force, setForce] = useState(false);
+  const [message, setMessage] = useState("");
+  const [scanResult, setScanResult] = useState<ScanResult | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  function addFolder() {
+    const folder = newFolder.trim();
+    if (!folder) return;
+    if (!customFolders.includes(folder)) setCustomFolders((current) => [...current, folder]);
+    setNewFolder("");
+  }
+
+  function removeFolder(folder: string) {
+    setCustomFolders((current) => current.filter((item) => item !== folder));
+  }
+
+  function saveSettings() {
+    startTransition(async () => {
+      setMessage("");
+      const response = await fetch("/api/settings", {
+        method: "PUT",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          customFolders,
+          storeRawMessageContent: storeRaw
+        })
+      });
+      setMessage(response.ok ? "Settings saved." : "Settings save failed.");
+    });
+  }
+
+  function runScan() {
+    startTransition(async () => {
+      setMessage("Scanning local files...");
+      setScanResult(null);
+      await fetch("/api/settings", {
+        method: "PUT",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          customFolders,
+          storeRawMessageContent: storeRaw
+        })
+      });
+      const response = await fetch("/api/scan", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ force })
+      });
+      const result = (await response.json()) as ScanResult;
+      setScanResult(result);
+      setMessage(response.ok ? "Scan complete." : "Scan failed.");
+    });
+  }
+
+  function clearData() {
+    if (!window.confirm("Clear imported sessions, interactions, projects, and scan history?")) return;
+    startTransition(async () => {
+      const response = await fetch("/api/data", { method: "DELETE" });
+      setMessage(response.ok ? "Imported data cleared." : "Clear failed.");
+      setScanResult(null);
+    });
+  }
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Local Storage</CardTitle>
+          <CardDescription>SQLite database location and raw-content controls.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-1.5">
+            <Label>Database path</Label>
+            <div className="rounded-md border bg-muted/40 p-3 font-mono text-xs">
+              {initialSettings.databasePath}
+            </div>
+          </div>
+          <label className="flex items-center gap-3 rounded-md border bg-card p-3 text-sm">
+            <input
+              type="checkbox"
+              checked={storeRaw}
+              onChange={(event) => setStoreRaw(event.target.checked)}
+            />
+            Store raw message content
+            <Badge variant={storeRaw ? "warning" : "success"}>
+              {storeRaw ? "On" : "Default off"}
+            </Badge>
+          </label>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Custom Folders</CardTitle>
+          <CardDescription>Add folders outside the default Claude, Codex, OpenAI, and project paths.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <Input
+              value={newFolder}
+              onChange={(event) => setNewFolder(event.target.value)}
+              placeholder="~/Library/Logs/my-ai-cli"
+            />
+            <Button type="button" variant="outline" onClick={addFolder}>
+              <FolderPlus className="h-4 w-4" />
+              Add
+            </Button>
+          </div>
+          <div className="space-y-2">
+            {customFolders.length ? (
+              customFolders.map((folder) => (
+                <div key={folder} className="flex items-center justify-between gap-3 rounded-md border bg-muted/40 p-2">
+                  <span className="min-w-0 truncate font-mono text-xs">{folder}</span>
+                  <Button type="button" size="sm" variant="ghost" onClick={() => removeFolder(folder)}>
+                    Remove
+                  </Button>
+                </div>
+              ))
+            ) : (
+              <p className="text-sm text-muted-foreground">No custom folders configured.</p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Scan Controls</CardTitle>
+          <CardDescription>Run discovery and import locally. Duplicate files are skipped by default.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <label className="flex items-center gap-2 text-sm">
+            <input type="checkbox" checked={force} onChange={(event) => setForce(event.target.checked)} />
+            Force rescan files with previously imported hashes
+          </label>
+          <div className="flex flex-wrap gap-2">
+            <Button onClick={saveSettings} disabled={isPending}>
+              <RotateCcw className="h-4 w-4" />
+              Save settings
+            </Button>
+            <Button onClick={runScan} disabled={isPending} variant="secondary">
+              <Play className="h-4 w-4" />
+              Scan now
+            </Button>
+            <Button onClick={clearData} disabled={isPending} variant="destructive">
+              <Trash2 className="h-4 w-4" />
+              Clear imported data
+            </Button>
+          </div>
+          {message ? <p className="text-sm text-muted-foreground">{message}</p> : null}
+          {scanResult ? (
+            <div className="grid gap-3 rounded-md border bg-muted/40 p-3 text-sm sm:grid-cols-4">
+              <div>
+                <div className="text-xs text-muted-foreground">Files scanned</div>
+                <div className="font-semibold">{scanResult.filesScanned.toLocaleString()}</div>
+              </div>
+              <div>
+                <div className="text-xs text-muted-foreground">Records imported</div>
+                <div className="font-semibold">{scanResult.recordsImported.toLocaleString()}</div>
+              </div>
+              <div>
+                <div className="text-xs text-muted-foreground">Warnings</div>
+                <div className="font-semibold">{scanResult.warnings.length.toLocaleString()}</div>
+              </div>
+              <div>
+                <div className="text-xs text-muted-foreground">Errors</div>
+                <div className="font-semibold">{scanResult.errors.length.toLocaleString()}</div>
+              </div>
+            </div>
+          ) : null}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/components/sidebar.tsx

@@ -0,0 +1,88 @@
+import Link from "next/link";
+import {
+  BarChart3,
+  Bot,
+  Bug,
+  ClipboardList,
+  FolderGit2,
+  Gauge,
+  LineChart,
+  Search,
+  Settings,
+  SlidersHorizontal,
+  Sparkles,
+  Terminal
+} from "lucide-react";
+
+const navItems = [
+  { href: "/", label: "Overview", icon: Gauge },
+  { href: "/tools", label: "Tools", icon: Terminal },
+  { href: "/models", label: "Models", icon: Bot },
+  { href: "/projects", label: "Projects", icon: FolderGit2 },
+  { href: "/sessions", label: "Sessions", icon: Search },
+  { href: "/optimisation", label: "Insights", icon: Sparkles },
+  { href: "/pricing", label: "Pricing", icon: SlidersHorizontal },
+  { href: "/diagnostics", label: "Diagnostics", icon: ClipboardList },
+  { href: "/discovery", label: "Discovery", icon: BarChart3 },
+  { href: "/parser-debug", label: "Parsers", icon: Bug },
+  { href: "/debug", label: "Raw Data", icon: Bug },
+  { href: "/settings", label: "Settings", icon: Settings }
+];
+
+export function Sidebar() {
+  return (
+    <aside className="sticky top-0 hidden h-screen w-64 shrink-0 border-r bg-card md:block">
+      <div className="flex h-full flex-col">
+        <div className="border-b p-5">
+          <div className="flex items-center gap-2">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <LineChart className="h-5 w-5" />
+            </div>
+            <div>
+              <div className="text-sm font-semibold">TokenTrace CLI</div>
+              <div className="text-xs text-muted-foreground">Local analytics</div>
+            </div>
+          </div>
+        </div>
+        <nav className="flex-1 space-y-1 p-3">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              >
+                <Icon className="h-4 w-4" />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+        <div className="border-t p-4 text-xs text-muted-foreground">
+          Local only. No telemetry. Raw content off by default.
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+export function MobileNav() {
+  return (
+    <nav className="flex gap-2 overflow-x-auto border-b bg-card px-4 py-2 md:hidden">
+      {navItems.map((item) => {
+        const Icon = item.icon;
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            className="flex shrink-0 items-center gap-2 rounded-md border px-3 py-2 text-xs text-muted-foreground"
+          >
+            <Icon className="h-3.5 w-3.5" />
+            {item.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

package/components/ui/badge.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/src/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-muted text-muted-foreground",
+        outline: "text-foreground",
+        warning: "border-amber-300 bg-amber-50 text-amber-800",
+        success: "border-emerald-300 bg-emerald-50 text-emerald-800",
+        destructive: "border-red-300 bg-red-50 text-red-800"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

package/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+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 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
+        outline: "border bg-card hover:bg-muted",
+        ghost: "hover:bg-muted",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+      },
+      size: {
+        default: "h-9 px-3",
+        sm: "h-8 px-2.5 text-xs",
+        lg: "h-10 px-4",
+        icon: "h-9 w-9 px-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/components/ui/card.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn } from "@/src/lib/utils";
+
+export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("rounded-lg border bg-card text-card-foreground", className)} {...props} />;
+}
+
+export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />;
+}
+
+export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn("text-sm font-semibold", className)} {...props} />;
+}
+
+export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
+}
+
+export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-4 pt-0", className)} {...props} />;
+}

package/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/src/lib/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => (
+  <input
+    type={type}
+    className={cn(
+      "flex h-9 w-full rounded-md border bg-card px-3 py-1 text-sm shadow-sm 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",
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+Input.displayName = "Input";
+
+export { Input };

package/components/ui/label.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { cn } from "@/src/lib/utils";
+
+export function Label({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return <label className={cn("text-sm font-medium leading-none", className)} {...props} />;
+}

package/components/ui/table.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { cn } from "@/src/lib/utils";
+
+export function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>) {
+  return <table className={cn("w-full caption-bottom text-sm", className)} {...props} />;
+}
+
+export function TableHeader({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+export function TableBody({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+}
+
+export function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) {
+  return <tr className={cn("border-b transition-colors hover:bg-muted/50", className)} {...props} />;
+}
+
+export function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      className={cn("h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td className={cn("p-3 align-middle", className)} {...props} />;
+}