@tokcalc/mcp-server 0.1.3 → 0.1.4

package/src/components/live-pricing-comparison.tsx

@@ -1,241 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { RefreshCw, Zap, TrendingDown, Cloud } from "lucide-react";
-import { track } from "@/lib/track";
-
-interface UnifiedPrice {
-  gpu: string;
-  pricePerGpuHour: number;
-  provider: string;
-  region: string;
-  retrievedAt: string;
-}
-
-interface ProviderResponse {
-  source: string;
-  cached: boolean;
-  retrievedAt?: string;
-  count?: number;
-  prices?: Array<{ gpu: string; pricePerGpuHour?: number; price?: number; region?: string; retrievedAt?: string }>;
-  error?: string;
-}
-
-export function LivePricingComparison() {
-  const [prices, setPrices] = useState<UnifiedPrice[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [lastUpdated, setLastUpdated] = useState<string | null>(null);
-  const [errors, setErrors] = useState<string[]>([]);
-
-  const fetchAll = async () => {
-    setLoading(true);
-    setErrors([]);
-    const allPrices: UnifiedPrice[] = [];
-    const newErrors: string[] = [];
-    let latestTimestamp: string | null = null;
-
-    // Fetch all providers in parallel
-    const providers = [
-      { url: "/api/pricing/azure", name: "Azure" },
-      { url: "/api/pricing/vast-ai", name: "Vast.ai" },
-      { url: "/api/pricing/aws", name: "AWS" },
-      { url: "/api/pricing/gcp", name: "GCP" },
-    ];
-
-    const results = await Promise.allSettled(
-      providers.map(async (p) => {
-        const res = await fetch(p.url);
-        if (!res.ok) {
-          const errData = await res.json().catch(() => ({}));
-          throw new Error(errData.error || `HTTP ${res.status}`);
-        }
-        return { provider: p.name, data: (await res.json()) as ProviderResponse };
-      }),
-    );
-
-    for (const result of results) {
-      if (result.status === "fulfilled") {
-        const { provider, data } = result.value;
-        const providerPrices = data.prices || [];
-
-        for (const p of providerPrices) {
-          const pricePerGpuHour = p.pricePerGpuHour ?? p.price ?? 0;
-          if (pricePerGpuHour > 0) {
-            allPrices.push({
-              gpu: p.gpu,
-              pricePerGpuHour,
-              provider,
-              region: p.region || "—",
-              retrievedAt: p.retrievedAt || data.retrievedAt || new Date().toISOString(),
-            });
-          }
-        }
-
-        if (data.retrievedAt && (!latestTimestamp || new Date(data.retrievedAt) > new Date(latestTimestamp))) {
-          latestTimestamp = data.retrievedAt;
-        }
-
-        track("fetched_live_pricing", { provider, count: providerPrices.length });
-      } else if (result.status === "rejected") {
-        const providerName = providers[results.indexOf(result)].name;
-        newErrors.push(`${providerName}: ${result.reason?.message || "fetch failed"}`);
-      }
-    }
-
-    setPrices(allPrices);
-    setLastUpdated(latestTimestamp);
-    setErrors(newErrors);
-    setLoading(false);
-  };
-
-  useEffect(() => {
-    fetchAll();
-  }, []);
-
-  // Deduplicate: keep cheapest per GPU per provider
-  const cheapestPerGpu = (() => {
-    const seen = new Map<string, UnifiedPrice>();
-    for (const p of prices) {
-      const key = `${p.gpu}-${p.provider}`;
-      if (!seen.has(key) || seen.get(key)!.pricePerGpuHour > p.pricePerGpuHour) {
-        seen.set(key, p);
-      }
-    }
-
-    // Group by GPU, sort providers by price
-    const byGpu = new Map<string, UnifiedPrice[]>();
-    for (const p of Array.from(seen.values())) {
-      if (!byGpu.has(p.gpu)) byGpu.set(p.gpu, []);
-      byGpu.get(p.gpu)!.push(p);
-    }
-
-    // Sort each GPU's providers by price
-    for (const arr of byGpu.values()) {
-      arr.sort((a, b) => a.pricePerGpuHour - b.pricePerGpuHour);
-    }
-
-    // Sort GPUs by their cheapest provider
-    return Array.from(byGpu.entries())
-      .map(([gpu, providers]) => ({ gpu, providers }))
-      .sort((a, b) => a.providers[0].pricePerGpuHour - b.providers[0].pricePerGpuHour);
-  })();
-
-  const asOfLabel = (() => {
-    if (!lastUpdated) return null;
-    const ageMs = Date.now() - new Date(lastUpdated).getTime();
-    if (ageMs < 60000) return "just now";
-    if (ageMs < 3600000) return `${Math.floor(ageMs / 60000)}m ago`;
-    return `${Math.floor(ageMs / 3600000)}h ago`;
-  })();
-
-  const providerColors: Record<string, string> = {
-    Azure: "text-blue-500",
-    "Vast.ai": "text-amber-500",
-    AWS: "text-orange-500",
-    GCP: "text-red-500",
-  };
-
-  return (
-    <Card className="border-emerald-500/30 shadow-sm">
-      <CardHeader className="pb-3">
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="text-sm flex items-center gap-2">
-              <Cloud className="size-4 text-emerald-500" />
-              Live GPU price comparison — all providers
-              <Badge variant="outline" className="text-[9px] gap-1 ml-1">
-                <span className="size-1.5 rounded-full bg-emerald-500 animate-pulse" />
-                LIVE
-              </Badge>
-            </CardTitle>
-            <CardDescription className="text-xs mt-1">
-              Cheapest available GPU price across Azure, AWS, GCP, and Vast.ai marketplace.
-              {asOfLabel && ` Last updated ${asOfLabel}.`}
-            </CardDescription>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={fetchAll}
-            disabled={loading}
-            className="gap-1.5 h-8"
-          >
-            <RefreshCw className={`size-3.5 ${loading ? "animate-spin" : ""}`} />
-            <span className="text-xs">Refresh</span>
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        {loading && prices.length === 0 && (
-          <div className="flex items-center justify-center py-8 text-xs text-muted-foreground">
-            <RefreshCw className="size-4 animate-spin mr-2" />
-            Fetching live prices from Azure, Vast.ai, AWS, and GCP...
-          </div>
-        )}
-
-        {errors.length > 0 && (
-          <div className="mb-3 p-2 rounded-md border border-amber-500/30 bg-amber-500/5 text-[10px] text-amber-600 dark:text-amber-400">
-            ⚠ {errors.join(" · ")}
-          </div>
-        )}
-
-        {cheapestPerGpu.length > 0 && (
-          <div className="overflow-x-auto">
-            <table className="w-full text-xs">
-              <thead className="bg-muted/40 text-[10px] uppercase">
-                <tr>
-                  <th className="text-left px-3 py-1.5">GPU</th>
-                  <th className="text-right px-3 py-1.5">Cheapest $/GPU-hr</th>
-                  <th className="text-left px-3 py-1.5">Provider</th>
-                  <th className="text-left px-3 py-1.5">All providers</th>
-                </tr>
-              </thead>
-              <tbody>
-                {cheapestPerGpu.map(({ gpu, providers }) => {
-                  const cheapest = providers[0];
-                  return (
-                    <tr key={gpu} className="border-t border-border/40 hover:bg-muted/20">
-                      <td className="px-3 py-1.5 font-medium">{gpu}</td>
-                      <td className="px-3 py-1.5 text-right font-mono text-emerald-500 font-semibold">
-                        ${cheapest.pricePerGpuHour}/hr
-                      </td>
-                      <td className="px-3 py-1.5">
-                        <span className={providerColors[cheapest.provider] || "text-muted-foreground"}>
-                          {cheapest.provider}
-                        </span>
-                        <span className="text-muted-foreground text-[10px] ml-1">{cheapest.region}</span>
-                      </td>
-                      <td className="px-3 py-1.5 text-[10px] text-muted-foreground">
-                        {providers.map((p, i) => (
-                          <span key={i}>
-                            {i > 0 && " · "}
-                            <span className={providerColors[p.provider] || "text-muted-foreground"}>
-                              {p.provider} ${p.pricePerGpuHour}
-                            </span>
-                          </span>
-                        ))}
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-            <p className="text-[10px] text-muted-foreground mt-2 leading-relaxed">
-              On-demand prices (spot/reserved excluded). Vast.ai shows spot-market prices which change rapidly.
-              GCP requires <code>GCP_API_KEY</code> env var on Vercel. AWS uses public bulk pricing files (no auth).
-            </p>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

package/src/components/theme-provider.tsx

@@ -1,11 +0,0 @@
-"use client";
-
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-import type { ComponentProps } from "react";
-
-export function ThemeProvider({
-  children,
-  ...props
-}: ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}

package/src/components/theme-toggle.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-
-/**
- * Theme toggle button.
- *
- * Renders a STABLE button (same aria-label, same icon) on server + first client
- * render. Only AFTER `useEffect` runs (post-hydration) do we swap in the actual
- * sun/moon icon. This avoids hydration mismatches caused by `resolvedTheme`
- * being undefined on the server but defined on the client.
- *
- * Refs: https://github.com/pacocoursey/next-themes#avoid-hydration-mismatches
- */
-export function ThemeToggle() {
-  const { resolvedTheme, setTheme } = useTheme();
-  // eslint-disable-next-line react-hooks/set-state-in-effect
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setMounted(true);
-  }, []);
-
-  const isDark = resolvedTheme === "dark";
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={() => setTheme(isDark ? "light" : "dark")}
-      // STABLE label — never depends on theme. This is the hydration-safe choice.
-      aria-label="Toggle theme"
-      className="size-8 rounded-md"
-      // suppressHydrationWarning is the recommended escape hatch for theme toggles
-      // that swap attributes post-mount.
-      suppressHydrationWarning
-    >
-      {mounted ? (
-        isDark ? (
-          <Sun className="size-4" />
-        ) : (
-          <Moon className="size-4" />
-        )
-      ) : (
-        // Stable placeholder used during SSR + first client render.
-        // Must match exactly between server and client to avoid hydration warnings.
-        <Sun className="size-4" />
-      )}
-    </Button>
-  );
-}

package/src/components/ui/accordion.tsx

@@ -1,66 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/ui/alert-dialog.tsx

@@ -1,157 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/src/components/ui/alert.tsx

@@ -1,66 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/aspect-ratio.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-function AspectRatio({
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}
-
-export { AspectRatio }

package/src/components/ui/avatar.tsx

@@ -1,53 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarImage, AvatarFallback }