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

package/src/components/bot-settings/bot-settings-client.tsx

@@ -237,14 +237,9 @@ export function BotSettingsClient({ botId }: { botId: string }) {
         <Button variant="ghost" size="sm" asChild>
           <Link href="/dashboard">&larr; Back to Fleet</Link>
         </Button>
-        <div
-          className={`transition-all duration-500 ${statusChanged ? "ring-2 ring-terminal/30 rounded-full" : ""}`}
-        >
+        <div className={`transition-all duration-500 ${statusChanged ? "ring-2 ring-terminal/30 rounded-full" : ""}`}>
           {actionPending && pendingAction === "restart" ? (
-            <Badge
-              variant="outline"
-              className="gap-1.5 bg-yellow-500/15 text-yellow-500 border-yellow-500/25"
-            >
+            <Badge variant="outline" className="gap-1.5 bg-yellow-500/15 text-yellow-500 border-yellow-500/25">
               <Loader2 className="size-3 animate-spin" />
               Restarting
             </Badge>
@@ -255,12 +250,7 @@ export function BotSettingsClient({ botId }: { botId: string }) {
         <h1 className="text-2xl font-bold tracking-tight">{settings.identity.name}</h1>
         <div className="flex gap-2 ml-auto">
           {(settings.status === "stopped" || settings.status === "archived") && (
-            <Button
-              size="sm"
-              variant="terminal"
-              disabled={actionPending}
-              onClick={() => handleAction("start")}
-            >
+            <Button size="sm" variant="terminal" disabled={actionPending} onClick={() => handleAction("start")}>
               {actionPending && pendingAction === "start" ? (
                 <Loader2 className="size-4 animate-spin" />
               ) : (
@@ -285,12 +275,7 @@ export function BotSettingsClient({ botId }: { botId: string }) {
                 )}
                 Stop
               </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                disabled={actionPending}
-                onClick={() => handleAction("restart")}
-              >
+              <Button size="sm" variant="outline" disabled={actionPending} onClick={() => handleAction("restart")}>
                 <RotateCw
                   className={`size-3.5 ${actionPending && pendingAction === "restart" ? "animate-spin" : ""}`}
                 />
@@ -523,11 +508,7 @@ function BrainTab({
     [botId, settings, onUpdate],
   );
 
-  const {
-    enqueue: enqueueModelSave,
-    saving: savingModel,
-    error: modelSaveError,
-  } = useSaveQueue(saveModelFn);
+  const { enqueue: enqueueModelSave, saving: savingModel, error: modelSaveError } = useSaveQueue(saveModelFn);
 
   useEffect(() => {
     if (modelSaveError) setBrainError(modelSaveError);
@@ -650,15 +631,7 @@ function BrainTab({
 
 // --- Tab 3: Channels ---
 
-function ChannelsTab({
-  settings,
-  botId,
-  onUpdate,
-}: {
-  settings: BotSettings;
-  botId: string;
-  onUpdate: () => void;
-}) {
+function ChannelsTab({ settings, botId, onUpdate }: { settings: BotSettings; botId: string; onUpdate: () => void }) {
   const router = useRouter();
   const [disconnecting, setDisconnecting] = useState<string | null>(null);
   const [channelError, setChannelError] = useState<string | null>(null);
@@ -683,9 +656,7 @@ function ChannelsTab({
     <div className="max-w-2xl space-y-6">
       <div>
         <h2 className="text-xl font-bold">Channels</h2>
-        <p className="text-sm text-muted-foreground">
-          Connected channels and available integrations.
-        </p>
+        <p className="text-sm text-muted-foreground">Connected channels and available integrations.</p>
       </div>
 
       <div className="space-y-3">
@@ -719,9 +690,7 @@ function ChannelsTab({
       <Card>
         <CardHeader>
           <CardTitle>Add More Channels</CardTitle>
-          <CardDescription>
-            Your {productName()} works everywhere you do. All channels are free.
-          </CardDescription>
+          <CardDescription>Your {productName()} works everywhere you do. All channels are free.</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="flex flex-wrap gap-3">
@@ -865,17 +834,11 @@ function ConfigureChannelDialog({
             {Object.entries(config).map(([key, value]) => (
               <div key={key} className="space-y-2">
                 <Label htmlFor={`channel-cfg-${key}`}>{key}</Label>
-                <Input
-                  id={`channel-cfg-${key}`}
-                  value={value}
-                  onChange={(e) => updateField(key, e.target.value)}
-                />
+                <Input id={`channel-cfg-${key}`} value={value} onChange={(e) => updateField(key, e.target.value)} />
               </div>
             ))}
             {Object.keys(config).length === 0 && !error && (
-              <p className="text-sm text-muted-foreground">
-                No configurable settings for this channel.
-              </p>
+              <p className="text-sm text-muted-foreground">No configurable settings for this channel.</p>
             )}
           </div>
         )}
@@ -895,15 +858,7 @@ function ConfigureChannelDialog({
 
 // --- Tab 4: Superpowers ---
 
-function SuperpowersTab({
-  settings,
-  botId,
-  onUpdate,
-}: {
-  settings: BotSettings;
-  botId: string;
-  onUpdate: () => void;
-}) {
+function SuperpowersTab({ settings, botId, onUpdate }: { settings: BotSettings; botId: string; onUpdate: () => void }) {
   const [activating, setActivating] = useState<string | null>(null);
   const [activateError, setActivateError] = useState<string | null>(null);
   const [configuringSuperpower, setConfiguringSuperpower] = useState<ActiveSuperpower | null>(null);
@@ -925,22 +880,14 @@ function SuperpowersTab({
     <div className="space-y-6">
       <div>
         <h2 className="text-xl font-bold">Superpowers</h2>
-        <p className="text-sm text-muted-foreground">
-          Capabilities that make your bot extraordinary.
-        </p>
+        <p className="text-sm text-muted-foreground">Capabilities that make your bot extraordinary.</p>
       </div>
 
       {/* Active superpowers */}
       <div className="space-y-3">
-        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
-          Active
-        </h3>
+        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">Active</h3>
         {(settings.activeSuperpowers ?? []).map((sp) => (
-          <ActiveSuperpowerCard
-            key={sp.id}
-            superpower={sp}
-            onConfigure={() => setConfiguringSuperpower(sp)}
-          />
+          <ActiveSuperpowerCard key={sp.id} superpower={sp} onConfigure={() => setConfiguringSuperpower(sp)} />
         ))}
       </div>
 
@@ -1042,17 +989,11 @@ function ConfigureSuperpowerDialog({
             {Object.entries(config).map(([key, value]) => (
               <div key={key} className="space-y-2">
                 <Label htmlFor={`sp-cfg-${key}`}>{key}</Label>
-                <Input
-                  id={`sp-cfg-${key}`}
-                  value={value}
-                  onChange={(e) => updateField(key, e.target.value)}
-                />
+                <Input id={`sp-cfg-${key}`} value={value} onChange={(e) => updateField(key, e.target.value)} />
               </div>
             ))}
             {Object.keys(config).length === 0 && !error && (
-              <p className="text-sm text-muted-foreground">
-                No configurable settings for this superpower.
-              </p>
+              <p className="text-sm text-muted-foreground">No configurable settings for this superpower.</p>
             )}
           </div>
         )}
@@ -1070,13 +1011,7 @@ function ConfigureSuperpowerDialog({
   );
 }
 
-function ActiveSuperpowerCard({
-  superpower,
-  onConfigure,
-}: {
-  superpower: ActiveSuperpower;
-  onConfigure: () => void;
-}) {
+function ActiveSuperpowerCard({ superpower, onConfigure }: { superpower: ActiveSuperpower; onConfigure: () => void }) {
   return (
     <Card>
       <CardContent className="flex items-center justify-between p-4">
@@ -1086,8 +1021,7 @@ function ActiveSuperpowerCard({
             <Badge variant="outline">{superpower.mode === "hosted" ? "Hosted" : "BYOK"}</Badge>
           </div>
           <p className="text-sm text-muted-foreground">
-            {superpower.usageCount} {superpower.usageLabel} &middot;{" "}
-            <CreditDetailed value={superpower.spend} /> spent
+            {superpower.usageCount} {superpower.usageLabel} &middot; <CreditDetailed value={superpower.spend} /> spent
           </p>
           <p className="text-xs text-muted-foreground">
             Provider: {superpower.provider} &middot; {superpower.model}
@@ -1132,15 +1066,7 @@ function AvailableSuperpowerCard({
 
 // --- Tab 5: Plugins ---
 
-function PluginsTab({
-  settings,
-  botId,
-  onUpdate,
-}: {
-  settings: BotSettings;
-  botId: string;
-  onUpdate: () => void;
-}) {
+function PluginsTab({ settings, botId, onUpdate }: { settings: BotSettings; botId: string; onUpdate: () => void }) {
   const [togglingPlugin, setTogglingPlugin] = useState<string | null>(null);
   const [installingPlugin, setInstallingPlugin] = useState<string | null>(null);
   const [pluginError, setPluginError] = useState<string | null>(null);
@@ -1197,9 +1123,7 @@ function PluginsTab({
 
       {/* Installed */}
       <div className="space-y-3">
-        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
-          Installed
-        </h3>
+        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">Installed</h3>
         {(settings.installedPlugins ?? []).map((plugin) => (
           <InstalledPluginCard
             key={plugin.id}
@@ -1216,9 +1140,7 @@ function PluginsTab({
 
       {/* Discover */}
       <div className="space-y-3">
-        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
-          Discover Plugins
-        </h3>
+        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">Discover Plugins</h3>
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {(settings.discoverPlugins ?? []).map((plugin) => (
             <DiscoverPluginCard
@@ -1247,8 +1169,7 @@ function PluginsTab({
             <DialogHeader>
               <DialogTitle>Uninstall {confirmUninstall.name}?</DialogTitle>
               <DialogDescription>
-                This will remove the plugin and its configuration from your bot. This action cannot
-                be undone.
+                This will remove the plugin and its configuration from your bot. This action cannot be undone.
               </DialogDescription>
             </DialogHeader>
             <DialogFooter>
@@ -1348,17 +1269,11 @@ function ConfigurePluginDialog({
             {Object.entries(config).map(([key, value]) => (
               <div key={key} className="space-y-2">
                 <Label htmlFor={`plugin-cfg-${key}`}>{key}</Label>
-                <Input
-                  id={`plugin-cfg-${key}`}
-                  value={value}
-                  onChange={(e) => updateField(key, e.target.value)}
-                />
+                <Input id={`plugin-cfg-${key}`} value={value} onChange={(e) => updateField(key, e.target.value)} />
               </div>
             ))}
             {Object.keys(config).length === 0 && !error && (
-              <p className="text-sm text-muted-foreground">
-                No configurable settings for this plugin.
-              </p>
+              <p className="text-sm text-muted-foreground">No configurable settings for this plugin.</p>
             )}
           </div>
         )}
@@ -1395,10 +1310,7 @@ function InstalledPluginCard({
         <div className="space-y-1">
           <div className="flex items-center gap-2">
             <span className="font-medium">{plugin.name}</span>
-            <Badge
-              variant="outline"
-              className={PLUGIN_STATUS_STYLES[plugin.status] ?? DEFAULT_STATUS_STYLE}
-            >
+            <Badge variant="outline" className={PLUGIN_STATUS_STYLES[plugin.status] ?? DEFAULT_STATUS_STYLE}>
               {plugin.status === "active" ? "Active" : "Disabled"}
             </Badge>
           </div>
@@ -1483,8 +1395,8 @@ function UsageTab({ settings }: { settings: BotSettings }) {
       <Card>
         <CardContent className="space-y-4 p-4">
           <div className="text-sm text-muted-foreground">
-            This week: {formatCreditStandard(usage.totalSpend)} of{" "}
-            {formatCreditStandard(usage.creditBalance)} remaining credits
+            This week: {formatCreditStandard(usage.totalSpend)} of {formatCreditStandard(usage.creditBalance)} remaining
+            credits
           </div>
           <Progress value={spendPercent} className="h-2" />
         </CardContent>
@@ -1528,10 +1440,7 @@ function UsageTab({ settings }: { settings: BotSettings }) {
                   className="flex flex-1 flex-col items-center gap-1"
                   title={`${point.date}: ${formatCreditDetailed(point.spend)}`}
                 >
-                  <div
-                    className="w-full rounded-t bg-primary/60"
-                    style={{ height: `${height}%` }}
-                  />
+                  <div className="w-full rounded-t bg-primary/60" style={{ height: `${height}%` }} />
                   <span className="text-[10px] text-muted-foreground">{point.date.slice(-2)}</span>
                 </div>
               );
@@ -1565,15 +1474,7 @@ function UsageTab({ settings }: { settings: BotSettings }) {
 
 // --- Tab 7: Danger Zone ---
 
-function DangerZoneTab({
-  settings,
-  botId,
-  onUpdate,
-}: {
-  settings: BotSettings;
-  botId: string;
-  onUpdate: () => void;
-}) {
+function DangerZoneTab({ settings, botId, onUpdate }: { settings: BotSettings; botId: string; onUpdate: () => void }) {
   const router = useRouter();
   const [confirmAction, setConfirmAction] = useState<"stop" | "archive" | "delete" | null>(null);
   const [confirmText, setConfirmText] = useState("");
@@ -1633,9 +1534,7 @@ function DangerZoneTab({
     <div className="max-w-2xl space-y-6">
       <div>
         <h2 className="text-xl font-bold text-destructive">Danger Zone</h2>
-        <p className="text-sm text-muted-foreground">
-          Irreversible and destructive actions. Proceed with caution.
-        </p>
+        <p className="text-sm text-muted-foreground">Irreversible and destructive actions. Proceed with caution.</p>
       </div>
 
       <div className="space-y-4">
@@ -1669,9 +1568,8 @@ function DangerZoneTab({
                 "This will remove your bot from the fleet. Config and memories are kept for 30 days. You can restore it within that window."}
               {confirmAction === "delete" && (
                 <>
-                  This action is permanent and cannot be undone. All data, memories, and
-                  configuration will be destroyed. Type{" "}
-                  <strong className="text-foreground">{botName}</strong> to confirm.
+                  This action is permanent and cannot be undone. All data, memories, and configuration will be
+                  destroyed. Type <strong className="text-foreground">{botName}</strong> to confirm.
                 </>
               )}
             </DialogDescription>

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

@@ -64,7 +64,6 @@ export function ResourcesTab({ botId }: { botId: string }) {
   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(() => {
@@ -153,9 +152,7 @@ export function ResourcesTab({ botId }: { botId: string }) {
                   <span>{tier.cpu}</span>
                 </div>
                 <div className="text-sm font-medium">
-                  {tier.dailyCost === 0
-                    ? "Included"
-                    : `+${tier.dailyCost} credits/day (${tier.monthlyCost})`}
+                  {tier.dailyCost === 0 ? "Included" : `+${tier.dailyCost} credits/day (${tier.monthlyCost})`}
                 </div>
                 {!isCurrent && (
                   <Button
@@ -163,11 +160,7 @@ export function ResourcesTab({ botId }: { botId: string }) {
                     variant={tier.key === "standard" ? "outline" : "default"}
                     onClick={() => setConfirmTier(tier)}
                   >
-                    {currentTier === null
-                      ? "Select"
-                      : tierIndex < currentTierIndex
-                        ? "Downgrade"
-                        : "Upgrade"}
+                    {currentTier === null ? "Select" : tierIndex < currentTierIndex ? "Downgrade" : "Upgrade"}
                   </Button>
                 )}
               </CardContent>

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

@@ -13,12 +13,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Progress } from "@/components/ui/progress";
-import {
-  getStorageTier,
-  getStorageUsage,
-  type StorageUsage,
-  setStorageTier,
-} from "@/lib/bot-settings-data";
+import { getStorageTier, getStorageUsage, type StorageUsage, setStorageTier } from "@/lib/bot-settings-data";
 
 const STORAGE_TIERS = [
   {
@@ -73,10 +68,7 @@ export function StorageTab({ botId }: { botId: string }) {
     async function load() {
       setLoading(true);
       try {
-        const [tierResult, usageResult] = await Promise.all([
-          getStorageTier(botId),
-          getStorageUsage(botId),
-        ]);
+        const [tierResult, usageResult] = await Promise.all([getStorageTier(botId), getStorageUsage(botId)]);
         if (!cancelled) {
           setCurrentTier(tierResult.tier as TierKey);
           setUsage(usageResult);
@@ -109,11 +101,7 @@ export function StorageTab({ botId }: { botId: string }) {
   }
 
   if (loading) {
-    return (
-      <div className="flex h-40 items-center justify-center text-muted-foreground">
-        Loading storage info...
-      </div>
-    );
+    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];
@@ -125,16 +113,13 @@ export function StorageTab({ botId }: { botId: string }) {
   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);
+    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>
+        <p className="text-sm text-muted-foreground">Persistent storage for bot memories, files, and data.</p>
       </div>
 
       {/* Usage bar */}
@@ -142,23 +127,15 @@ export function StorageTab({ botId }: { botId: string }) {
         <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
+              {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>
+              <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" : ""}`}
-          />
+          <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>
+            <p className="text-xs text-muted-foreground">Disk usage is only available while the bot is running.</p>
           )}
         </CardContent>
       </Card>
@@ -168,9 +145,7 @@ export function StorageTab({ botId }: { botId: string }) {
 
       {/* Tier cards */}
       <div className="space-y-3">
-        <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
-          Storage Tiers
-        </h3>
+        <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;
@@ -178,9 +153,7 @@ export function StorageTab({ botId }: { botId: string }) {
               <Card
                 key={tier.key}
                 className={`cursor-pointer transition-colors ${
-                  isActive
-                    ? "border-primary bg-primary/5"
-                    : "hover:border-primary/50 hover:bg-accent/30"
+                  isActive ? "border-primary bg-primary/5" : "hover:border-primary/50 hover:bg-accent/30"
                 }`}
                 onClick={() => {
                   if (!isActive) setPendingTier(tier.key);
@@ -203,8 +176,8 @@ export function StorageTab({ botId }: { botId: string }) {
           })}
         </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.
+          Storage costs are billed daily from your credit balance. Downgrades take effect immediately but do not delete
+          existing data.
         </p>
       </div>
 
@@ -218,17 +191,15 @@ export function StorageTab({ botId }: { botId: string }) {
             <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.
+                  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.
+                  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>

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

@@ -36,9 +36,7 @@ export function VpsInfoPanel({ botId }: VpsPanelProps) {
       <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>
+          <p className="text-sm text-destructive">Failed to load VPS info. Please try again later.</p>
         </CardContent>
       </Card>
     );
@@ -111,20 +109,14 @@ export function VpsInfoPanel({ botId }: VpsPanelProps) {
                 onClick={handleCopy}
                 title="Copy SSH command"
               >
-                {copied ? (
-                  <CheckCircle className="size-4 text-terminal" />
-                ) : (
-                  <Copy className="size-4" />
-                )}
+                {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>
+          <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

@@ -68,8 +68,7 @@ export function VpsUpgradeCard({ botId }: VpsUpgradeCardProps) {
           </Badge>
         </div>
         <CardDescription>
-          Get a dedicated persistent container with fixed monthly pricing — no per-credit billing
-          for compute.
+          Get a dedicated persistent container with fixed monthly pricing — no per-credit billing for compute.
         </CardDescription>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
@@ -97,8 +96,8 @@ export function VpsUpgradeCard({ botId }: VpsUpgradeCardProps) {
         {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.
+          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">

package/src/components/brand-hydrator.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { type BrandConfig, setBrandConfig } from "@/lib/brand-config";
+
+/**
+ * Client component that hydrates the brand config from server-fetched data.
+ * Renders nothing — just calls setBrandConfig() during module evaluation
+ * so all client components see the DB-driven config.
+ */
+export function BrandHydrator({ config }: { config: Partial<BrandConfig> }) {
+  setBrandConfig(config);
+  return null;
+}

package/src/components/channel-wizard/field-interactive.tsx

@@ -33,9 +33,7 @@ export function FieldInteractive({ field, value, onChange, error }: FieldInterac
               )}
             >
               <span className="flex-1">{option.label}</span>
-              {value === option.value && (
-                <span className="text-primary text-xs font-medium">Selected</span>
-              )}
+              {value === option.value && <span className="text-primary text-xs font-medium">Selected</span>}
             </Button>
           ))}
         </div>