@wopr-network/platform-ui-core 1.26.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wopr-network/platform-ui-core",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "Brand-agnostic AI agent platform UI — deploy as any brand via env vars",
   "repository": {
     "type": "git",

package/src/__tests__/billing.test.tsx

@@ -408,8 +408,8 @@ describe("Payment page", () => {
     const amountCells = await screen.findAllByText("$29.00");
     // inv-001 has no downloadUrl and no hostedUrl — the row should render no <a> element at all
     // The 3rd amount cell belongs to inv-001 (oldest invoice, no URLs)
-    const inv001Row = amountCells[2].closest("tr")!;
-    expect(within(inv001Row).queryByRole("link")).toBeNull();
+    const inv001Row = amountCells[2].closest("tr");
+    expect(inv001Row ? within(inv001Row).queryByRole("link") : null).toBeNull();
   });
 
   it("renders BYOK messaging", async () => {

package/src/app/(dashboard)/onboarding/page.tsx

@@ -32,7 +32,6 @@ export default function OnboardingPage() {
   const [botName, setBotName] = useState("");
   const [selectedPreset, setSelectedPreset] = useState<string | null>(null);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: router.push is stable; using [router] causes infinite re-renders
   useEffect(() => {
     if (isOnboardingComplete()) {
       router.push(homePath());

package/src/app/(dashboard)/settings/profile/page.tsx

@@ -253,6 +253,7 @@ export default function ProfilePage() {
               disabled={uploading}
             >
               {profile.avatarUrl ? (
+                // biome-ignore lint/performance/noImgElement: external avatar URL — domain not configured for next/image
                 <img
                   src={profile.avatarUrl}
                   alt={profile.name}

package/src/app/admin/pool-config/page.tsx

@@ -0,0 +1,5 @@
+import { PoolConfigDashboard } from "@/components/admin/pool-config-dashboard";
+
+export default function PoolConfigPage() {
+  return <PoolConfigDashboard />;
+}

package/src/components/admin/admin-nav.tsx

@@ -23,6 +23,7 @@ const adminNavItems = [
   { label: "Migrations", href: "/admin/migrations" },
   { label: "GPU", href: "/admin/gpu" },
   { label: "Fleet Updates", href: "/admin/fleet-updates" },
+  { label: "Pool", href: "/admin/pool-config" },
   { label: "Incidents", href: "/admin/incidents" },
 ];
 

package/src/components/admin/pool-config-dashboard.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { getPoolConfig, type PoolConfig, setPoolSize } from "@/lib/admin-pool-api";
+
+export function PoolConfigDashboard() {
+  const [config, setConfig] = useState<PoolConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [sizeInput, setSizeInput] = useState("");
+
+  const load = useCallback(async () => {
+    try {
+      const data = await getPoolConfig();
+      setConfig(data);
+      setSizeInput(String(data.poolSize));
+    } catch {
+      toast.error("Failed to load pool config");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleSave = async () => {
+    const size = Number.parseInt(sizeInput, 10);
+    if (Number.isNaN(size) || size < 0 || size > 50) {
+      toast.error("Pool size must be between 0 and 50");
+      return;
+    }
+    setSaving(true);
+    try {
+      const result = await setPoolSize(size);
+      setConfig((prev) => (prev ? { ...prev, poolSize: result.poolSize } : prev));
+      toast.success(`Pool size updated to ${result.poolSize}`);
+    } catch {
+      toast.error("Failed to update pool size");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-6 p-6">
+        <div className="h-8 w-48 animate-pulse rounded bg-muted" />
+        <div className="grid grid-cols-3 gap-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-24 animate-pulse rounded-lg bg-muted" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!config) {
+    return <div className="p-6 text-muted-foreground">Failed to load pool configuration.</div>;
+  }
+
+  if (!config.enabled) {
+    return (
+      <div className="p-6">
+        <h2 className="text-lg font-semibold mb-2">Hot Pool</h2>
+        <p className="text-muted-foreground">
+          Hot pool is not enabled for this product. Enable the{" "}
+          <code className="text-xs bg-muted px-1 py-0.5 rounded">hotPool</code> feature flag in the
+          boot config to use pre-provisioned instances.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      <div>
+        <h2 className="text-lg font-semibold">Hot Pool</h2>
+        <p className="text-sm text-muted-foreground">
+          Pre-provisioned warm containers for instant instance creation.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div className="rounded-lg border border-border bg-card p-4">
+          <div className="text-sm text-muted-foreground">Target Size</div>
+          <div className="mt-1 text-2xl font-bold text-terminal">{config.poolSize}</div>
+        </div>
+
+        <div className="rounded-lg border border-border bg-card p-4">
+          <div className="text-sm text-muted-foreground">Warm Containers</div>
+          <div className="mt-1 text-2xl font-bold text-green-400">{config.warmCount}</div>
+        </div>
+
+        <div className="rounded-lg border border-border bg-card p-4">
+          <div className="text-sm text-muted-foreground">Status</div>
+          <div className="mt-1 text-2xl font-bold">
+            {config.warmCount >= config.poolSize ? (
+              <span className="text-green-400">Full</span>
+            ) : config.warmCount > 0 ? (
+              <span className="text-amber-400">Filling</span>
+            ) : (
+              <span className="text-red-400">Empty</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-lg border border-border bg-card p-4">
+        <div className="text-sm font-medium mb-3">Adjust Pool Size</div>
+        <div className="flex items-center gap-3">
+          <Input
+            type="number"
+            min={0}
+            max={50}
+            value={sizeInput}
+            onChange={(e) => setSizeInput(e.target.value)}
+            className="w-24"
+          />
+          <Button
+            onClick={handleSave}
+            disabled={saving || sizeInput === String(config.poolSize)}
+            size="sm"
+          >
+            {saving ? "Saving..." : "Update"}
+          </Button>
+          <span className="text-xs text-muted-foreground">
+            The pool manager will replenish to this target within 60 seconds.
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/billing/confirmation-tracker.tsx

@@ -3,102 +3,90 @@
 import { Check } from "lucide-react";
 
 interface ConfirmationTrackerProps {
-	confirmations: number;
-	confirmationsRequired: number;
-	displayAmount: string;
-	credited: boolean;
-	txHash?: string;
+  confirmations: number;
+  confirmationsRequired: number;
+  displayAmount: string;
+  credited: boolean;
+  txHash?: string;
 }
 
 export function ConfirmationTracker({
-	confirmations,
-	confirmationsRequired,
-	displayAmount,
-	credited,
-	txHash,
+  confirmations,
+  confirmationsRequired,
+  displayAmount,
+  credited,
+  txHash,
 }: ConfirmationTrackerProps) {
-	const pct =
-		confirmationsRequired > 0
-			? Math.min(100, Math.round((confirmations / confirmationsRequired) * 100))
-			: 0;
-	const detected = confirmations > 0 || credited;
+  const pct =
+    confirmationsRequired > 0
+      ? Math.min(100, Math.round((confirmations / confirmationsRequired) * 100))
+      : 0;
+  const detected = confirmations > 0 || credited;
 
-	return (
-		<div className="space-y-4 text-center">
-			<p className="text-sm text-muted-foreground">
-				{credited ? "Payment complete!" : "Payment received!"}
-			</p>
-			<p className="text-xl font-semibold">{displayAmount}</p>
+  return (
+    <div className="space-y-4 text-center">
+      <p className="text-sm text-muted-foreground">
+        {credited ? "Payment complete!" : "Payment received!"}
+      </p>
+      <p className="text-xl font-semibold">{displayAmount}</p>
 
-			<div className="rounded-lg border border-border p-3 space-y-2">
-				<div className="flex justify-between text-xs">
-					<span className="text-muted-foreground">Confirmations</span>
-					<span>
-						{confirmations} / {confirmationsRequired}
-					</span>
-				</div>
-				<div
-					className="h-1.5 rounded-full bg-muted overflow-hidden"
-					role="progressbar"
-					aria-valuenow={pct}
-					aria-valuemin={0}
-					aria-valuemax={100}
-				>
-					<div
-						className="h-full rounded-full bg-primary transition-all duration-500"
-						style={{ width: `${pct}%` }}
-					/>
-				</div>
-			</div>
+      <div className="rounded-lg border border-border p-3 space-y-2">
+        <div className="flex justify-between text-xs">
+          <span className="text-muted-foreground">Confirmations</span>
+          <span>
+            {confirmations} / {confirmationsRequired}
+          </span>
+        </div>
+        <div
+          className="h-1.5 rounded-full bg-muted overflow-hidden"
+          role="progressbar"
+          aria-valuenow={pct}
+          aria-valuemin={0}
+          aria-valuemax={100}
+        >
+          <div
+            className="h-full rounded-full bg-primary transition-all duration-500"
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+      </div>
 
-			<div className="space-y-2 text-left">
-				<div className="flex items-center gap-2">
-					<div
-						className={`flex h-4 w-4 items-center justify-center rounded-full text-[10px] ${detected ? "bg-green-500 text-white" : "bg-muted"}`}
-					>
-						{detected && <Check className="h-2.5 w-2.5" />}
-					</div>
-					<span
-						className={`text-xs ${detected ? "text-muted-foreground" : "text-muted-foreground/50"}`}
-					>
-						Payment detected
-					</span>
-				</div>
-				<div className="flex items-center gap-2">
-					<div
-						className={`flex h-4 w-4 items-center justify-center rounded-full text-[10px] ${credited ? "bg-green-500 text-white" : detected ? "bg-primary text-white animate-pulse" : "bg-muted"}`}
-					>
-						{credited ? (
-							<Check className="h-2.5 w-2.5" />
-						) : detected ? (
-							<span>&middot;</span>
-						) : null}
-					</div>
-					<span
-						className={`text-xs ${detected ? "text-foreground" : "text-muted-foreground/50"}`}
-					>
-						{credited ? "Confirmed" : "Confirming on chain"}
-					</span>
-				</div>
-				<div className="flex items-center gap-2">
-					<div
-						className={`flex h-4 w-4 items-center justify-center rounded-full text-[10px] ${credited ? "bg-green-500 text-white" : "bg-muted"}`}
-					>
-						{credited && <Check className="h-2.5 w-2.5" />}
-					</div>
-					<span
-						className={`text-xs ${credited ? "text-foreground" : "text-muted-foreground/50"}`}
-					>
-						Credits applied
-					</span>
-				</div>
-			</div>
+      <div className="space-y-2 text-left">
+        <div className="flex items-center gap-2">
+          <div
+            className={`flex h-4 w-4 items-center justify-center rounded-full text-[10px] ${detected ? "bg-green-500 text-white" : "bg-muted"}`}
+          >
+            {detected && <Check className="h-2.5 w-2.5" />}
+          </div>
+          <span
+            className={`text-xs ${detected ? "text-muted-foreground" : "text-muted-foreground/50"}`}
+          >
+            Payment detected
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div
+            className={`flex h-4 w-4 items-center justify-center rounded-full text-[10px] ${credited ? "bg-green-500 text-white" : detected ? "bg-primary text-white animate-pulse" : "bg-muted"}`}
+          >
+            {credited ? <Check className="h-2.5 w-2.5" /> : detected ? <span>&middot;</span> : null}
+          </div>
+          <span className={`text-xs ${detected ? "text-foreground" : "text-muted-foreground/50"}`}>
+            {credited ? "Confirmed" : "Confirming on chain"}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div
+            className={`flex h-4 w-4 items-center justify-center rounded-full text-[10px] ${credited ? "bg-green-500 text-white" : "bg-muted"}`}
+          >
+            {credited && <Check className="h-2.5 w-2.5" />}
+          </div>
+          <span className={`text-xs ${credited ? "text-foreground" : "text-muted-foreground/50"}`}>
+            Credits applied
+          </span>
+        </div>
+      </div>
 
-			{txHash && (
-				<p className="text-xs text-muted-foreground font-mono truncate">
-					tx: {txHash}
-				</p>
-			)}
-		</div>
-	);
+      {txHash && <p className="text-xs text-muted-foreground font-mono truncate">tx: {txHash}</p>}
+    </div>
+  );
 }

package/src/components/billing/crypto-checkout.tsx

@@ -32,7 +32,9 @@ export function CryptoCheckout() {
   useEffect(() => {
     getSupportedPaymentMethods()
       .then(setMethods)
-      .catch(() => {});
+      .catch(() => {
+        // silently fall back to empty methods list
+      });
   }, []);
 
   useEffect(() => {

package/src/components/billing/deposit-view.tsx

@@ -45,8 +45,16 @@ export function DepositView({ checkout, status, onBack }: DepositViewProps) {
       <p className="text-xs text-muted-foreground">
         on {checkout.chain} &middot; ${checkout.amountUsd.toFixed(2)} USD
       </p>
-      <div className="mx-auto w-fit rounded-lg border border-border bg-background p-3" aria-hidden="true">
-        <QRCodeSVG value={checkout.depositAddress} size={140} bgColor="hsl(var(--background))" fgColor="hsl(var(--foreground))" />
+      <div
+        className="mx-auto w-fit rounded-lg border border-border bg-background p-3"
+        aria-hidden="true"
+      >
+        <QRCodeSVG
+          value={checkout.depositAddress}
+          size={140}
+          bgColor="hsl(var(--background))"
+          fgColor="hsl(var(--foreground))"
+        />
       </div>
       <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/50 px-3 py-2">
         <code className="flex-1 truncate text-xs font-mono">{checkout.depositAddress}</code>

package/src/components/billing/payment-method-picker.tsx

@@ -24,11 +24,7 @@ interface PaymentMethodPickerProps {
   onBack?: () => void;
 }
 
-export function PaymentMethodPicker({
-  methods,
-  onSelect,
-  onBack,
-}: PaymentMethodPickerProps) {
+export function PaymentMethodPicker({ methods, onSelect, onBack }: PaymentMethodPickerProps) {
   const [search, setSearch] = useState("");
   const [filter, setFilter] = useState<Filter>("popular");
 

package/src/lib/admin-pool-api.ts

@@ -0,0 +1,15 @@
+import { trpcVanilla } from "./trpc";
+
+export interface PoolConfig {
+  enabled: boolean;
+  poolSize: number;
+  warmCount: number;
+}
+
+export async function getPoolConfig(): Promise<PoolConfig> {
+  return trpcVanilla.admin.getPoolConfig.query({});
+}
+
+export async function setPoolSize(size: number): Promise<{ poolSize: number }> {
+  return trpcVanilla.admin.setPoolSize.mutate({ size });
+}

package/src/lib/trpc-types.ts

@@ -80,6 +80,8 @@ type AppRouterRecord = {
     listAllOrgs: AnyTRPCQueryProcedure;
     billingOverview: AnyTRPCQueryProcedure;
     listAvailableModels: AnyTRPCQueryProcedure;
+    getPoolConfig: AnyTRPCQueryProcedure;
+    setPoolSize: AnyTRPCMutationProcedure;
   };
   promotions: {
     list: AnyTRPCQueryProcedure;