@wopr-network/platform-ui-core 1.27.8 → 1.27.9

package/src/app/instances/instance-list-client.tsx

@@ -33,22 +33,9 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { useImageStatus } from "@/hooks/use-image-status";
 import type { BotStatusResponse, Instance, InstanceStatus } from "@/lib/api";
 import {
@@ -165,10 +152,7 @@ export function InstanceListClient() {
           onChange={(e) => setSearch(e.target.value)}
           className="max-w-sm"
         />
-        <Select
-          value={statusFilter}
-          onValueChange={(v) => setStatusFilter(v as InstanceStatus | "all")}
-        >
+        <Select value={statusFilter} onValueChange={(v) => setStatusFilter(v as InstanceStatus | "all")}>
           <SelectTrigger className="w-[160px]">
             <SelectValue placeholder="All statuses" />
           </SelectTrigger>
@@ -268,17 +252,12 @@ export function InstanceListClient() {
               {filtered.map((inst) => (
                 <TableRow
                   key={inst.id}
-                  className={cn(
-                    "border-l-2 border-transparent transition-colors",
-                    "hover:bg-muted/50",
-                    {
-                      "border-l-emerald-500/30 hover:border-l-emerald-500":
-                        inst.status === "running",
-                      "hover:border-l-zinc-500": inst.status === "stopped",
-                      "hover:border-l-yellow-500": inst.status === "degraded",
-                      "hover:border-l-red-500": inst.status === "error",
-                    },
-                  )}
+                  className={cn("border-l-2 border-transparent transition-colors", "hover:bg-muted/50", {
+                    "border-l-emerald-500/30 hover:border-l-emerald-500": inst.status === "running",
+                    "hover:border-l-zinc-500": inst.status === "stopped",
+                    "hover:border-l-yellow-500": inst.status === "degraded",
+                    "hover:border-l-red-500": inst.status === "error",
+                  })}
                 >
                   <TableCell>
                     <Link href={`/instances/${inst.id}`} className="font-medium hover:underline">
@@ -288,17 +267,11 @@ export function InstanceListClient() {
                   <TableCell>
                     <div className="flex items-center gap-2">
                       <StatusBadge status={inst.status} />
-                      <InstanceUpdateBadge
-                        instanceId={inst.id}
-                        instanceName={inst.name}
-                        onUpdated={refetch}
-                      />
+                      <InstanceUpdateBadge instanceId={inst.id} instanceName={inst.name} onUpdated={refetch} />
                     </div>
                   </TableCell>
                   <TableCell className="text-muted-foreground">{inst.provider}</TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {formatUptime(inst.uptime)}
-                  </TableCell>
+                  <TableCell className="text-muted-foreground">{formatUptime(inst.uptime)}</TableCell>
                   <TableCell className="text-muted-foreground">{inst.plugins.length}</TableCell>
                   <TableCell>
                     <InstanceRowActions
@@ -333,9 +306,8 @@ export function InstanceListClient() {
           <DialogHeader>
             <DialogTitle>Destroy {destroyTarget?.name} permanently?</DialogTitle>
             <DialogDescription>
-              This action is permanent and cannot be undone. The instance and all its data will be
-              destroyed. Type <strong className="text-foreground">{destroyTarget?.name}</strong> to
-              confirm.
+              This action is permanent and cannot be undone. The instance and all its data will be destroyed. Type{" "}
+              <strong className="text-foreground">{destroyTarget?.name}</strong> to confirm.
             </DialogDescription>
           </DialogHeader>
 
@@ -399,8 +371,7 @@ export function InstanceListClient() {
           <DialogHeader>
             <DialogTitle>Rename instance</DialogTitle>
             <DialogDescription>
-              Enter a new name for <strong className="text-foreground">{renameTarget?.name}</strong>
-              .
+              Enter a new name for <strong className="text-foreground">{renameTarget?.name}</strong>.
             </DialogDescription>
           </DialogHeader>
           <Input
@@ -409,12 +380,7 @@ export function InstanceListClient() {
             value={renameValue}
             onChange={(e) => setRenameValue(e.target.value)}
             onKeyDown={(e) => {
-              if (
-                e.key === "Enter" &&
-                renameValue.trim() &&
-                renameValue.trim() !== renameTarget?.name
-              )
-                handleRename();
+              if (e.key === "Enter" && renameValue.trim() && renameValue.trim() !== renameTarget?.name) handleRename();
             }}
             disabled={renameLoading}
           />
@@ -431,9 +397,7 @@ export function InstanceListClient() {
               Cancel
             </Button>
             <Button
-              disabled={
-                renameLoading || !renameValue.trim() || renameValue.trim() === renameTarget?.name
-              }
+              disabled={renameLoading || !renameValue.trim() || renameValue.trim() === renameTarget?.name}
               onClick={handleRename}
               aria-label="Save"
             >
@@ -494,16 +458,8 @@ export function InstanceRowActions({
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           {updateAvailable && (
-            <DropdownMenuItem
-              className="text-amber-500"
-              onClick={() => setConfirmPull(true)}
-              disabled={pulling}
-            >
-              {pulling ? (
-                <Loader2 className="mr-2 size-4 animate-spin" />
-              ) : (
-                <ArrowDownToLine className="mr-2 size-4" />
-              )}
+            <DropdownMenuItem className="text-amber-500" onClick={() => setConfirmPull(true)} disabled={pulling}>
+              {pulling ? <Loader2 className="mr-2 size-4 animate-spin" /> : <ArrowDownToLine className="mr-2 size-4" />}
               {pulling ? "Pulling..." : "Pull Update"}
             </DropdownMenuItem>
           )}
@@ -513,9 +469,7 @@ export function InstanceRowActions({
           {(inst.status === "running" || inst.status === "degraded") && (
             <>
               <DropdownMenuItem onClick={() => onAction(inst.id, "stop")}>Stop</DropdownMenuItem>
-              <DropdownMenuItem onClick={() => onAction(inst.id, "restart")}>
-                Restart
-              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onAction(inst.id, "restart")}>Restart</DropdownMenuItem>
             </>
           )}
           <DropdownMenuSeparator />
@@ -559,10 +513,7 @@ function InstanceUpdateBadge({
   onUpdated?: () => void;
 }) {
   const { updateAvailable } = useImageStatus(instanceId);
-  const { data: changelog } = trpc.fleet.getChangelog.useQuery(
-    { instanceId },
-    { enabled: updateAvailable },
-  );
+  const { data: changelog } = trpc.fleet.getChangelog.useQuery({ instanceId }, { enabled: updateAvailable });
 
   if (!updateAvailable) return null;
 

package/src/app/instances/layout.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { useRequireAuth } from "@/lib/require-auth";
+
+export default function InstancesLayout({ children }: { children: React.ReactNode }) {
+  const { isPending, isAuthed } = useRequireAuth();
+  if (isPending || !isAuthed) return null;
+  return <>{children}</>;
+}

package/src/app/instances/new/create-instance-client.tsx

@@ -9,13 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { usePluginRegistry } from "@/hooks/use-plugin-registry";
 import { createInstance } from "@/lib/api";
@@ -78,9 +72,7 @@ export function CreateInstanceClient() {
   }
 
   function toggleChannel(ch: string) {
-    setSelectedChannels((prev) =>
-      prev.includes(ch) ? prev.filter((c) => c !== ch) : [...prev, ch],
-    );
+    setSelectedChannels((prev) => (prev.includes(ch) ? prev.filter((c) => c !== ch) : [...prev, ch]));
   }
 
   function togglePlugin(p: string) {
@@ -144,14 +136,10 @@ export function CreateInstanceClient() {
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.2 }}
         >
-          Your instance <span className="font-medium text-terminal">&ldquo;{name}&rdquo;</span> has
-          been created successfully.
+          Your instance <span className="font-medium text-terminal">&ldquo;{name}&rdquo;</span> has been created
+          successfully.
         </motion.p>
-        <motion.div
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.3 }}
-        >
+        <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3 }}>
           <Button variant="terminal" asChild>
             <Link href="/instances">Back to Instances</Link>
           </Button>
@@ -179,9 +167,7 @@ export function CreateInstanceClient() {
     >
       <div>
         <h1 className="text-2xl font-bold tracking-tight">Create Instance</h1>
-        <p className="text-sm text-muted-foreground">
-          Launch a new {productName()} bot. Pick a preset or go custom.
-        </p>
+        <p className="text-sm text-muted-foreground">Launch a new {productName()} bot. Pick a preset or go custom.</p>
       </div>
 
       {/* Instance Name (required, above presets) */}
@@ -211,9 +197,7 @@ export function CreateInstanceClient() {
       {/* Preset (optional) */}
       <div className="space-y-3">
         <div>
-          <div className="font-mono text-xs uppercase tracking-[0.3em] text-terminal/60">
-            QUICK START
-          </div>
+          <div className="font-mono text-xs uppercase tracking-[0.3em] text-terminal/60">QUICK START</div>
           <h2 className="text-sm font-medium text-muted-foreground">
             Select a preset to auto-fill, or skip to configure manually
           </h2>
@@ -230,8 +214,7 @@ export function CreateInstanceClient() {
                 className={cn(
                   "relative cursor-pointer transition-all hover:border-terminal/40 hover:shadow-[0_0_8px_rgba(0,255,65,0.15)]",
                   "border-l-2",
-                  selectedPreset === preset.id &&
-                    "border-terminal bg-terminal/5 shadow-[0_0_12px_rgba(0,255,65,0.2)]",
+                  selectedPreset === preset.id && "border-terminal bg-terminal/5 shadow-[0_0_12px_rgba(0,255,65,0.2)]",
                 )}
                 style={{
                   borderLeftColor: PRESET_ACCENT_COLORS[preset.id] ?? "transparent",
@@ -288,12 +271,8 @@ export function CreateInstanceClient() {
       {/* Configuration */}
       <div className="space-y-4">
         <div>
-          <div className="font-mono text-xs uppercase tracking-[0.3em] text-terminal/60">
-            CONFIGURATION
-          </div>
-          <h2 className="text-sm font-medium text-muted-foreground">
-            Fine-tune your instance settings
-          </h2>
+          <div className="font-mono text-xs uppercase tracking-[0.3em] text-terminal/60">CONFIGURATION</div>
+          <h2 className="text-sm font-medium text-muted-foreground">Fine-tune your instance settings</h2>
         </div>
 
         <div className="space-y-2">

package/src/app/layout.tsx

@@ -30,9 +30,7 @@ export const metadata: Metadata = {
     title: `${brand.productName} — AI Agent Platform`,
     description: `${brand.tagline} ${brand.price ? `${brand.price}.` : ""} ${brand.domain}`,
     url: SITE_URL,
-    images: [
-      { url: "/og", width: 1200, height: 630, alt: `${brand.productName} — AI Agent Platform` },
-    ],
+    images: [{ url: "/og", width: 1200, height: 630, alt: `${brand.productName} — AI Agent Platform` }],
   },
   twitter: {
     card: "summary_large_image",
@@ -66,13 +64,7 @@ export default async function RootLayout({
       <head>{nonce && <meta property="csp-nonce" content={nonce} />}</head>
       <body className={`${jetbrainsMono.variable} antialiased`}>
         <MotionConfig nonce={nonce}>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="dark"
-            enableSystem
-            disableTransitionOnChange
-            nonce={nonce}
-          >
+          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange nonce={nonce}>
             <TRPCProvider initialTenantId={initialTenantId}>
               {children}
               <Toaster

package/src/app/not-found.tsx

@@ -12,9 +12,7 @@ export default function NotFound() {
           <div className="flex items-center gap-3">
             <SearchXIcon aria-hidden="true" className="size-6 text-muted-foreground" />
             <div>
-              <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
-                {brandName()}
-              </p>
+              <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">{brandName()}</p>
               <CardTitle className="text-xl">404</CardTitle>
             </div>
           </div>

package/src/app/page.tsx

@@ -5,8 +5,7 @@ import { getBrandConfig } from "@/lib/brand-config";
 
 const brand = getBrandConfig();
 
-const desc =
-  brand.tagline || `A ${brand.price || "$5/month"} supercomputer that runs your business.`;
+const desc = brand.tagline || `A ${brand.price || "$5/month"} supercomputer that runs your business.`;
 
 export const metadata: Metadata = {
   title: `${brand.productName} — ${brand.tagline}`,

package/src/app/plugins/error.tsx

@@ -8,13 +8,7 @@ import { logger } from "@/lib/logger";
 
 const log = logger("error-boundary:plugins");
 
-export default function PluginsError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
+export default function PluginsError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   const [showDetails, setShowDetails] = useState(false);
   const isDev = process.env.NODE_ENV === "development";
 
@@ -32,9 +26,7 @@ export default function PluginsError({
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
-          <p className="text-muted-foreground">
-            Something went wrong loading plugins. This may be a temporary issue.
-          </p>
+          <p className="text-muted-foreground">Something went wrong loading plugins. This may be a temporary issue.</p>
           {isDev && (
             <Button
               type="button"

package/src/app/plugins/layout.tsx

@@ -1,10 +1,15 @@
+"use client";
+
 import { Sidebar } from "@/components/sidebar";
+import { useRequireAuth } from "@/lib/require-auth";
 
 export default function PluginsLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const { isPending, isAuthed } = useRequireAuth();
+  if (isPending || !isAuthed) return null;
   return (
     <div className="flex h-screen">
       <Sidebar />

package/src/app/plugins/page.tsx

@@ -10,13 +10,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -170,9 +164,7 @@ export default function PluginsPage() {
       setToggleError(null);
 
       // Optimistic update
-      setInstalled((prev) =>
-        prev.map((p) => (p.pluginId === pluginId ? { ...p, enabled: newEnabled } : p)),
-      );
+      setInstalled((prev) => prev.map((p) => (p.pluginId === pluginId ? { ...p, enabled: newEnabled } : p)));
 
       try {
         await togglePluginEnabled(selectedBotId, pluginId, newEnabled);
@@ -181,9 +173,7 @@ export default function PluginsPage() {
         setInstalled(refreshed);
       } catch {
         // Revert on failure
-        setInstalled((prev) =>
-          prev.map((p) => (p.pluginId === pluginId ? { ...p, enabled: previousEnabled } : p)),
-        );
+        setInstalled((prev) => prev.map((p) => (p.pluginId === pluginId ? { ...p, enabled: previousEnabled } : p)));
         setToggleError("Failed to update plugin. Please try again.");
       } finally {
         togglingRef.current = null;
@@ -221,10 +211,7 @@ export default function PluginsPage() {
 
   const installedTotal = installedManifests.length;
   const installedStart = (installedPage - 1) * PLUGINS_PAGE_SIZE;
-  const pagedInstalled = installedManifests.slice(
-    installedStart,
-    installedStart + PLUGINS_PAGE_SIZE,
-  );
+  const pagedInstalled = installedManifests.slice(installedStart, installedStart + PLUGINS_PAGE_SIZE);
 
   const catalogTotal = availablePlugins.length;
   const catalogStart = (catalogPage - 1) * PLUGINS_PAGE_SIZE;
@@ -268,17 +255,14 @@ export default function PluginsPage() {
       <div className="mb-8">
         <h1 className="text-2xl font-bold tracking-widest uppercase">PLUGINS</h1>
         <p className="mt-2 text-muted-foreground">
-          Manage installed plugins and discover new ones for your {getBrandConfig().productName}{" "}
-          instances.
+          Manage installed plugins and discover new ones for your {getBrandConfig().productName} instances.
         </p>
       </div>
 
       {botsLoading ? (
         <Skeleton className="mb-6 h-9 w-64" />
       ) : bots.length === 0 ? (
-        <p className="mb-6 text-sm text-muted-foreground">
-          No bots found. Create a bot first to manage plugins.
-        </p>
+        <p className="mb-6 text-sm text-muted-foreground">No bots found. Create a bot first to manage plugins.</p>
       ) : (
         <div className="mb-6 flex items-center gap-3">
           <label htmlFor="bot-select" className="text-sm font-medium text-muted-foreground">
@@ -307,16 +291,10 @@ export default function PluginsPage() {
 
       <Tabs defaultValue="installed">
         <TabsList variant="line">
-          <TabsTrigger
-            value="installed"
-            className="data-[state=active]:text-terminal after:bg-terminal"
-          >
+          <TabsTrigger value="installed" className="data-[state=active]:text-terminal after:bg-terminal">
             Installed ({installed.length})
           </TabsTrigger>
-          <TabsTrigger
-            value="catalog"
-            className="data-[state=active]:text-terminal after:bg-terminal"
-          >
+          <TabsTrigger value="catalog" className="data-[state=active]:text-terminal after:bg-terminal">
             Catalog
           </TabsTrigger>
         </TabsList>
@@ -329,9 +307,7 @@ export default function PluginsPage() {
           )}
           {installedTotal === 0 ? (
             <div className="flex h-40 flex-col items-center justify-center gap-3 rounded-sm border border-dashed border-terminal/20">
-              <p className="font-mono text-sm text-terminal/60">
-                &gt; NO PLUGINS INSTALLED. YOUR ARSENAL IS EMPTY.
-              </p>
+              <p className="font-mono text-sm text-terminal/60">&gt; NO PLUGINS INSTALLED. YOUR ARSENAL IS EMPTY.</p>
               <Button
                 variant="outline"
                 size="sm"
@@ -377,9 +353,7 @@ export default function PluginsPage() {
                                 {item.enabled ? "Active" : "Disabled"}
                               </Badge>
                             </div>
-                            <CardDescription className="mt-1 line-clamp-2">
-                              {manifest.description}
-                            </CardDescription>
+                            <CardDescription className="mt-1 line-clamp-2">{manifest.description}</CardDescription>
                           </div>
                         </div>
                       </CardHeader>
@@ -394,8 +368,7 @@ export default function PluginsPage() {
                                 className="h-7 px-2 text-xs font-mono uppercase tracking-wider text-terminal hover:bg-terminal/10"
                                 disabled={!selectedBotId}
                                 onClick={() =>
-                                  selectedBotId &&
-                                  setupChat.openSetup(item.pluginId, manifest.name, selectedBotId)
+                                  selectedBotId && setupChat.openSetup(item.pluginId, manifest.name, selectedBotId)
                                 }
                               >
                                 <Settings className="mr-1 h-3 w-3" />
@@ -421,8 +394,8 @@ export default function PluginsPage() {
           {installedTotal > PLUGINS_PAGE_SIZE && (
             <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground font-mono">
               <span>
-                Showing {installedStart + 1}-
-                {Math.min(installedStart + PLUGINS_PAGE_SIZE, installedTotal)} of {installedTotal}
+                Showing {installedStart + 1}-{Math.min(installedStart + PLUGINS_PAGE_SIZE, installedTotal)} of{" "}
+                {installedTotal}
               </span>
               <div className="flex gap-2">
                 <Button
@@ -481,9 +454,7 @@ export default function PluginsPage() {
             </div>
           ) : catalogError ? (
             <div className="flex h-40 flex-col items-center justify-center gap-3 rounded-sm border border-dashed border-red-500/25 bg-red-500/5">
-              <p className="font-mono text-sm text-red-500">
-                &gt; CATALOG LOAD FAILED. CHECK CONNECTION AND RETRY.
-              </p>
+              <p className="font-mono text-sm text-red-500">&gt; CATALOG LOAD FAILED. CHECK CONNECTION AND RETRY.</p>
               <Button
                 variant="outline"
                 size="sm"
@@ -532,9 +503,7 @@ export default function PluginsPage() {
                                     v{plugin.version}
                                   </Badge>
                                 </div>
-                                <CardDescription className="mt-1 line-clamp-2">
-                                  {plugin.description}
-                                </CardDescription>
+                                <CardDescription className="mt-1 line-clamp-2">{plugin.description}</CardDescription>
                               </div>
                             </div>
                           </CardHeader>
@@ -573,8 +542,7 @@ export default function PluginsPage() {
           {catalogTotal > PLUGINS_PAGE_SIZE && (
             <div className="flex items-center justify-between text-xs text-muted-foreground font-mono">
               <span>
-                Showing {catalogStart + 1}-
-                {Math.min(catalogStart + PLUGINS_PAGE_SIZE, catalogTotal)} of {catalogTotal}
+                Showing {catalogStart + 1}-{Math.min(catalogStart + PLUGINS_PAGE_SIZE, catalogTotal)} of {catalogTotal}
               </span>
               <div className="flex gap-2">
                 <Button

package/src/app/pricing/error.tsx

@@ -8,13 +8,7 @@ import { logger } from "@/lib/logger";
 
 const log = logger("error-boundary:pricing");
 
-export default function PricingError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
+export default function PricingError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   const [showDetails, setShowDetails] = useState(false);
   const isDev = process.env.NODE_ENV === "development";