@tokcalc/mcp-server 0.1.0 → 0.1.2

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

@@ -0,0 +1,241 @@
+"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

@@ -0,0 +1,11 @@
+"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

@@ -0,0 +1,55 @@
+"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

@@ -0,0 +1,66 @@
+"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

@@ -0,0 +1,157 @@
+"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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,11 @@
+"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

@@ -0,0 +1,53 @@
+"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 }