@wopr-network/platform-ui-core 1.12.0 → 1.13.0

package/package.json

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

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

@@ -81,7 +81,7 @@ const PREF_GROUPS: PrefGroup[] = [
     items: [
       {
         key: "fleet_updates",
-        label: "Fleet Updates",
+        label: "Update availability alerts",
         description: "Get notified when updates are available or applied to your fleet.",
       },
     ],

package/src/app/admin/fleet-updates/error.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { AlertTriangleIcon, HomeIcon, RefreshCwIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { logger } from "@/lib/logger";
+
+const log = logger("error-boundary:fleet-updates");
+
+export default function FleetUpdatesError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const [showDetails, setShowDetails] = useState(false);
+  const isDev = process.env.NODE_ENV === "development";
+
+  useEffect(() => {
+    log.error("Fleet updates error", error);
+  }, [error]);
+
+  return (
+    <div className="flex h-full items-center justify-center p-6">
+      <Card className="w-full max-w-lg">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <AlertTriangleIcon className="size-6 text-destructive" />
+            <CardTitle className="text-xl">Fleet Updates Error</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground">
+            Something went wrong loading the fleet updates panel. This may be a temporary issue.
+          </p>
+          {isDev && (
+            <Button
+              type="button"
+              variant="link"
+              size="sm"
+              onClick={() => setShowDetails((v) => !v)}
+              className="h-auto p-0 text-muted-foreground"
+            >
+              {showDetails ? "Hide" : "Show"} error details
+            </Button>
+          )}
+          {isDev && showDetails && (
+            <pre className="max-h-48 overflow-auto rounded-md border bg-muted p-3 text-xs">
+              {error.message}
+              {error.stack && `\n\n${error.stack}`}
+              {error.digest && `\n\nDigest: ${error.digest}`}
+            </pre>
+          )}
+        </CardContent>
+        <CardFooter className="gap-3">
+          <Button onClick={reset}>
+            <RefreshCwIcon />
+            Try Again
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="/admin">
+              <HomeIcon />
+              Admin Home
+            </a>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/src/app/admin/fleet-updates/fleet-updates-client.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import { Loader2, RefreshCw, Rocket } from "lucide-react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { trpc } from "@/lib/trpc";
+
+/* ------------------------------------------------------------------ */
+/*  Types (cast from AnyTRPCQueryProcedure stubs)                      */
+/* ------------------------------------------------------------------ */
+
+interface RolloutStatus {
+  isRolling: boolean;
+  startedAt?: string;
+  progress?: number;
+}
+
+interface TenantConfig {
+  tenantId: string;
+  mode: "auto" | "manual";
+  preferredHourUtc: number;
+  updatedAt: string;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Rollout Status Card                                                */
+/* ------------------------------------------------------------------ */
+
+function RolloutStatusCard() {
+  const utils = trpc.useUtils();
+
+  const statusQuery = trpc.adminFleetUpdate.rolloutStatus.useQuery(undefined, {
+    refetchInterval: 10_000,
+  });
+
+  const forceRolloutMutation = trpc.adminFleetUpdate.forceRollout.useMutation({
+    onSuccess: () => {
+      toast.success("Force rollout initiated.");
+      utils.adminFleetUpdate.rolloutStatus.invalidate();
+    },
+    onError: (err) => {
+      toast.error(`Force rollout failed: ${err.message}`);
+    },
+  });
+
+  // NOTE: Cast needed because trpc-types.ts uses AnyTRPCQueryProcedure stubs
+  // that erase return types. Remove when @wopr-network/sdk is published.
+  const status = statusQuery.data as RolloutStatus | undefined;
+  const isRolling = status?.isRolling ?? false;
+
+  return (
+    <Card className="border-border">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-base font-mono">Rollout Status</CardTitle>
+            <CardDescription className="text-xs">
+              Current fleet update rollout state. Auto-refreshes every 10s.
+            </CardDescription>
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => statusQuery.refetch()}
+            disabled={statusQuery.isFetching}
+            className="font-mono text-xs"
+          >
+            <RefreshCw size={12} className={statusQuery.isFetching ? "animate-spin" : ""} />
+            Refresh
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {statusQuery.isLoading ? (
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-6 w-20" />
+            <Skeleton className="h-8 w-32" />
+          </div>
+        ) : statusQuery.isError ? (
+          <p className="text-sm text-destructive font-mono">Failed to load rollout status.</p>
+        ) : (
+          <div className="flex items-center gap-4">
+            <Badge
+              variant="outline"
+              className={
+                isRolling
+                  ? "border-amber-500/30 bg-amber-500/10 text-amber-400"
+                  : "border-terminal/30 bg-terminal/10 text-terminal"
+              }
+            >
+              {isRolling ? "Rolling" : "Idle"}
+            </Badge>
+            {isRolling && status?.progress != null && (
+              <span className="text-xs text-muted-foreground font-mono tabular-nums">
+                {Math.round(status.progress * 100)}% complete
+              </span>
+            )}
+            <Button
+              type="button"
+              size="sm"
+              onClick={() => forceRolloutMutation.mutate(undefined)}
+              disabled={forceRolloutMutation.isPending || isRolling}
+              className="font-mono text-xs ml-auto"
+            >
+              {forceRolloutMutation.isPending ? (
+                <Loader2 size={12} className="animate-spin" />
+              ) : (
+                <Rocket size={12} />
+              )}
+              Force Rollout
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tenant Config Row                                                  */
+/* ------------------------------------------------------------------ */
+
+function TenantConfigRow({
+  config,
+  onModeChanged,
+}: {
+  config: TenantConfig;
+  onModeChanged: () => void;
+}) {
+  const setConfigMutation = trpc.adminFleetUpdate.setTenantConfig.useMutation({
+    onSuccess: () => {
+      toast.success(`Tenant ${config.tenantId} config updated.`);
+      onModeChanged();
+    },
+    onError: (err) => {
+      toast.error(`Failed to update config: ${err.message}`);
+    },
+  });
+
+  function handleModeChange(newMode: string) {
+    setConfigMutation.mutate({
+      tenantId: config.tenantId,
+      mode: newMode as "auto" | "manual",
+    });
+  }
+
+  return (
+    <TableRow>
+      <TableCell>
+        <code className="text-xs text-muted-foreground">{config.tenantId}</code>
+      </TableCell>
+      <TableCell>
+        <Select
+          value={config.mode}
+          onValueChange={handleModeChange}
+          disabled={setConfigMutation.isPending}
+        >
+          <SelectTrigger className="h-7 w-28 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="auto" className="text-xs">
+              auto
+            </SelectItem>
+            <SelectItem value="manual" className="text-xs">
+              manual
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </TableCell>
+      <TableCell>
+        <span className="text-sm text-muted-foreground font-mono tabular-nums">
+          {String(config.preferredHourUtc).padStart(2, "0")}:00 UTC
+        </span>
+      </TableCell>
+      <TableCell>
+        <span className="text-xs text-muted-foreground">
+          {new Date(config.updatedAt).toLocaleDateString()}
+        </span>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Main Component                                                     */
+/* ------------------------------------------------------------------ */
+
+export function FleetUpdatesClient() {
+  const utils = trpc.useUtils();
+
+  const configsQuery = trpc.adminFleetUpdate.listTenantConfigs.useQuery(undefined, {
+    refetchOnWindowFocus: false,
+  });
+
+  // NOTE: Cast needed because trpc-types.ts uses AnyTRPCQueryProcedure stubs
+  // that erase return types. Remove when @wopr-network/sdk is published.
+  const configs = (configsQuery.data ?? []) as TenantConfig[];
+
+  function handleConfigChanged() {
+    utils.adminFleetUpdate.listTenantConfigs.invalidate();
+  }
+
+  return (
+    <div className="space-y-4 max-w-5xl mx-auto">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 pt-6 pb-2">
+        <h1 className="text-lg font-bold text-terminal">
+          <span className="text-muted-foreground">&gt;</span> Fleet Updates
+        </h1>
+      </div>
+
+      {/* Rollout Status */}
+      <div className="px-6">
+        <RolloutStatusCard />
+      </div>
+
+      {/* Tenant Configs Table */}
+      <div className="mx-6 bg-card border border-border rounded-sm">
+        <div className="px-4 py-3 border-b border-border flex items-center justify-between">
+          <div className="text-xs uppercase tracking-widest text-muted-foreground">
+            Tenant Update Configs
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => configsQuery.refetch()}
+            disabled={configsQuery.isFetching}
+            className="font-mono text-xs"
+          >
+            <RefreshCw size={12} className={configsQuery.isFetching ? "animate-spin" : ""} />
+            Refresh
+          </Button>
+        </div>
+
+        {configsQuery.isLoading ? (
+          <div className="space-y-2 p-4">
+            {Array.from({ length: 5 }, (_, i) => `sk-cfg-${i}`).map((k) => (
+              <Skeleton key={k} className="h-12 rounded-md" />
+            ))}
+          </div>
+        ) : configsQuery.isError ? (
+          <div className="flex h-40 flex-col items-center justify-center gap-3">
+            <p className="text-sm text-destructive font-mono">Failed to load tenant configs.</p>
+            <Button variant="outline" size="sm" onClick={() => configsQuery.refetch()}>
+              Retry
+            </Button>
+          </div>
+        ) : (
+          <div className="rounded-md overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-muted/40">
+                  <TableHead className="text-xs uppercase tracking-wider">Tenant ID</TableHead>
+                  <TableHead className="text-xs uppercase tracking-wider">Mode</TableHead>
+                  <TableHead className="text-xs uppercase tracking-wider">
+                    Preferred Hour (UTC)
+                  </TableHead>
+                  <TableHead className="text-xs uppercase tracking-wider">Last Updated</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {configs.length === 0 ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={4}
+                      className="text-center text-muted-foreground py-8 text-sm font-mono"
+                    >
+                      &gt; No tenant configs found.
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  configs.map((cfg) => (
+                    <TenantConfigRow
+                      key={cfg.tenantId}
+                      config={cfg}
+                      onModeChanged={handleConfigChanged}
+                    />
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/app/admin/fleet-updates/loading.tsx

@@ -0,0 +1,41 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function FleetUpdatesLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+      {/* Rollout status card skeleton */}
+      <div className="rounded-md border p-4 space-y-3">
+        <Skeleton className="h-5 w-32" />
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-6 w-16" />
+          <Skeleton className="h-8 w-28" />
+        </div>
+      </div>
+      {/* Table skeleton */}
+      <div className="rounded-md border">
+        <div className="border-b px-4 py-3">
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-4 w-28" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+        </div>
+        <div className="space-y-0">
+          {Array.from({ length: 6 }, (_, n) => `sk-${n}`).map((skId) => (
+            <div key={skId} className="flex items-center gap-4 border-b px-4 py-3 last:border-b-0">
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-4 w-28" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/admin/fleet-updates/page.tsx

@@ -0,0 +1,5 @@
+import { FleetUpdatesClient } from "./fleet-updates-client";
+
+export default function AdminFleetUpdatesPage() {
+  return <FleetUpdatesClient />;
+}

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

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