@wopr-network/platform-ui-core 1.0.0

package/src/components/bot-settings/resources-tab.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { getResourceTier, setResourceTier } from "@/lib/bot-settings-data";
+import { toUserMessage } from "@/lib/errors";
+
+const TIERS = [
+  {
+    key: "standard",
+    label: "Standard",
+    ram: "2 GB",
+    cpu: "2 vCPU",
+    dailyCost: 0,
+    monthlyCost: "Included",
+    description: "Included with your bot",
+  },
+  {
+    key: "pro",
+    label: "Pro",
+    ram: "4 GB",
+    cpu: "4 vCPU",
+    dailyCost: 10,
+    monthlyCost: "~$3/mo",
+    description: "For heavier workloads",
+  },
+  {
+    key: "power",
+    label: "Power",
+    ram: "8 GB",
+    cpu: "6 vCPU",
+    dailyCost: 27,
+    monthlyCost: "~$8/mo",
+    description: "For power users",
+  },
+  {
+    key: "beast",
+    label: "Beast",
+    ram: "16 GB",
+    cpu: "8 vCPU",
+    dailyCost: 50,
+    monthlyCost: "~$15/mo",
+    description: "Maximum performance",
+  },
+] as const;
+
+type TierEntry = (typeof TIERS)[number];
+
+export function ResourcesTab({ botId }: { botId: string }) {
+  const [currentTier, setCurrentTier] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [confirmTier, setConfirmTier] = useState<TierEntry | null>(null);
+  const [applying, setApplying] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // biome-ignore lint/suspicious/noEmptyBlockStatements: initial no-op placeholder replaced in useEffect
+  const retryRef = useRef<() => void>(() => {});
+
+  useEffect(() => {
+    let cancelled = false;
+    function loadTier() {
+      setLoading(true);
+      setLoadError(null);
+      getResourceTier(botId)
+        .then((res) => {
+          if (!cancelled) setCurrentTier(res.tier);
+        })
+        .catch((_err) => {
+          if (!cancelled) {
+            setCurrentTier(null);
+            setLoadError("Failed to load resource tier. Please refresh.");
+          }
+        })
+        .finally(() => {
+          if (!cancelled) setLoading(false);
+        });
+    }
+    retryRef.current = loadTier;
+    loadTier();
+    return () => {
+      cancelled = true;
+    };
+  }, [botId]);
+
+  async function handleConfirm() {
+    if (!confirmTier) return;
+    setApplying(true);
+    setError(null);
+    try {
+      const result = await setResourceTier(botId, confirmTier.key);
+      setCurrentTier(result.tier);
+      setConfirmTier(null);
+    } catch (err) {
+      setError(toUserMessage(err, "Failed to change tier"));
+    } finally {
+      setApplying(false);
+    }
+  }
+
+  if (loading) {
+    return <div className="text-muted-foreground">Loading resource info...</div>;
+  }
+
+  if (loadError) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-destructive">
+        <span>{loadError}</span>
+        <Button size="sm" variant="outline" onClick={() => retryRef.current()}>
+          Retry
+        </Button>
+      </div>
+    );
+  }
+
+  const currentTierIndex = TIERS.findIndex((t) => t.key === currentTier);
+
+  return (
+    <div className="max-w-3xl space-y-6">
+      <div>
+        <h2 className="text-xl font-bold">Resources</h2>
+        <p className="text-sm text-muted-foreground">
+          Upgrade your bot's RAM and CPU. Higher tiers cost additional daily credits.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        {TIERS.map((tier) => {
+          const isCurrent = tier.key === currentTier;
+          const tierIndex = TIERS.findIndex((t) => t.key === tier.key);
+          return (
+            <Card key={tier.key} className={isCurrent ? "border-primary ring-1 ring-primary" : ""}>
+              <CardHeader className="pb-2">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-base">{tier.label}</CardTitle>
+                  {isCurrent && <Badge>Current</Badge>}
+                </div>
+                <CardDescription>{tier.description}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="flex gap-4 text-sm">
+                  <span>{tier.ram} RAM</span>
+                  <span>{tier.cpu}</span>
+                </div>
+                <div className="text-sm font-medium">
+                  {tier.dailyCost === 0
+                    ? "Included"
+                    : `+${tier.dailyCost} credits/day (${tier.monthlyCost})`}
+                </div>
+                {!isCurrent && (
+                  <Button
+                    size="sm"
+                    variant={tier.key === "standard" ? "outline" : "default"}
+                    onClick={() => setConfirmTier(tier)}
+                  >
+                    {currentTier === null
+                      ? "Select"
+                      : tierIndex < currentTierIndex
+                        ? "Downgrade"
+                        : "Upgrade"}
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+
+      <Dialog open={confirmTier !== null} onOpenChange={() => setConfirmTier(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Change to {confirmTier?.label}?</DialogTitle>
+            <DialogDescription>
+              {confirmTier && confirmTier.dailyCost > 0
+                ? `This will add ${confirmTier.dailyCost} credits/day (${confirmTier.monthlyCost}) to your bot's running cost. Your bot will restart to apply new resource limits.`
+                : "Your bot will restart to apply new resource limits. No additional cost."}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setConfirmTier(null)}>
+              Cancel
+            </Button>
+            <Button onClick={handleConfirm} disabled={applying}>
+              {applying ? "Applying..." : "Confirm"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/components/bot-settings/storage-tab.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Progress } from "@/components/ui/progress";
+import {
+  getStorageTier,
+  getStorageUsage,
+  type StorageUsage,
+  setStorageTier,
+} from "@/lib/bot-settings-data";
+
+const STORAGE_TIERS = [
+  {
+    key: "standard",
+    label: "Standard",
+    storageLimitGb: 5,
+    dailyCostCents: 0,
+    description: "5 GB — included with your bot",
+  },
+  {
+    key: "plus",
+    label: "Plus",
+    storageLimitGb: 20,
+    dailyCostCents: 3,
+    description: "20 GB — for bots with browser automation or file processing",
+  },
+  {
+    key: "pro",
+    label: "Pro",
+    storageLimitGb: 50,
+    dailyCostCents: 8,
+    description: "50 GB — for semantic memory and large datasets",
+  },
+  {
+    key: "max",
+    label: "Max",
+    storageLimitGb: 100,
+    dailyCostCents: 15,
+    description: "100 GB — maximum storage capacity",
+  },
+] as const;
+
+type TierKey = (typeof STORAGE_TIERS)[number]["key"];
+
+function formatBytes(bytes: number): string {
+  if (bytes >= 1_073_741_824) return `${(bytes / 1_073_741_824).toFixed(1)} GB`;
+  if (bytes >= 1_048_576) return `${(bytes / 1_048_576).toFixed(1)} MB`;
+  return `${(bytes / 1024).toFixed(0)} KB`;
+}
+
+export function StorageTab({ botId }: { botId: string }) {
+  const [currentTier, setCurrentTier] = useState<TierKey>("standard");
+  const [usage, setUsage] = useState<StorageUsage | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [pendingTier, setPendingTier] = useState<TierKey | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      setLoading(true);
+      try {
+        const [tierResult, usageResult] = await Promise.all([
+          getStorageTier(botId),
+          getStorageUsage(botId),
+        ]);
+        if (!cancelled) {
+          setCurrentTier(tierResult.tier as TierKey);
+          setUsage(usageResult);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [botId]);
+
+  async function handleConfirmUpgrade() {
+    if (!pendingTier) return;
+    setSaving(true);
+    setSaveError(null);
+    try {
+      const result = await setStorageTier(botId, pendingTier);
+      setCurrentTier(result.tier as TierKey);
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } catch {
+      setSaveError("Failed to update storage tier — please try again.");
+    } finally {
+      setSaving(false);
+      setPendingTier(null);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex h-40 items-center justify-center text-muted-foreground">
+        Loading storage info...
+      </div>
+    );
+  }
+
+  const tierInfo = STORAGE_TIERS.find((t) => t.key === currentTier) ?? STORAGE_TIERS[0];
+  const limitBytes = tierInfo.storageLimitGb * 1_073_741_824;
+  const usedBytes = usage?.usedBytes ?? 0;
+  const usagePercent = limitBytes > 0 ? Math.min((usedBytes / limitBytes) * 100, 100) : 0;
+  const usageHigh = usagePercent > 80;
+
+  const pendingTierInfo = pendingTier ? STORAGE_TIERS.find((t) => t.key === pendingTier) : null;
+  const isDowngrade =
+    pendingTier !== null &&
+    STORAGE_TIERS.findIndex((t) => t.key === pendingTier) <
+      STORAGE_TIERS.findIndex((t) => t.key === currentTier);
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      <div>
+        <h2 className="text-xl font-bold">Storage</h2>
+        <p className="text-sm text-muted-foreground">
+          Persistent storage for bot memories, files, and data.
+        </p>
+      </div>
+
+      {/* Usage bar */}
+      <Card className={usageHigh ? "border-amber-500/25" : ""}>
+        <CardContent className="space-y-3 p-4">
+          <div className="flex items-center justify-between text-sm">
+            <span className="font-medium">
+              {usage ? formatBytes(usedBytes) : "Usage unavailable"} of {tierInfo.storageLimitGb} GB
+              used
+            </span>
+            {usage && (
+              <span className={usageHigh ? "text-amber-500" : "text-muted-foreground"}>
+                {usagePercent.toFixed(0)}%
+              </span>
+            )}
+          </div>
+          <Progress
+            value={usage ? usagePercent : 0}
+            className={`h-2 ${usageHigh ? "[&>div]:bg-amber-500" : ""}`}
+          />
+          {!usage && (
+            <p className="text-xs text-muted-foreground">
+              Disk usage is only available while the bot is running.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {saved && <p className="text-sm text-emerald-500">Storage tier updated!</p>}
+      {saveError && <p className="text-sm text-destructive">{saveError}</p>}
+
+      {/* Tier cards */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+          Storage Tiers
+        </h3>
+        <div className="grid gap-3 sm:grid-cols-2">
+          {STORAGE_TIERS.map((tier) => {
+            const isActive = tier.key === currentTier;
+            return (
+              <Card
+                key={tier.key}
+                className={`cursor-pointer transition-colors ${
+                  isActive
+                    ? "border-primary bg-primary/5"
+                    : "hover:border-primary/50 hover:bg-accent/30"
+                }`}
+                onClick={() => {
+                  if (!isActive) setPendingTier(tier.key);
+                }}
+              >
+                <CardHeader className="pb-2 pt-4">
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-base">{tier.label}</CardTitle>
+                    {isActive && <Badge variant="default">Current</Badge>}
+                  </div>
+                  <CardDescription>{tier.description}</CardDescription>
+                </CardHeader>
+                <CardContent className="pb-4">
+                  <span className="text-sm font-medium">
+                    {tier.dailyCostCents === 0 ? "Included" : `+${tier.dailyCostCents}¢ / day`}
+                  </span>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Storage costs are billed daily from your credit balance. Downgrades take effect
+          immediately but do not delete existing data.
+        </p>
+      </div>
+
+      {/* Confirmation dialog */}
+      <Dialog open={pendingTier !== null} onOpenChange={() => setPendingTier(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {isDowngrade ? "Downgrade" : "Upgrade"} to {pendingTierInfo?.label}?
+            </DialogTitle>
+            <DialogDescription>
+              {isDowngrade ? (
+                <>
+                  Downgrading to <strong>{pendingTierInfo?.label}</strong> (
+                  {pendingTierInfo?.storageLimitGb} GB) takes effect immediately. Existing data is
+                  not deleted, but the bot will be unable to write new data once it exceeds the new
+                  limit.
+                </>
+              ) : (
+                <>
+                  Upgrading to <strong>{pendingTierInfo?.label}</strong> (
+                  {pendingTierInfo?.storageLimitGb} GB) adds{" "}
+                  <strong>{pendingTierInfo?.dailyCostCents}¢ per day</strong> to this bot's credit
+                  cost, billed from your balance.
+                </>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPendingTier(null)}>
+              Cancel
+            </Button>
+            <Button onClick={handleConfirmUpgrade} disabled={saving}>
+              {saving ? "Saving..." : isDowngrade ? "Downgrade" : "Upgrade"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/components/bot-settings/vps-info-panel.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { CheckCircle, Copy, Server, XCircle } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { VpsInfo } from "@/lib/api";
+import { getVpsInfo } from "@/lib/api";
+
+interface VpsPanelProps {
+  botId: string;
+}
+
+export function VpsInfoPanel({ botId }: VpsPanelProps) {
+  const [vps, setVps] = useState<VpsInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    setError(false);
+    setLoading(true);
+    setVps(null);
+    getVpsInfo(botId)
+      .then((data) => setVps(data))
+      .catch(() => setError(true))
+      .finally(() => setLoading(false));
+  }, [botId]);
+
+  if (loading) return null;
+
+  if (!vps) {
+    if (!error) return null;
+    return (
+      <Card className="border-destructive/30">
+        <CardContent className="flex items-center gap-2 py-4">
+          <Server className="size-5 text-destructive" />
+          <p className="text-sm text-destructive">
+            Failed to load VPS info. Please try again later.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  async function handleCopy() {
+    if (!vps?.sshConnectionString) return;
+    try {
+      await navigator.clipboard.writeText(vps.sshConnectionString);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard write may fail in some browser contexts
+    }
+  }
+
+  const statusBadge =
+    vps.status === "active" ? (
+      <Badge variant="terminal" className="gap-1">
+        <CheckCircle className="size-3" /> Active
+      </Badge>
+    ) : vps.status === "canceling" ? (
+      <Badge variant="outline" className="gap-1 text-yellow-500 border-yellow-500/50">
+        Canceling
+      </Badge>
+    ) : (
+      <Badge variant="outline" className="gap-1 text-destructive border-destructive/50">
+        <XCircle className="size-3" /> Canceled
+      </Badge>
+    );
+
+  return (
+    <Card className="border-terminal/30">
+      <CardHeader className="pb-3">
+        <div className="flex items-center gap-2">
+          <Server className="size-5 text-terminal" />
+          <CardTitle className="text-lg">VPS</CardTitle>
+          {statusBadge}
+        </div>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div className="grid grid-cols-2 gap-3 text-sm">
+          <div>
+            <p className="text-muted-foreground">Hostname</p>
+            <p className="font-mono font-medium">{vps.hostname ?? "—"}</p>
+          </div>
+          <div>
+            <p className="text-muted-foreground">Disk</p>
+            <p className="font-medium">{vps.diskSizeGb} GB SSD</p>
+          </div>
+          <div>
+            <p className="text-muted-foreground">Resources</p>
+            <p className="font-medium">2 GB RAM / 2 vCPU</p>
+          </div>
+          <div>
+            <p className="text-muted-foreground">Active since</p>
+            <p className="font-medium">{new Date(vps.createdAt).toLocaleDateString()}</p>
+          </div>
+        </div>
+
+        {vps.sshConnectionString && (
+          <div>
+            <p className="mb-1.5 text-sm text-muted-foreground">SSH connection</p>
+            <div className="flex items-center gap-2 rounded-md border border-border bg-muted/50 px-3 py-2">
+              <code className="flex-1 truncate text-xs font-mono">{vps.sshConnectionString}</code>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7 shrink-0"
+                onClick={handleCopy}
+                title="Copy SSH command"
+              >
+                {copied ? (
+                  <CheckCircle className="size-4 text-terminal" />
+                ) : (
+                  <Copy className="size-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {!vps.sshConnectionString && vps.status === "active" && (
+          <p className="text-sm text-muted-foreground">
+            SSH access is being provisioned. Check back shortly.
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/bot-settings/vps-upgrade-card.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { Server } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { upgradeToVps } from "@/lib/api";
+import { isAllowedRedirectUrl } from "@/lib/validate-redirect-url";
+
+interface VpsUpgradeCardProps {
+  botId: string;
+}
+
+export function VpsUpgradeCard({ botId }: VpsUpgradeCardProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleUpgrade() {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await upgradeToVps(
+        botId,
+        `${window.location.origin}/instances/${botId}?vps=activated`,
+        window.location.href,
+      );
+
+      if (res.status === 409) {
+        setError("This bot is already on the VPS tier.");
+        return;
+      }
+
+      if (res.status === 402) {
+        setError("No payment method on file. Please add one in billing settings.");
+        return;
+      }
+
+      if (!res.ok) {
+        const data = (await res.json()) as { error?: string };
+        setError(data.error ?? "Failed to start upgrade.");
+        return;
+      }
+
+      const data = (await res.json()) as { url: string };
+      if (data.url) {
+        if (!isAllowedRedirectUrl(data.url)) {
+          setError("Unexpected checkout URL. Please contact support.");
+          return;
+        }
+        window.location.href = data.url;
+      }
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Card className="border-terminal/50 bg-terminal/5">
+      <CardHeader className="pb-3">
+        <div className="flex items-center gap-2">
+          <Server className="size-5 text-terminal" />
+          <CardTitle className="text-lg">Upgrade to VPS</CardTitle>
+          <Badge variant="terminal" className="ml-auto text-xs">
+            $15/mo
+          </Badge>
+        </div>
+        <CardDescription>
+          Get a dedicated persistent container with fixed monthly pricing — no per-credit billing
+          for compute.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <ul className="grid grid-cols-1 gap-1 text-sm text-muted-foreground sm:grid-cols-2">
+          <li className="flex items-center gap-2">
+            <span className="text-terminal">✓</span> 2 GB RAM / 2 vCPU
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-terminal">✓</span> 20 GB SSD
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-terminal">✓</span> Persistent container
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-terminal">✓</span> Dedicated hostname
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-terminal">✓</span> SSH access
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-terminal">✓</span> Flat monthly price
+          </li>
+        </ul>
+
+        {error && <p className="text-sm text-destructive">{error}</p>}
+
+        <p className="text-xs text-muted-foreground">
+          Your bot will experience brief downtime during the container upgrade. You will be
+          redirected to Stripe Checkout to complete the subscription.
+        </p>
+
+        <Button onClick={handleUpgrade} disabled={loading} className="w-full sm:w-auto">
+          {loading ? "Redirecting to checkout..." : "Upgrade to VPS — $15/mo"}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}