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

package/src/app/(dashboard)/settings/api-keys/page.tsx

@@ -19,31 +19,11 @@ import {
 } from "@/components/ui/dialog";
 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 { 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 { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import {
-  createApiKey,
-  type Instance,
-  listApiKeys,
-  listInstances,
-  type PlatformApiKey,
-  revokeApiKey,
-} from "@/lib/api";
+import { createApiKey, type Instance, listApiKeys, listInstances, type PlatformApiKey, revokeApiKey } from "@/lib/api";
 
 function formatDate(iso: string | null): string {
   if (!iso) return "Never";
@@ -111,9 +91,7 @@ export default function ApiKeysPage() {
       <div className="max-w-3xl space-y-6">
         <div>
           <h1 className="text-2xl font-bold tracking-tight">API Keys</h1>
-          <p className="text-sm text-muted-foreground">
-            Generate and manage platform API keys for programmatic access
-          </p>
+          <p className="text-sm text-muted-foreground">Generate and manage platform API keys for programmatic access</p>
         </div>
         <div className="flex h-40 flex-col items-center justify-center gap-3 text-muted-foreground">
           <p className="text-sm text-destructive">Failed to load API keys.</p>
@@ -130,9 +108,7 @@ export default function ApiKeysPage() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold tracking-tight">API Keys</h1>
-          <p className="text-sm text-muted-foreground">
-            Generate and manage platform API keys for programmatic access
-          </p>
+          <p className="text-sm text-muted-foreground">Generate and manage platform API keys for programmatic access</p>
         </div>
         <CreateKeyDialog
           onCreated={(secret) => {
@@ -169,29 +145,18 @@ export default function ApiKeysPage() {
                   Your new API key has been created. Copy it now -- it will not be shown again.
                 </p>
                 <div className="flex items-center gap-2">
-                  <code className="flex-1 rounded bg-muted px-3 py-2 text-sm font-mono break-all">
-                    {newSecret}
-                  </code>
+                  <code className="flex-1 rounded bg-muted px-3 py-2 text-sm font-mono break-all">{newSecret}</code>
                   <Tooltip open={copied}>
                     <TooltipTrigger asChild>
                       <Button variant="outline" size="sm" onClick={handleCopy}>
-                        {copied ? (
-                          <CheckIcon className="size-4" />
-                        ) : (
-                          <CopyIcon className="size-4" />
-                        )}
+                        {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
                         {copied ? "Copied" : "Copy"}
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent>Copied!</TooltipContent>
                   </Tooltip>
                 </div>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="mt-2"
-                  onClick={() => setNewSecret(null)}
-                >
+                <Button variant="ghost" size="sm" className="mt-2" onClick={() => setNewSecret(null)}>
                   Dismiss
                 </Button>
               </CardContent>
@@ -274,15 +239,9 @@ export default function ApiKeysPage() {
                   <TableCell>
                     <Badge variant="secondary">{key.scope}</Badge>
                   </TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {formatDate(key.createdAt)}
-                  </TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {formatDate(key.lastUsedAt)}
-                  </TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {formatDate(key.expiresAt)}
-                  </TableCell>
+                  <TableCell className="text-muted-foreground">{formatDate(key.createdAt)}</TableCell>
+                  <TableCell className="text-muted-foreground">{formatDate(key.lastUsedAt)}</TableCell>
+                  <TableCell className="text-muted-foreground">{formatDate(key.expiresAt)}</TableCell>
                   <TableCell>
                     <RevokeDialog keyName={key.name} onRevoke={() => handleRevoke(key.id)} />
                   </TableCell>
@@ -364,9 +323,7 @@ function CreateKeyDialog({ onCreated }: { onCreated: (secret: string) => void })
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Generate API Key</DialogTitle>
-          <DialogDescription>
-            Create a new API key with specific scope and expiration.
-          </DialogDescription>
+          <DialogDescription>Create a new API key with specific scope and expiration.</DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit} className="flex flex-col gap-4">
           <div className="flex flex-col gap-2">
@@ -411,9 +368,7 @@ function CreateKeyDialog({ onCreated }: { onCreated: (secret: string) => void })
                   <p className="text-sm text-destructive">Failed to load instances.</p>
                 ) : instances.length === 0 ? (
                   <div className="rounded-md border bg-muted/30 p-3 py-6 text-center">
-                    <p className="text-sm text-muted-foreground">
-                      No bot instances found. Deploy a bot first.
-                    </p>
+                    <p className="text-sm text-muted-foreground">No bot instances found. Deploy a bot first.</p>
                   </div>
                 ) : (
                   <>
@@ -506,8 +461,8 @@ function RevokeDialog({ keyName, onRevoke }: { keyName: string; onRevoke: () =>
         <DialogHeader>
           <DialogTitle>Revoke API Key</DialogTitle>
           <DialogDescription>
-            Are you sure you want to revoke <strong>{keyName}</strong>? Any applications using this
-            key will immediately lose access.
+            Are you sure you want to revoke <strong>{keyName}</strong>? Any applications using this key will immediately
+            lose access.
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>

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

@@ -118,11 +118,7 @@ export default function BrainSettingsPage() {
   }
 
   if (loading) {
-    return (
-      <div className="flex h-40 items-center justify-center text-muted-foreground">
-        Loading model settings...
-      </div>
-    );
+    return <div className="flex h-40 items-center justify-center text-muted-foreground">Loading model settings...</div>;
   }
 
   const currentModel = allModels.find((m) => m.id === selection?.modelId);
@@ -166,10 +162,7 @@ export default function BrainSettingsPage() {
                 <p className="font-medium">{currentModel.name}</p>
                 <p className="text-sm text-muted-foreground">{currentModel.description}</p>
                 <div className="mt-2 flex items-center gap-2">
-                  <Badge
-                    variant={categoryBadgeVariant(currentModel.category)}
-                    className="text-[10px]"
-                  >
+                  <Badge variant={categoryBadgeVariant(currentModel.category)} className="text-[10px]">
                     {currentModel.category}
                   </Badge>
                   <span className="text-xs text-muted-foreground">{currentModel.provider}</span>
@@ -183,18 +176,10 @@ export default function BrainSettingsPage() {
 
       {/* View mode toggle */}
       <div className="flex gap-2">
-        <Button
-          variant={viewMode === "models" ? "default" : "outline"}
-          size="sm"
-          onClick={() => setViewMode("models")}
-        >
+        <Button variant={viewMode === "models" ? "default" : "outline"} size="sm" onClick={() => setViewMode("models")}>
           Pick a model (Hosted)
         </Button>
-        <Button
-          variant={viewMode === "byok" ? "default" : "outline"}
-          size="sm"
-          onClick={() => setViewMode("byok")}
-        >
+        <Button variant={viewMode === "byok" ? "default" : "outline"} size="sm" onClick={() => setViewMode("byok")}>
           Bring Your Own Key
         </Button>
       </div>
@@ -294,10 +279,7 @@ export default function BrainSettingsPage() {
                       <CardContent>
                         <p className="text-xs text-muted-foreground">{model.description}</p>
                         <div className="mt-2 flex flex-wrap items-center gap-1">
-                          <Badge
-                            variant={categoryBadgeVariant(model.category)}
-                            className="text-[10px]"
-                          >
+                          <Badge variant={categoryBadgeVariant(model.category)} className="text-[10px]">
                             {model.category}
                           </Badge>
                           <span className="text-xs text-muted-foreground">{model.provider}</span>
@@ -318,8 +300,8 @@ export default function BrainSettingsPage() {
       {viewMode === "byok" && (
         <div className="space-y-6">
           <p className="text-sm text-muted-foreground">
-            Bring your own provider key and bypass credits. {productName()} takes nothing when using
-            BYOK providers -- you pay the provider directly.
+            Bring your own provider key and bypass credits. {productName()} takes nothing when using BYOK providers --
+            you pay the provider directly.
           </p>
 
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -328,9 +310,7 @@ export default function BrainSettingsPage() {
                 key={provider.id}
                 className={cn(
                   "transition-all",
-                  byokProvider === provider.id
-                    ? "border-primary bg-primary/5"
-                    : "hover:border-primary/30",
+                  byokProvider === provider.id ? "border-primary bg-primary/5" : "hover:border-primary/30",
                 )}
               >
                 <CardHeader>
@@ -352,9 +332,7 @@ export default function BrainSettingsPage() {
                     variant="outline"
                     size="sm"
                     className="w-full"
-                    onClick={() =>
-                      setByokProvider(byokProvider === provider.id ? null : provider.id)
-                    }
+                    onClick={() => setByokProvider(byokProvider === provider.id ? null : provider.id)}
                   >
                     {byokProvider === provider.id ? "Cancel" : "Add key"}
                   </Button>

package/src/app/(dashboard)/settings/error.tsx

@@ -8,13 +8,7 @@ import { logger } from "@/lib/logger";
 
 const log = logger("error-boundary:settings");
 
-export default function SettingsError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
+export default function SettingsError({ 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 SettingsError({
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
-          <p className="text-muted-foreground">
-            Something went wrong loading settings. This may be a temporary issue.
-          </p>
+          <p className="text-muted-foreground">Something went wrong loading settings. This may be a temporary issue.</p>
           {isDev && (
             <Button
               type="button"

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

@@ -146,9 +146,7 @@ export default function NotificationsPage() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-lg font-semibold">Notifications</h1>
-          <p className="text-sm text-muted-foreground">
-            Control which system emails you receive from {brandName()}.
-          </p>
+          <p className="text-sm text-muted-foreground">Control which system emails you receive from {brandName()}.</p>
         </div>
 
         <AnimatePresence>
@@ -199,9 +197,7 @@ export default function NotificationsPage() {
             <Card key={group.title}>
               <CardHeader>
                 <CardTitle className="text-sm font-medium">{group.title}</CardTitle>
-                <CardDescription className="sr-only">
-                  {group.title} notification settings
-                </CardDescription>
+                <CardDescription className="sr-only">{group.title} notification settings</CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
                 {group.items.map((item) => (

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

@@ -19,23 +19,10 @@ import {
 } from "@/components/ui/dialog";
 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 { 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 { useIsAdminOrOwner } from "@/hooks/use-my-org-role";
 import type { Organization, OrgMember } from "@/lib/api";
 import {
@@ -231,12 +218,7 @@ export default function OrgPage() {
             <form onSubmit={handleSave} className="flex flex-col gap-4">
               <div className="flex flex-col gap-2">
                 <Label htmlFor="org-name">Organization name</Label>
-                <Input
-                  id="org-name"
-                  value={orgName}
-                  onChange={(e) => setOrgName(e.target.value)}
-                  required
-                />
+                <Input id="org-name" value={orgName} onChange={(e) => setOrgName(e.target.value)} required />
               </div>
               <div className="flex flex-col gap-2">
                 <Label htmlFor="org-slug">Slug</Label>
@@ -284,12 +266,7 @@ export default function OrgPage() {
                       Saved
                     </motion.span>
                   ) : (
-                    <motion.span
-                      key="save"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                    >
+                    <motion.span key="save" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
                       {saving ? "Saving..." : "Save changes"}
                     </motion.span>
                   )}
@@ -385,14 +362,8 @@ export default function OrgPage() {
                           currentRole={member.role}
                           onChangeRole={(role) => handleChangeRole(member.userId, role)}
                         />
-                        <TransferDialog
-                          memberName={member.name}
-                          onTransfer={() => handleTransfer(member.userId)}
-                        />
-                        <RemoveMemberDialog
-                          memberName={member.name}
-                          onRemove={() => handleRemove(member.userId)}
-                        />
+                        <TransferDialog memberName={member.name} onTransfer={() => handleTransfer(member.userId)} />
+                        <RemoveMemberDialog memberName={member.name} onRemove={() => handleRemove(member.userId)} />
                       </div>
                     )}
                   </TableCell>
@@ -427,9 +398,7 @@ export default function OrgPage() {
                   <TableRow key={invite.id}>
                     <TableCell className="font-medium">{invite.email}</TableCell>
                     <TableCell>
-                      <Badge variant={invite.role === "admin" ? "default" : "outline"}>
-                        {invite.role}
-                      </Badge>
+                      <Badge variant={invite.role === "admin" ? "default" : "outline"}>{invite.role}</Badge>
                     </TableCell>
                     <TableCell className="text-muted-foreground">
                       {new Date(invite.expiresAt).toLocaleDateString("en-US", {
@@ -554,13 +523,7 @@ function InviteDialog({ orgId, onInvited }: { orgId: string; onInvited: () => vo
   );
 }
 
-function RemoveMemberDialog({
-  memberName,
-  onRemove,
-}: {
-  memberName: string;
-  onRemove: () => void;
-}) {
+function RemoveMemberDialog({ memberName, onRemove }: { memberName: string; onRemove: () => void }) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -574,8 +537,8 @@ function RemoveMemberDialog({
         <DialogHeader>
           <DialogTitle>Remove Member</DialogTitle>
           <DialogDescription>
-            Are you sure you want to remove <strong>{memberName}</strong> from the organization?
-            They will lose access immediately.
+            Are you sure you want to remove <strong>{memberName}</strong> from the organization? They will lose access
+            immediately.
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
@@ -597,13 +560,7 @@ function RemoveMemberDialog({
   );
 }
 
-function TransferDialog({
-  memberName,
-  onTransfer,
-}: {
-  memberName: string;
-  onTransfer: () => void;
-}) {
+function TransferDialog({ memberName, onTransfer }: { memberName: string; onTransfer: () => void }) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -617,8 +574,8 @@ function TransferDialog({
         <DialogHeader>
           <DialogTitle>Transfer Ownership</DialogTitle>
           <DialogDescription>
-            Transfer organization ownership to <strong>{memberName}</strong>? You will become an
-            admin. This action cannot be undone.
+            Transfer organization ownership to <strong>{memberName}</strong>? You will become an admin. This action
+            cannot be undone.
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>

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

@@ -0,0 +1 @@
+export { default } from "./profile/page";