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

package/src/app/channels/setup/[plugin]/page.tsx

@@ -70,9 +70,7 @@ export default function ChannelSetupPage({ params }: { params: Promise<{ plugin:
       <div className="flex h-full items-center justify-center">
         <div className="text-center">
           <h1 className="text-2xl font-bold">Channel Not Found</h1>
-          <p className="mt-2 text-muted-foreground">
-            No manifest found for &ldquo;{plugin}&rdquo;.
-          </p>
+          <p className="mt-2 text-muted-foreground">No manifest found for &ldquo;{plugin}&rdquo;.</p>
         </div>
       </div>
     );
@@ -87,8 +85,8 @@ export default function ChannelSetupPage({ params }: { params: Promise<{ plugin:
           </div>
           <h1 className="text-lg font-semibold uppercase tracking-wider">NO INSTANCE CONTEXT</h1>
           <p className="text-sm text-muted-foreground">
-            Channel setup requires a bot instance. Navigate to your instance and connect a channel
-            from the Channels tab.
+            Channel setup requires a bot instance. Navigate to your instance and connect a channel from the Channels
+            tab.
           </p>
           <Button variant="terminal" asChild>
             <Link href="/instances">VIEW INSTANCES</Link>

package/src/app/error.tsx

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

package/src/app/fleet/error.tsx

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

package/src/app/fleet/layout.tsx

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

package/src/app/fleet/settings/page.tsx

@@ -9,9 +9,7 @@ export default function FleetSettingsPage() {
           <Settings2 className="h-6 w-6 text-muted-foreground" />
           Fleet Settings
         </h1>
-        <p className="text-muted-foreground mt-1">
-          Configure update behavior and maintenance windows for your fleet.
-        </p>
+        <p className="text-muted-foreground mt-1">Configure update behavior and maintenance windows for your fleet.</p>
       </div>
       <UpdateSettingsCard />
     </div>

package/src/app/global-error.tsx

@@ -7,13 +7,7 @@ import { logger } from "@/lib/logger";
 
 const log = logger("global-error");
 
-export default function GlobalError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
+export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   const [showDetails, setShowDetails] = useState(false);
   const isDev = process.env.NODE_ENV === "development";
 
@@ -43,9 +37,7 @@ export default function GlobalError({
               <div className="flex items-center gap-3">
                 <AlertTriangleIcon className="size-6 text-red-500" />
                 <div>
-                  <p className="text-xs font-semibold uppercase tracking-widest text-neutral-500">
-                    {brandName()}
-                  </p>
+                  <p className="text-xs font-semibold uppercase tracking-widest text-neutral-500">{brandName()}</p>
                   <h1 className="text-xl font-semibold text-neutral-100">Something went wrong</h1>
                 </div>
               </div>

package/src/app/globals.css

@@ -256,10 +256,7 @@
 
 /* Grid dot overlay — uses terminal color for brand-agnostic theming */
 .bg-grid-dots {
-  background-image: radial-gradient(
-    color-mix(in srgb, var(--terminal, #00ff41) 8%, transparent) 1px,
-    transparent 1px
-  );
+  background-image: radial-gradient(color-mix(in srgb, var(--terminal, #00ff41) 8%, transparent) 1px, transparent 1px);
   background-size: 24px 24px;
 }
 

package/src/app/instances/[id]/instance-detail-client.tsx

@@ -1,19 +1,9 @@
 "use client";
 
-import {
-  ArrowDownToLine,
-  ArrowLeft,
-  Check,
-  Loader2,
-  Lock,
-  Pencil,
-  Plus,
-  Trash2,
-  X,
-} from "lucide-react";
+import { ArrowDownToLine, ArrowLeft, Check, Loader2, Lock, Pencil, Plus, Trash2, X } from "lucide-react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FriendsTab } from "@/components/instances/friends-tab";
 import { HealthOverview } from "@/components/observability/health-overview";
 import { LogsViewer } from "@/components/observability/logs-viewer";
@@ -44,14 +34,7 @@ import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { useImageStatus } from "@/hooks/use-image-status";
@@ -70,13 +53,32 @@ import {
   updateInstanceConfig,
   updateInstanceSecrets,
 } from "@/lib/api";
+import { getBrandConfig } from "@/lib/brand-config";
 import { toUserMessage } from "@/lib/errors";
 import { cn } from "@/lib/utils";
 
+const ALL_INSTANCE_TABS = [
+  "overview",
+  "health",
+  "metrics",
+  "logs",
+  "plugins",
+  "channels",
+  "friends",
+  "sessions",
+  "snapshots",
+  "config",
+] as const;
+
 export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const defaultTab = searchParams.get("tab") ?? "overview";
+  const brand = getBrandConfig();
+  const visibleTabs = useMemo(
+    () => ALL_INSTANCE_TABS.filter((t) => !brand.hiddenInstanceTabs.includes(t)),
+    [brand.hiddenInstanceTabs],
+  );
   const [instance, setInstance] = useState<InstanceDetail | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -98,7 +100,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
   const [destroyOpen, setDestroyOpen] = useState(false);
   const [destroyConfirmText, setDestroyConfirmText] = useState("");
   const [destroying, setDestroying] = useState(false);
-  const { updateAvailable, error: imageStatusError } = useImageStatus(instanceId);
+  const { updateAvailable } = useImageStatus(instanceId);
   const [pulling, setPulling] = useState(false);
   const [confirmPull, setConfirmPull] = useState(false);
   const [togglingPlugin, setTogglingPlugin] = useState<string | null>(null);
@@ -109,9 +111,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
   const [secretsStatus, setSecretsStatus] = useState<"idle" | "saved" | "error">("idle");
   const [secretsError, setSecretsError] = useState<string | null>(null);
   const nextSecretId = useRef(0);
-  const [newSecretRows, setNewSecretRows] = useState<{ id: number; key: string; value: string }[]>(
-    [],
-  );
+  const [newSecretRows, setNewSecretRows] = useState<{ id: number; key: string; value: string }[]>([]);
   const secretsLoaded = useRef(false);
   const [renaming, setRenaming] = useState(false);
   const [renameValue, setRenameValue] = useState("");
@@ -254,9 +254,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
       }
     }
     // Check for new rows whose key duplicates an existing secret key.
-    const duplicates = newSecretRows
-      .map((row) => row.key.trim())
-      .filter((k) => k && secretKeys.includes(k));
+    const duplicates = newSecretRows.map((row) => row.key.trim()).filter((k) => k && secretKeys.includes(k));
     if (duplicates.length > 0) {
       setSecretsStatus("error");
       setSecretsError(
@@ -412,11 +410,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                 disabled={renameSaving}
                 aria-label="Confirm rename"
               >
-                {renameSaving ? (
-                  <Loader2 className="size-4 animate-spin" />
-                ) : (
-                  <Check className="size-4" />
-                )}
+                {renameSaving ? <Loader2 className="size-4 animate-spin" /> : <Check className="size-4" />}
               </Button>
               <Button
                 variant="ghost"
@@ -433,12 +427,10 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
               {instance.name}
               <span
                 className={cn("size-2 rounded-full", {
-                  "bg-emerald-500 animate-[pulse-dot_2s_ease-in-out_infinite]":
-                    instance.status === "running",
+                  "bg-emerald-500 animate-[pulse-dot_2s_ease-in-out_infinite]": instance.status === "running",
                   "bg-zinc-400": instance.status === "stopped",
                   "bg-yellow-500": instance.status === "degraded",
-                  "bg-red-500 animate-[pulse-dot_0.8s_ease-in-out_infinite]":
-                    instance.status === "error",
+                  "bg-red-500 animate-[pulse-dot_0.8s_ease-in-out_infinite]": instance.status === "error",
                 })}
               />
               <Button
@@ -456,14 +448,9 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
           )}
           <div className="flex items-center gap-3 text-sm text-muted-foreground">
             <StatusBadge status={instance.status} />
-            {imageStatusError && (
-              <span className="text-xs text-destructive">{imageStatusError}</span>
-            )}
+            {/* imageStatusError silenced — non-critical, fails for non-GHCR registries */}
             {updateAvailable && (
-              <Badge
-                variant="outline"
-                className="gap-1.5 bg-amber-500/15 text-amber-500 border-amber-500/25"
-              >
+              <Badge variant="outline" className="gap-1.5 bg-amber-500/15 text-amber-500 border-amber-500/25">
                 <span
                   className={cn(
                     "size-1.5 rounded-full bg-amber-500",
@@ -527,18 +514,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
       {/* Tabs */}
       <Tabs value={activeTab} onValueChange={setActiveTab}>
         <TabsList className="bg-transparent border-b border-border rounded-none p-0 h-auto gap-0">
-          {[
-            "overview",
-            "health",
-            "metrics",
-            "logs",
-            "plugins",
-            "channels",
-            "friends",
-            "sessions",
-            "snapshots",
-            "config",
-          ].map((tab) => (
+          {visibleTabs.map((tab) => (
             <TabsTrigger
               key={tab}
               value={tab}
@@ -602,10 +578,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                 </TableHeader>
                 <TableBody>
                   {instance.plugins.map((plugin) => (
-                    <TableRow
-                      key={plugin.id}
-                      className="transition-colors hover:bg-muted/50 even:bg-muted/20"
-                    >
+                    <TableRow key={plugin.id} className="transition-colors hover:bg-muted/50 even:bg-muted/20">
                       <TableCell className="font-medium">{plugin.name}</TableCell>
                       <TableCell className="text-muted-foreground">{plugin.version}</TableCell>
                       <TableCell>
@@ -649,10 +622,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                 </TableHeader>
                 <TableBody>
                   {instance.channelDetails.map((ch) => (
-                    <TableRow
-                      key={ch.id}
-                      className="transition-colors hover:bg-muted/50 even:bg-muted/20"
-                    >
+                    <TableRow key={ch.id} className="transition-colors hover:bg-muted/50 even:bg-muted/20">
                       <TableCell className="font-medium">{ch.name}</TableCell>
                       <TableCell className="text-muted-foreground">{ch.type}</TableCell>
                       <TableCell>
@@ -689,10 +659,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                 </TableHeader>
                 <TableBody>
                   {instance.sessions.map((sess) => (
-                    <TableRow
-                      key={sess.id}
-                      className="transition-colors hover:bg-muted/50 even:bg-muted/20"
-                    >
+                    <TableRow key={sess.id} className="transition-colors hover:bg-muted/50 even:bg-muted/20">
                       <TableCell className="font-mono text-sm">{sess.id}</TableCell>
                       <TableCell>{sess.userId}</TableCell>
                       <TableCell>{sess.messageCount}</TableCell>
@@ -750,10 +717,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                 </TableHeader>
                 <TableBody>
                   {snapshots.map((snap) => (
-                    <TableRow
-                      key={snap.id}
-                      className="transition-colors hover:bg-muted/50 even:bg-muted/20"
-                    >
+                    <TableRow key={snap.id} className="transition-colors hover:bg-muted/50 even:bg-muted/20">
                       <TableCell className="font-medium">
                         {snap.name ?? <span className="text-muted-foreground italic">unnamed</span>}
                       </TableCell>
@@ -767,18 +731,10 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                       </TableCell>
                       <TableCell className="text-right">
                         <div className="flex justify-end gap-1">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            onClick={() => setConfirmRestore(snap)}
-                          >
+                          <Button size="sm" variant="outline" onClick={() => setConfirmRestore(snap)}>
                             Restore
                           </Button>
-                          <Button
-                            size="sm"
-                            variant="destructive"
-                            onClick={() => setConfirmDelete(snap)}
-                          >
+                          <Button size="sm" variant="destructive" onClick={() => setConfirmDelete(snap)}>
                             Delete
                           </Button>
                         </div>
@@ -803,11 +759,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                 {confirmRestore ? new Date(confirmRestore.createdAt).toLocaleString() : ""}.
               </p>
               <DialogFooter>
-                <Button
-                  variant="outline"
-                  onClick={() => setConfirmRestore(null)}
-                  disabled={restoring}
-                >
+                <Button variant="outline" onClick={() => setConfirmRestore(null)} disabled={restoring}>
                   Cancel
                 </Button>
                 <Button
@@ -831,11 +783,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                 </DialogDescription>
               </DialogHeader>
               <DialogFooter>
-                <Button
-                  variant="outline"
-                  onClick={() => setConfirmDelete(null)}
-                  disabled={deleting}
-                >
+                <Button variant="outline" onClick={() => setConfirmDelete(null)} disabled={deleting}>
                   Cancel
                 </Button>
                 <Button
@@ -877,15 +825,9 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
           </div>
           <div className="flex items-center justify-end gap-3">
             {saving && <span className="text-sm text-muted-foreground">Saving...</span>}
-            {configStatus === "saved" && !saving && (
-              <span className="text-sm text-emerald-500">Config saved</span>
-            )}
-            {configStatus === "invalid" && (
-              <span className="text-sm text-red-500">Invalid JSON</span>
-            )}
-            {configStatus === "error" && configError && (
-              <span className="text-sm text-red-500">{configError}</span>
-            )}
+            {configStatus === "saved" && !saving && <span className="text-sm text-emerald-500">Config saved</span>}
+            {configStatus === "invalid" && <span className="text-sm text-red-500">Invalid JSON</span>}
+            {configStatus === "error" && configError && <span className="text-sm text-red-500">{configError}</span>}
             <Button
               disabled={saving || configStatus === "invalid"}
               onClick={async () => {
@@ -906,10 +848,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                 try {
                   const env: Record<string, string> = {};
                   for (const [k, v] of Object.entries(parsed as Record<string, unknown>)) {
-                    if (
-                      v === null ||
-                      (typeof v !== "string" && typeof v !== "number" && typeof v !== "boolean")
-                    ) {
+                    if (v === null || (typeof v !== "string" && typeof v !== "number" && typeof v !== "boolean")) {
                       throw new Error(`Value for key "${k}" must be a string, number, or boolean`);
                     }
                     env[k] = String(v);
@@ -934,9 +873,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
             <div className="flex items-center justify-between">
               <div>
                 <h3 className="text-sm font-medium">Secrets</h3>
-                <p className="text-xs text-muted-foreground">
-                  Write-only. Stored values are never displayed.
-                </p>
+                <p className="text-xs text-muted-foreground">Write-only. Stored values are never displayed.</p>
               </div>
               <Button
                 size="sm"
@@ -989,9 +926,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                             type="password"
                             placeholder="Enter new value..."
                             value={secretValues[key] ?? ""}
-                            onChange={(e) =>
-                              setSecretValues((prev) => ({ ...prev, [key]: e.target.value }))
-                            }
+                            onChange={(e) => setSecretValues((prev) => ({ ...prev, [key]: e.target.value }))}
                             className="font-mono text-sm bg-transparent border-border focus:ring-terminal/50 focus:border-terminal/50"
                           />
                         </TableCell>
@@ -1006,9 +941,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                             value={row.key}
                             onChange={(e) =>
                               setNewSecretRows((prev) =>
-                                prev.map((r) =>
-                                  r.id === row.id ? { ...r, key: e.target.value } : r,
-                                ),
+                                prev.map((r) => (r.id === row.id ? { ...r, key: e.target.value } : r)),
                               )
                             }
                             className="font-mono text-sm bg-transparent"
@@ -1021,9 +954,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                             value={row.value}
                             onChange={(e) =>
                               setNewSecretRows((prev) =>
-                                prev.map((r) =>
-                                  r.id === row.id ? { ...r, value: e.target.value } : r,
-                                ),
+                                prev.map((r) => (r.id === row.id ? { ...r, value: e.target.value } : r)),
                               )
                             }
                             className="font-mono text-sm bg-transparent"
@@ -1033,9 +964,7 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
                           <Button
                             size="sm"
                             variant="ghost"
-                            onClick={() =>
-                              setNewSecretRows((prev) => prev.filter((r) => r.id !== row.id))
-                            }
+                            onClick={() => setNewSecretRows((prev) => prev.filter((r) => r.id !== row.id))}
                           >
                             <Trash2 className="size-3.5 text-muted-foreground hover:text-destructive" />
                           </Button>
@@ -1078,9 +1007,8 @@ export function InstanceDetailClient({ instanceId }: { instanceId: string }) {
           <DialogHeader>
             <DialogTitle>Destroy {instance.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">{instance.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">{instance.name}</strong> to confirm.
             </DialogDescription>
           </DialogHeader>
 
@@ -1161,9 +1089,7 @@ function MetricCard({
   return (
     <Card className="py-4">
       <CardHeader className="pb-1">
-        <CardTitle className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-          {title}
-        </CardTitle>
+        <CardTitle className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{title}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-2">
         <div className="flex items-center gap-2">

package/src/app/instances/error.tsx

@@ -8,13 +8,7 @@ import { logger } from "@/lib/logger";
 
 const log = logger("error-boundary:instances");
 
-export default function InstancesError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
+export default function InstancesError({ 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 InstancesError({
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
-          <p className="text-muted-foreground">
-            Failed to load instance data. The API may be temporarily unavailable.
-          </p>
+          <p className="text-muted-foreground">Failed to load instance data. The API may be temporarily unavailable.</p>
           {isDev && (
             <Button
               type="button"