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

package/src/components/marketplace/plugin-card.tsx

@@ -6,12 +6,7 @@ import { useRef } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { brandName } from "@/lib/brand-config";
-import {
-  formatInstallCount,
-  getCapabilityColor,
-  hasHostedOption,
-  type PluginManifest,
-} from "@/lib/marketplace-data";
+import { formatInstallCount, getCapabilityColor, hasHostedOption, type PluginManifest } from "@/lib/marketplace-data";
 
 interface PluginCardProps {
   plugin: PluginManifest;
@@ -85,9 +80,7 @@ export function PluginCard({ plugin, index = 0, installed = false }: PluginCardP
                       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>

package/src/components/marketplace/superpower-content.tsx

@@ -61,9 +61,7 @@ const mdComponents = {
   em: ({ children }: ComponentPropsWithoutRef<"em">) => (
     <em className="text-lg text-muted-foreground not-italic font-light">{children}</em>
   ),
-  ul: ({ children }: ComponentPropsWithoutRef<"ul">) => (
-    <ul className="space-y-2 ml-1">{children}</ul>
-  ),
+  ul: ({ children }: ComponentPropsWithoutRef<"ul">) => <ul className="space-y-2 ml-1">{children}</ul>,
   li: ({ children }: ComponentPropsWithoutRef<"li">) => (
     <li className="flex items-start gap-2 text-sm leading-relaxed">
       <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary/60" />

package/src/components/marketplace/terminal-search.tsx

@@ -11,11 +11,7 @@ interface TerminalSearchProps {
   placeholder?: string;
 }
 
-export function TerminalSearch({
-  value,
-  onChange,
-  placeholder = "Search plugins...",
-}: TerminalSearchProps) {
+export function TerminalSearch({ value, onChange, placeholder = "Search plugins..." }: TerminalSearchProps) {
   const [focused, setFocused] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -23,9 +19,7 @@ export function TerminalSearch({
     <search
       className={cn(
         "flex items-center gap-2 rounded-sm border px-3 py-2 font-mono text-sm transition-all max-w-sm cursor-text",
-        focused
-          ? "border-primary shadow-[0_0_8px_rgba(0,255,65,0.15)]"
-          : "border-input hover:border-primary/40",
+        focused ? "border-primary shadow-[0_0_8px_rgba(0,255,65,0.15)]" : "border-input hover:border-primary/40",
       )}
       onClick={() => inputRef.current?.focus()}
       onKeyDown={(e) => {

package/src/components/oauth-buttons.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { API_BASE_URL } from "@/lib/api-config";
 import { signIn } from "@/lib/auth-client";
-import { trpc } from "@/lib/trpc";
 
 const providerLabels: Record<string, string> = {
   github: "GitHub",
@@ -14,25 +14,42 @@ const providerLabels: Record<string, string> = {
 
 interface OAuthButtonsProps {
   callbackUrl?: string;
+  productSlug?: string;
 }
 
-export function OAuthButtons({ callbackUrl = "/" }: OAuthButtonsProps) {
+export function OAuthButtons({ callbackUrl = "/", productSlug }: OAuthButtonsProps) {
   const [loading, setLoading] = useState<string | null>(null);
-  const { data: enabledProviders, isLoading } = trpc.authSocial.enabledSocialProviders.useQuery(
-    undefined,
-    { staleTime: Number.POSITIVE_INFINITY },
-  );
+  const [enabledProviders, setEnabledProviders] = useState<string[] | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Don't pass slug — let the server resolve from Origin header
+    const url = productSlug
+      ? `${API_BASE_URL}/auth/providers?slug=${encodeURIComponent(productSlug)}`
+      : `${API_BASE_URL}/auth/providers`;
+    fetch(url)
+      .then((r) => r.json())
+      .then((data) => setEnabledProviders(Array.isArray(data) ? data : []))
+      .catch(() => setEnabledProviders([]))
+      .finally(() => setIsLoading(false));
+  }, [productSlug]);
 
   async function handleOAuth(provider: string) {
     setLoading(provider);
     try {
-      const absoluteCallback = callbackUrl.startsWith("http")
-        ? callbackUrl
-        : `${window.location.origin}${callbackUrl}`;
-      await signIn.social({
+      const absoluteCallback = callbackUrl.startsWith("http") ? callbackUrl : `${window.location.origin}${callbackUrl}`;
+      const result = await signIn.social({
         provider,
         callbackURL: absoluteCallback,
+        fetchOptions: { redirect: "manual" },
       });
+      // BetterAuth returns { url, redirect } — navigate the browser explicitly
+      // fetch() can't follow cross-origin redirects to GitHub, so we must do it ourselves
+      const url = (result as { data?: { url?: string } })?.data?.url ?? (result as { url?: string })?.url;
+      if (url) {
+        window.location.href = url;
+        return; // page navigates away
+      }
     } catch {
       // signIn.social redirects on success; failure here means the redirect didn't happen
     } finally {
@@ -48,9 +65,7 @@ export function OAuthButtons({ callbackUrl = "/" }: OAuthButtonsProps) {
     <>
       <div className="relative my-4 flex items-center">
         <Separator className="flex-1" />
-        <span className="mx-3 text-xs uppercase tracking-wider text-muted-foreground">
-          or continue with
-        </span>
+        <span className="mx-3 text-xs uppercase tracking-wider text-muted-foreground">or continue with</span>
         <Separator className="flex-1" />
       </div>
       <div className="flex flex-col gap-2">

package/src/components/observability/fleet-health.tsx

@@ -6,13 +6,7 @@ import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-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 { useImageStatus } from "@/hooks/use-image-status";
 import type { BotStatusResponse, FleetInstance, HealthStatus } from "@/lib/api";
@@ -149,8 +143,7 @@ export function FleetHealth() {
 
   const filtered = sorted.filter((inst) => {
     if (statusFilter === "healthy") return inst.health === "healthy";
-    if (statusFilter === "attention")
-      return inst.health === "degraded" || inst.health === "unhealthy";
+    if (statusFilter === "attention") return inst.health === "degraded" || inst.health === "unhealthy";
     return true;
   });
 
@@ -215,9 +208,7 @@ export function FleetHealth() {
         <div className="flex flex-col gap-3 border-b border-terminal/20 pb-4 sm:flex-row sm:items-center sm:gap-6">
           <div className="flex items-baseline gap-2">
             <span className="text-3xl font-bold tabular-nums font-mono">{instances.length}</span>
-            <span className="text-sm text-muted-foreground">
-              {instances.length === 1 ? "instance" : "instances"}
-            </span>
+            <span className="text-sm text-muted-foreground">{instances.length === 1 ? "instance" : "instances"}</span>
           </div>
 
           <div className="flex flex-wrap items-center gap-4 text-sm font-mono">
@@ -283,18 +274,14 @@ export function FleetHealth() {
         </Button>
 
         {lastUpdated && (
-          <span className="text-xs text-muted-foreground font-mono">
-            Updated {formatRelativeTime(lastUpdated)}
-          </span>
+          <span className="text-xs text-muted-foreground font-mono">Updated {formatRelativeTime(lastUpdated)}</span>
         )}
       </div>
 
       {/* Instance Grid */}
       {filtered.length === 0 && instances.length === 0 ? (
         <div className="rounded-sm border border-terminal/20 bg-terminal/5 px-6 py-12 text-center font-mono">
-          <p className="text-terminal">
-            &gt; FLEET EMPTY. NO {productName().toUpperCase()} UNITS DEPLOYED.
-          </p>
+          <p className="text-terminal">&gt; FLEET EMPTY. NO {productName().toUpperCase()} UNITS DEPLOYED.</p>
           <Link
             href="/instances/new"
             className="mt-4 inline-block text-sm text-muted-foreground underline underline-offset-4 hover:text-terminal"

package/src/components/observability/health-overview.tsx

@@ -106,9 +106,7 @@ export function HealthOverview({ instanceId }: { instanceId: string }) {
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-xs font-medium text-muted-foreground">
-              Health Status
-            </CardTitle>
+            <CardTitle className="text-xs font-medium text-muted-foreground">Health Status</CardTitle>
           </CardHeader>
           <CardContent>
             <HealthBadge status={health.status} />
@@ -124,16 +122,12 @@ export function HealthOverview({ instanceId }: { instanceId: string }) {
         </Card>
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-xs font-medium text-muted-foreground">
-              Active Sessions
-            </CardTitle>
+            <CardTitle className="text-xs font-medium text-muted-foreground">Active Sessions</CardTitle>
           </CardHeader>
           <CardContent>
             <p className="text-lg font-semibold">
               {health.activeSessions}{" "}
-              <span className="text-sm font-normal text-muted-foreground">
-                / {health.totalSessions} total
-              </span>
+              <span className="text-sm font-normal text-muted-foreground">/ {health.totalSessions} total</span>
             </p>
           </CardContent>
         </Card>
@@ -179,9 +173,7 @@ export function HealthOverview({ instanceId }: { instanceId: string }) {
               key={provider.name}
               className={cn(
                 "border",
-                provider.available
-                  ? "bg-emerald-500/5 border-emerald-500/25"
-                  : "bg-red-500/5 border-red-500/25",
+                provider.available ? "bg-emerald-500/5 border-emerald-500/25" : "bg-red-500/5 border-red-500/25",
               )}
             >
               <CardContent className="flex items-center justify-between p-4">
@@ -217,6 +209,7 @@ export function HealthOverview({ instanceId }: { instanceId: string }) {
                 const c = healthColors[entry.status];
                 return (
                   <div
+                    // biome-ignore lint/suspicious/noArrayIndexKey: static list, index key is safe
                     key={`${entry.timestamp}-${i}`}
                     className={cn("h-8 flex-1 rounded-sm", c.dot)}
                     title={`${new Date(entry.timestamp).toLocaleTimeString()} - ${entry.status}`}
@@ -225,16 +218,10 @@ export function HealthOverview({ instanceId }: { instanceId: string }) {
               })}
             </div>
             <div className="mt-2 flex justify-between text-xs text-muted-foreground">
+              <span>{health.history.length > 0 ? new Date(health.history[0].timestamp).toLocaleTimeString() : ""}</span>
               <span>
                 {health.history.length > 0
-                  ? new Date(health.history[0].timestamp).toLocaleTimeString()
-                  : ""}
-              </span>
-              <span>
-                {health.history.length > 0
-                  ? new Date(
-                      health.history[health.history.length - 1].timestamp,
-                    ).toLocaleTimeString()
+                  ? new Date(health.history[health.history.length - 1].timestamp).toLocaleTimeString()
                   : ""}
               </span>
             </div>

package/src/components/observability/logs-viewer.tsx

@@ -5,13 +5,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, 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 type { LogEntry, LogLevel } from "@/lib/api";
 import { getInstanceLogs } from "@/lib/api";
@@ -129,11 +123,7 @@ export function LogsViewer({ instanceId }: { instanceId: string }) {
           )}
         </div>
 
-        <Button
-          variant={autoScroll ? "terminal" : "outline"}
-          size="sm"
-          onClick={() => setAutoScroll(!autoScroll)}
-        >
+        <Button variant={autoScroll ? "terminal" : "outline"} size="sm" onClick={() => setAutoScroll(!autoScroll)}>
           {autoScroll ? "Auto-scroll ON" : "Auto-scroll OFF"}
         </Button>
       </div>
@@ -154,19 +144,14 @@ export function LogsViewer({ instanceId }: { instanceId: string }) {
       <Card>
         <CardHeader className="pb-2">
           <CardTitle className="text-sm">
-            Real-time Logs{" "}
-            <span className="font-normal text-muted-foreground">({filtered.length} entries)</span>
+            Real-time Logs <span className="font-normal text-muted-foreground">({filtered.length} entries)</span>
           </CardTitle>
         </CardHeader>
         <CardContent>
           {loading && logs.length === 0 ? (
             <div className="h-[400px] space-y-2 rounded-md bg-zinc-950 p-4">
               {Array.from({ length: 12 }, (_, n) => `sk-${n}`).map((skId, i) => (
-                <Skeleton
-                  key={skId}
-                  className="h-4 bg-zinc-800"
-                  style={{ width: `${60 + ((i * 17) % 40)}%` }}
-                />
+                <Skeleton key={skId} className="h-4 bg-zinc-800" style={{ width: `${60 + ((i * 17) % 40)}%` }} />
               ))}
             </div>
           ) : (
@@ -180,25 +165,16 @@ export function LogsViewer({ instanceId }: { instanceId: string }) {
               {filtered.length === 0 ? (
                 <div className="flex h-full flex-col items-center justify-center">
                   <p className="text-zinc-500">No logs match the current filters.</p>
-                  <p className="mt-1 text-zinc-600">
-                    Try broadening your search or changing the level filter.
-                  </p>
+                  <p className="mt-1 text-zinc-600">Try broadening your search or changing the level filter.</p>
                 </div>
               ) : (
                 filtered.map((log) => (
                   <div
                     key={log.id}
-                    className={cn(
-                      "flex gap-3 rounded px-2 py-1 hover:bg-zinc-900",
-                      levelBgColors[log.level],
-                    )}
+                    className={cn("flex gap-3 rounded px-2 py-1 hover:bg-zinc-900", levelBgColors[log.level])}
                   >
-                    <span className="shrink-0 text-zinc-600">
-                      {new Date(log.timestamp).toLocaleTimeString()}
-                    </span>
-                    <span
-                      className={cn("w-12 shrink-0 text-right uppercase", levelColors[log.level])}
-                    >
+                    <span className="shrink-0 text-zinc-600">{new Date(log.timestamp).toLocaleTimeString()}</span>
+                    <span className={cn("w-12 shrink-0 text-right uppercase", levelColors[log.level])}>
                       {log.level}
                     </span>
                     <span className="shrink-0 text-zinc-500">[{log.source}]</span>

package/src/components/observability/metrics-dashboard.tsx

@@ -2,17 +2,7 @@
 
 import { AlertTriangleIcon, RefreshCw } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
+import { Bar, BarChart, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -192,10 +182,7 @@ export function MetricsDashboard({ instanceId }: { instanceId: string }) {
             </ResponsiveContainer>
             <div className="mt-3 space-y-1">
               {metrics.tokenUsage.map((t) => (
-                <div
-                  key={t.provider}
-                  className="flex justify-between text-xs text-muted-foreground"
-                >
+                <div key={t.provider} className="flex justify-between text-xs text-muted-foreground">
                   <span className="capitalize">{t.provider}</span>
                   <span className="font-medium text-foreground">${t.totalCost.toFixed(2)}</span>
                 </div>

package/src/components/onboarding/fallback-setup.tsx

@@ -6,13 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } 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 { quickSetup } from "@/lib/api";
 import { brandName } from "@/lib/brand-config";
 import { markOnboardingComplete } from "@/lib/onboarding-store";
@@ -69,20 +63,13 @@ export function FallbackSetup() {
         <CardContent className="p-6">
           <div className="flex items-center gap-2 mb-1">
             <AlertTriangle className="h-4 w-4 text-chart-3" />
-            <h2 className="text-sm font-mono uppercase tracking-[0.2em] text-chart-3">
-              MANUAL OVERRIDE
-            </h2>
+            <h2 className="text-sm font-mono uppercase tracking-[0.2em] text-chart-3">MANUAL OVERRIDE</h2>
           </div>
-          <p className="text-xs text-muted-foreground mb-6">
-            Platform {brandName()} unavailable. Configure manually.
-          </p>
+          <p className="text-xs text-muted-foreground mb-6">Platform {brandName()} unavailable. Configure manually.</p>
 
           <form onSubmit={handleSubmit} className="space-y-4">
             <div className="space-y-2">
-              <Label
-                htmlFor="fallback-api-key"
-                className="text-xs uppercase tracking-wider text-muted-foreground"
-              >
+              <Label htmlFor="fallback-api-key" className="text-xs uppercase tracking-wider text-muted-foreground">
                 API KEY
               </Label>
               <Input
@@ -97,17 +84,11 @@ export function FallbackSetup() {
             </div>
 
             <div className="space-y-2">
-              <Label
-                htmlFor="fallback-channel"
-                className="text-xs uppercase tracking-wider text-muted-foreground"
-              >
+              <Label htmlFor="fallback-channel" className="text-xs uppercase tracking-wider text-muted-foreground">
                 CHANNEL
               </Label>
               <Select value={channel} onValueChange={setChannel}>
-                <SelectTrigger
-                  id="fallback-channel"
-                  className="bg-secondary border-border font-mono text-sm"
-                >
+                <SelectTrigger id="fallback-channel" className="bg-secondary border-border font-mono text-sm">
                   <SelectValue placeholder="Select channel" />
                 </SelectTrigger>
                 <SelectContent>

package/src/components/onboarding/setup-checklist.tsx

@@ -60,18 +60,13 @@ const SUPERPOWER_TO_CAPABILITY: Record<string, string> = {
   "text-gen": "text-gen",
 };
 
-function resolveSuperpowerStatuses(
-  selectedIds: string[],
-  capabilities: CapabilitySetting[],
-): SuperpowerStatus[] {
+function resolveSuperpowerStatuses(selectedIds: string[], capabilities: CapabilitySetting[]): SuperpowerStatus[] {
   return selectedIds.map((id) => {
     const sp = superpowers.find((s) => s.id === id);
     const capName = SUPERPOWER_TO_CAPABILITY[id];
     const cap = capName ? capabilities.find((c) => c.capability === capName) : undefined;
 
-    const ready = cap
-      ? cap.mode === "hosted" || (cap.mode === "byok" && cap.keyStatus === "valid")
-      : !sp?.requiresKey;
+    const ready = cap ? cap.mode === "hosted" || (cap.mode === "byok" && cap.keyStatus === "valid") : !sp?.requiresKey;
 
     return {
       id,
@@ -90,9 +85,7 @@ export function SetupChecklist() {
   const [creditBalance, setCreditBalance] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [hasInstances, setHasInstances] = useState(false);
-  const [connectedChannels, setConnectedChannels] = useState<Map<string, ChannelInfo["status"]>>(
-    new Map(),
-  );
+  const [connectedChannels, setConnectedChannels] = useState<Map<string, ChannelInfo["status"]>>(new Map());
   const [capabilities, setCapabilities] = useState<CapabilitySetting[]>([]);
   const [allChannels, setAllChannels] = useState<PluginOption[]>(channelPlugins);
 
@@ -106,13 +99,12 @@ export function SetupChecklist() {
 
     async function load() {
       try {
-        const [instancesResult, creditsResult, capabilitiesResult, marketplaceResult] =
-          await Promise.allSettled([
-            listInstances(),
-            getCreditBalance(),
-            listCapabilities(),
-            listMarketplacePlugins(),
-          ]);
+        const [instancesResult, creditsResult, capabilitiesResult, marketplaceResult] = await Promise.allSettled([
+          listInstances(),
+          getCreditBalance(),
+          listCapabilities(),
+          listMarketplacePlugins(),
+        ]);
         if (cancelled) return;
 
         if (instancesResult.status === "fulfilled") {
@@ -134,9 +126,7 @@ export function SetupChecklist() {
 
           // Fetch channel connection status for each instance
           const channelMap = new Map<string, ChannelInfo["status"]>();
-          const channelFetches = instances.map((inst) =>
-            listChannels(inst.id).catch(() => [] as ChannelInfo[]),
-          );
+          const channelFetches = instances.map((inst) => listChannels(inst.id).catch(() => [] as ChannelInfo[]));
           const channelResults = await Promise.all(channelFetches);
           if (!cancelled) {
             for (const channelList of channelResults) {
@@ -223,12 +213,7 @@ export function SetupChecklist() {
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
           <CardTitle className="text-base">Let&apos;s get your {productName()} running</CardTitle>
-          <Button
-            data-onboarding-id="dashboard.checklist.dismiss"
-            variant="ghost"
-            size="xs"
-            onClick={handleDismiss}
-          >
+          <Button data-onboarding-id="dashboard.checklist.dismiss" variant="ghost" size="xs" onClick={handleDismiss}>
             Dismiss
           </Button>
         </div>
@@ -237,20 +222,12 @@ export function SetupChecklist() {
         {/* Channels */}
         {channels.length > 0 && (
           <section>
-            <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-              Channels
-            </h3>
+            <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Channels</h3>
             <div className="space-y-1.5">
               {channels.map((ch) => (
-                <div
-                  key={ch.id}
-                  className="flex items-center justify-between rounded-sm px-3 py-2 text-sm"
-                >
+                <div key={ch.id} className="flex items-center justify-between rounded-sm px-3 py-2 text-sm">
                   <div className="flex items-center gap-2">
-                    <span
-                      className="inline-block size-2 rounded-full"
-                      style={{ backgroundColor: ch.color }}
-                    />
+                    <span className="inline-block size-2 rounded-full" style={{ backgroundColor: ch.color }} />
                     <span className="font-medium">{ch.name}</span>
                   </div>
                   {ch.ready ? (
@@ -275,20 +252,12 @@ export function SetupChecklist() {
         {/* Superpowers */}
         {powers.length > 0 && (
           <section>
-            <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-              Superpowers
-            </h3>
+            <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Superpowers</h3>
             <div className="space-y-1.5">
               {powers.map((sp) => (
-                <div
-                  key={sp.id}
-                  className="flex items-center justify-between rounded-sm px-3 py-2 text-sm"
-                >
+                <div key={sp.id} className="flex items-center justify-between rounded-sm px-3 py-2 text-sm">
                   <div className="flex items-center gap-2">
-                    <span
-                      className="inline-block size-2 rounded-full"
-                      style={{ backgroundColor: sp.color }}
-                    />
+                    <span className="inline-block size-2 rounded-full" style={{ backgroundColor: sp.color }} />
                     <span className="font-medium">{sp.name}</span>
                   </div>
                   {sp.ready ? (
@@ -312,9 +281,7 @@ export function SetupChecklist() {
 
         {/* Credits */}
         <section>
-          <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            Credits
-          </h3>
+          <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Credits</h3>
           <div className="flex items-center gap-2 rounded-sm px-3 py-2 text-sm">
             <span className="font-medium">Balance</span>
             <Badge variant="secondary">{creditBalance ?? "$0.00"}</Badge>

package/src/components/onboarding/step-superpowers.tsx

@@ -53,10 +53,7 @@ export function StepSuperpowers({
   return (
     <div className="space-y-6">
       <div className="text-center space-y-2">
-        <div
-          className="inline-block font-mono text-xs tracking-[0.3em] text-terminal uppercase"
-          aria-hidden="true"
-        >
+        <div className="inline-block font-mono text-xs tracking-[0.3em] text-terminal uppercase" aria-hidden="true">
           STEP {stepNumber} {"//"} {stepCode}
         </div>
         <h2 className="text-2xl font-bold tracking-tight">Give your {productName()} superpowers</h2>

package/src/components/plugin-setup/setup-chat-panel.tsx

@@ -6,13 +6,7 @@ import { useEffect, useRef } from "react";
 import { ChatInput } from "@/components/chat/chat-input";
 import { ChatMessage } from "@/components/chat/chat-message";
 import { Button } from "@/components/ui/button";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import type { ChatMessage as ChatMessageType } from "@/lib/chat/types";
 
 interface SetupChatPanelProps {
@@ -73,9 +67,7 @@ export function SetupChatPanel({
         {/* Messages area */}
         <div className="flex-1 space-y-3 overflow-y-auto px-4 py-4">
           {messages.length === 0 && !isConnected && (
-            <p className="font-mono text-sm text-terminal/60 animate-pulse">
-              &gt; Initializing setup...
-            </p>
+            <p className="font-mono text-sm text-terminal/60 animate-pulse">&gt; Initializing setup...</p>
           )}
 
           <AnimatePresence initial={false}>
@@ -94,19 +86,13 @@ export function SetupChatPanel({
               >
                 {msg.role === "bot" ? (
                   <div className="flex gap-2">
-                    <span className="mt-0.5 font-mono text-sm text-terminal/40 select-none">
-                      &gt;
-                    </span>
+                    <span className="mt-0.5 font-mono text-sm text-terminal/40 select-none">&gt;</span>
                     <p className="font-mono text-sm leading-relaxed text-terminal">{msg.content}</p>
                   </div>
                 ) : msg.role === "event" ? (
                   <div className="flex gap-2">
-                    <span className="mt-0.5 font-mono text-sm text-destructive/60 select-none">
-                      !
-                    </span>
-                    <p className="font-mono text-sm leading-relaxed text-destructive">
-                      {msg.content}
-                    </p>
+                    <span className="mt-0.5 font-mono text-sm text-destructive/60 select-none">!</span>
+                    <p className="font-mono text-sm leading-relaxed text-destructive">{msg.content}</p>
                   </div>
                 ) : (
                   <ChatMessage message={msg} />
@@ -150,9 +136,7 @@ export function SetupChatPanel({
                 className="flex flex-col items-center justify-center gap-2 py-4"
               >
                 <CheckCircle2 className="h-8 w-8 text-terminal" />
-                <span className="font-mono text-sm uppercase tracking-wider text-terminal">
-                  Setup complete
-                </span>
+                <span className="font-mono text-sm uppercase tracking-wider text-terminal">Setup complete</span>
               </motion.div>
             )}
           </AnimatePresence>