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

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

@@ -5,22 +5,20 @@ import { CameraIcon, CheckIcon } from "lucide-react";
 import { type FormEvent, useCallback, useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
-import type { UserProfile } from "@/lib/api";
-import { changePassword, deleteAccount, getProfile, updateProfile, uploadAvatar } from "@/lib/api";
+import type { Instance, UserProfile } from "@/lib/api";
+import {
+  changePassword,
+  controlInstance,
+  deleteAccount,
+  getProfile,
+  listInstances,
+  updateProfile,
+  uploadAvatar,
+} from "@/lib/api";
 import { linkSocial, listAccounts, unlinkAccount } from "@/lib/auth-client";
 
 export default function ProfilePage() {
@@ -45,6 +43,9 @@ export default function ProfilePage() {
   const [changingPw, setChangingPw] = useState(false);
 
   const [deleteConfirm, setDeleteConfirm] = useState("");
+  const [resetConfirm, setResetConfirm] = useState("");
+  const [instances, setInstances] = useState<Instance[]>([]);
+  const [resetting, setResetting] = useState(false);
   const [uploading, setUploading] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const saveSuccessTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -67,15 +68,16 @@ export default function ProfilePage() {
       setEmail(p.email);
       try {
         const accounts = await listAccounts();
-        const providerIds = ((accounts.data ?? []) as { providerId: string }[]).map(
-          (a) => a.providerId,
-        );
+        const providerIds = ((accounts.data ?? []) as { providerId: string }[]).map((a) => a.providerId);
         const providers = new Set<string>(providerIds);
         setConnectedProviders(providers);
       } catch {
-        setConnectedProviders(
-          new Set(p.oauthConnections.filter((c) => c.connected).map((c) => c.provider)),
-        );
+        setConnectedProviders(new Set(p.oauthConnections.filter((c) => c.connected).map((c) => c.provider)));
+      }
+      try {
+        setInstances(await listInstances());
+      } catch {
+        // Non-fatal — instances may not be available
       }
     } catch {
       setLoadError(true);
@@ -176,11 +178,39 @@ export default function ProfilePage() {
     }
   }
 
+  async function handleResetInstance() {
+    setResetting(true);
+    setError(null);
+    try {
+      for (const inst of instances) {
+        try {
+          await controlInstance(inst.id, "destroy");
+        } catch {
+          // Instance may already be gone
+        }
+      }
+      window.location.href = "/dashboard";
+    } catch {
+      setError("Failed to reset instance. Please try again.");
+    } finally {
+      setResetting(false);
+    }
+  }
+
   async function handleDelete() {
     setError(null);
     try {
+      for (const inst of instances) {
+        try {
+          await controlInstance(inst.id, "destroy");
+        } catch {
+          // Instance may already be gone
+        }
+      }
+      // 2. Delete account (sessions, DB rows)
       await deleteAccount();
-      window.location.href = "/login";
+      // 3. Sign out and redirect to home
+      window.location.href = "/";
     } catch {
       setError("Failed to delete account. Please try again.");
     }
@@ -222,8 +252,8 @@ export default function ProfilePage() {
   return (
     <div className="max-w-2xl space-y-6">
       <div>
-        <h1 className="text-2xl font-bold tracking-tight">Profile</h1>
-        <p className="text-sm text-muted-foreground">Manage your account settings</p>
+        <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
+        <p className="text-sm text-muted-foreground">Manage your profile, security, and account</p>
       </div>
 
       <AnimatePresence>
@@ -254,11 +284,7 @@ export default function ProfilePage() {
             >
               {profile.avatarUrl ? (
                 // biome-ignore lint/performance/noImgElement: external avatar URL — domain not configured for next/image
-                <img
-                  src={profile.avatarUrl}
-                  alt={profile.name}
-                  className="size-full object-cover"
-                />
+                <img src={profile.avatarUrl} alt={profile.name} className="size-full object-cover" />
               ) : (
                 <span className="text-xl font-semibold text-muted-foreground">
                   {profile.name.charAt(0).toUpperCase()}
@@ -292,12 +318,7 @@ export default function ProfilePage() {
           <form onSubmit={handleSaveProfile} className="flex flex-col gap-4">
             <div className="flex flex-col gap-2">
               <Label htmlFor="profile-name">Display name</Label>
-              <Input
-                id="profile-name"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                required
-              />
+              <Input id="profile-name" value={name} onChange={(e) => setName(e.target.value)} required />
             </div>
             <div className="flex flex-col gap-2">
               <Label htmlFor="profile-email">Email</Label>
@@ -336,12 +357,7 @@ export default function ProfilePage() {
                     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>
                 )}
@@ -415,12 +431,7 @@ export default function ProfilePage() {
                     Changed
                   </motion.span>
                 ) : (
-                  <motion.span
-                    key="default"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                  >
+                  <motion.span key="default" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
                     {changingPw ? "Changing..." : "Change password"}
                   </motion.span>
                 )}
@@ -445,9 +456,7 @@ export default function ProfilePage() {
                   <Button
                     variant={connected ? "outline" : "default"}
                     size="sm"
-                    onClick={() =>
-                      connected ? handleOauthDisconnect(provider) : handleOauthConnect(provider)
-                    }
+                    onClick={() => (connected ? handleOauthDisconnect(provider) : handleOauthConnect(provider))}
                   >
                     {connected ? "Disconnect" : "Connect"}
                   </Button>
@@ -465,6 +474,53 @@ export default function ProfilePage() {
         <Separator className="flex-1 bg-destructive/30" />
       </div>
 
+      {instances.length > 0 && (
+        <Card className="border-destructive/50 bg-destructive/5">
+          <CardHeader>
+            <CardTitle className="text-destructive">Reset Instance</CardTitle>
+            <CardDescription>
+              Destroy all running instances and start fresh. Your account, credits, and settings are preserved.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {resetConfirm === "" ? (
+              <Button variant="destructive" onClick={() => setResetConfirm("pending")}>
+                Reset instance
+              </Button>
+            ) : (
+              <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 space-y-3">
+                <p className="text-sm text-destructive font-medium">
+                  This will permanently destroy{" "}
+                  {instances.length === 1 ? "your instance" : `all ${instances.length} instances`} and their data (agent
+                  history, issues, documents). Your account and credits are kept.
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Type <strong className="text-destructive">reset</strong> to confirm.
+                </p>
+                <Input
+                  placeholder="reset"
+                  value={resetConfirm === "pending" ? "" : resetConfirm}
+                  onChange={(e) => setResetConfirm(e.target.value)}
+                  autoFocus
+                />
+                <div className="flex gap-2">
+                  <Button variant="outline" onClick={() => setResetConfirm("")}>
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    disabled={resetConfirm !== "reset" || resetting}
+                    onClick={handleResetInstance}
+                  >
+                    {resetting ? "Destroying..." : "Confirm reset"}
+                  </Button>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
       <Card className="border-destructive/50 bg-destructive/5">
         <CardHeader>
           <CardTitle className="text-destructive">Delete Account</CardTitle>
@@ -472,38 +528,35 @@ export default function ProfilePage() {
             Permanently delete your account and all associated data. This action cannot be undone.
           </CardDescription>
         </CardHeader>
-        <CardContent>
-          <Dialog>
-            <DialogTrigger asChild>
-              <Button variant="destructive">Delete account</Button>
-            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Are you absolutely sure?</DialogTitle>
-                <DialogDescription>
-                  This will permanently delete your account, all instances, and data. Type{" "}
-                  <strong>delete my account</strong> to confirm.
-                </DialogDescription>
-              </DialogHeader>
+        <CardContent className="space-y-4">
+          {deleteConfirm === "" ? (
+            <Button variant="destructive" onClick={() => setDeleteConfirm("pending")}>
+              Delete account
+            </Button>
+          ) : (
+            <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 space-y-3">
+              <p className="text-sm text-destructive font-medium">
+                This will permanently delete your account, all instances, and data. This cannot be undone.
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Type <strong className="text-destructive">delete my account</strong> to confirm.
+              </p>
               <Input
                 placeholder="delete my account"
-                value={deleteConfirm}
+                value={deleteConfirm === "pending" ? "" : deleteConfirm}
                 onChange={(e) => setDeleteConfirm(e.target.value)}
+                autoFocus
               />
-              <DialogFooter>
-                <DialogClose asChild>
-                  <Button variant="outline">Cancel</Button>
-                </DialogClose>
-                <Button
-                  variant="destructive"
-                  disabled={deleteConfirm !== "delete my account"}
-                  onClick={handleDelete}
-                >
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setDeleteConfirm("")}>
+                  Cancel
+                </Button>
+                <Button variant="destructive" disabled={deleteConfirm !== "delete my account"} onClick={handleDelete}>
                   Delete permanently
                 </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+              </div>
+            </div>
+          )}
         </CardContent>
       </Card>
     </div>

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

@@ -21,22 +21,10 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-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 { useCapabilityMeta } from "@/hooks/use-capability-meta";
-import type {
-  CapabilityMetaEntry,
-  CapabilityMode,
-  CapabilityName,
-  CapabilitySetting,
-  ProviderKey,
-} from "@/lib/api";
+import type { CapabilityMetaEntry, CapabilityMode, CapabilityName, CapabilitySetting, ProviderKey } from "@/lib/api";
 import {
   getBillingInfo,
   getCreditBalance,
@@ -47,11 +35,7 @@ import {
   updateProviderModel,
 } from "@/lib/api";
 import { brandName } from "@/lib/brand-config";
-import {
-  listCapabilities,
-  testProviderKey as testCapabilityViaTrpc,
-  updateCapability,
-} from "@/lib/settings-api";
+import { listCapabilities, testProviderKey as testCapabilityViaTrpc, updateCapability } from "@/lib/settings-api";
 import { cn } from "@/lib/utils";
 
 // --- Helpers ---
@@ -193,10 +177,7 @@ export default function ProvidersPage() {
       setTestCapResult((prev) => ({ ...prev, [capability]: "fail" }));
     }
     setTestingCap(null);
-    testCapResultTimer.current = setTimeout(
-      () => setTestCapResult((prev) => ({ ...prev, [capability]: null })),
-      2000,
-    );
+    testCapResultTimer.current = setTimeout(() => setTestCapResult((prev) => ({ ...prev, [capability]: null })), 2000);
   }
 
   async function handleTest(id: string) {
@@ -214,10 +195,7 @@ export default function ProvidersPage() {
     const provs = await listProviderKeys();
     setProviders(provs);
     setTesting(null);
-    testResultTimer.current = setTimeout(
-      () => setTestResult((prev) => ({ ...prev, [id]: null })),
-      2000,
-    );
+    testResultTimer.current = setTimeout(() => setTestResult((prev) => ({ ...prev, [id]: null })), 2000);
   }
 
   async function handleRemove(id: string, providerName: string) {
@@ -279,8 +257,7 @@ export default function ProvidersPage() {
       <div>
         <h1 className="text-2xl font-bold tracking-tight">Provider Settings</h1>
         <p className="text-sm text-muted-foreground">
-          Choose {brandName()} Hosted or Bring Your Own Key for each capability. Changes take effect
-          immediately.
+          Choose {brandName()} Hosted or Bring Your Own Key for each capability. Changes take effect immediately.
         </p>
       </div>
 
@@ -329,10 +306,7 @@ export default function ProvidersPage() {
                   <RadioGroupItem value="hosted" id={`mode-${capName}-hosted`} className="mt-1" />
                   <div className="flex-1">
                     <div className="flex items-center gap-2">
-                      <Label
-                        htmlFor={`mode-${capName}-hosted`}
-                        className="text-sm font-medium cursor-pointer"
-                      >
+                      <Label htmlFor={`mode-${capName}-hosted`} className="text-sm font-medium cursor-pointer">
                         {brandName()} Hosted
                       </Label>
                       <Badge variant="outline">{meta.pricing}</Badge>
@@ -350,15 +324,10 @@ export default function ProvidersPage() {
                 >
                   <RadioGroupItem value="byok" id={`mode-${capName}-byok`} className="mt-1" />
                   <div className="flex-1">
-                    <Label
-                      htmlFor={`mode-${capName}-byok`}
-                      className="text-sm font-medium cursor-pointer"
-                    >
+                    <Label htmlFor={`mode-${capName}-byok`} className="text-sm font-medium cursor-pointer">
                       Bring Your Own Key
                     </Label>
-                    {cap?.provider && (
-                      <span className="ml-2 text-xs text-muted-foreground">({cap.provider})</span>
-                    )}
+                    {cap?.provider && <span className="ml-2 text-xs text-muted-foreground">({cap.provider})</span>}
                   </div>
                 </div>
               </RadioGroup>
@@ -375,21 +344,15 @@ export default function ProvidersPage() {
                       {cap?.maskedKey && (
                         <div className="flex items-center gap-2">
                           <code className="text-xs text-muted-foreground">{cap.maskedKey}</code>
-                          {cap.keyStatus && (
-                            <Badge variant={keyStatusVariant(cap.keyStatus)}>{cap.keyStatus}</Badge>
-                          )}
+                          {cap.keyStatus && <Badge variant={keyStatusVariant(cap.keyStatus)}>{cap.keyStatus}</Badge>}
                         </div>
                       )}
                       <div className="flex gap-2">
                         <Input
                           type="password"
-                          placeholder={
-                            cap?.maskedKey ? "Enter new key to replace" : "Enter your API key"
-                          }
+                          placeholder={cap?.maskedKey ? "Enter new key to replace" : "Enter your API key"}
                           value={byokKey}
-                          onChange={(e) =>
-                            setByokKeys((prev) => ({ ...prev, [capName]: e.target.value }))
-                          }
+                          onChange={(e) => setByokKeys((prev) => ({ ...prev, [capName]: e.target.value }))}
                           className="flex-1"
                           aria-label={`${meta.label} API key`}
                         />
@@ -433,11 +396,7 @@ export default function ProvidersPage() {
                         >
                           <AnimatePresence mode="wait">
                             {isTesting ? (
-                              <motion.span
-                                key="testing"
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                              >
+                              <motion.span key="testing" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
                                 Testing...
                               </motion.span>
                             ) : capTestResult === "success" ? (
@@ -461,11 +420,7 @@ export default function ProvidersPage() {
                                 Failed
                               </motion.span>
                             ) : (
-                              <motion.span
-                                key="idle"
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                              >
+                              <motion.span key="idle" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
                                 Test Key
                               </motion.span>
                             )}
@@ -494,8 +449,7 @@ export default function ProvidersPage() {
       <div className="border-t pt-8">
         <h2 className="text-xl font-bold tracking-tight">Provider Keys</h2>
         <p className="text-sm text-muted-foreground">
-          Manage your BYOK API keys directly. Keys are stored securely and never leave your
-          environment.
+          Manage your BYOK API keys directly. Keys are stored securely and never leave your environment.
         </p>
       </div>
 
@@ -516,9 +470,7 @@ export default function ProvidersPage() {
                 <CardTitle>{provider.provider}</CardTitle>
               </div>
               <Badge variant={providerKeyStatusVariant(provider.status)}>
-                {provider.status === "unchecked" && !provider.maskedKey
-                  ? "Not configured"
-                  : provider.status}
+                {provider.status === "unchecked" && !provider.maskedKey ? "Not configured" : provider.status}
               </Badge>
             </div>
             {provider.maskedKey && (
@@ -533,10 +485,7 @@ export default function ProvidersPage() {
               <>
                 <div className="flex flex-col gap-2">
                   <Label htmlFor={`model-${provider.id}`}>Default model</Label>
-                  <Select
-                    value={provider.defaultModel ?? ""}
-                    onValueChange={(v) => handleModelChange(provider.id, v)}
-                  >
+                  <Select value={provider.defaultModel ?? ""} onValueChange={(v) => handleModelChange(provider.id, v)}>
                     <SelectTrigger id={`model-${provider.id}`} className="w-full">
                       <SelectValue placeholder="Select a model" />
                     </SelectTrigger>
@@ -558,11 +507,7 @@ export default function ProvidersPage() {
                   >
                     <AnimatePresence mode="wait">
                       {testing === provider.id ? (
-                        <motion.span
-                          key="testing"
-                          initial={{ opacity: 0 }}
-                          animate={{ opacity: 1 }}
-                        >
+                        <motion.span key="testing" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
                           Testing...
                         </motion.span>
                       ) : testResult[provider.id] === "success" ? (
@@ -656,8 +601,8 @@ function BillingGateDialog({
               Enable {brandName()} Hosted for {meta.label}?
             </DialogTitle>
             <DialogDescription>
-              {brandName()} Hosted for {meta.label.toLowerCase()} costs {meta.pricing}. This will be
-              billed to your payment method on file.
+              {brandName()} Hosted for {meta.label.toLowerCase()} costs {meta.pricing}. This will be billed to your
+              payment method on file.
             </DialogDescription>
           </DialogHeader>
 
@@ -810,9 +755,7 @@ function RotateKeyDialog({ provider, onSaved }: { provider: ProviderKey; onSaved
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Rotate {provider.provider} Key</DialogTitle>
-          <DialogDescription>
-            Paste your new API key. The old key will be replaced after validation.
-          </DialogDescription>
+          <DialogDescription>Paste your new API key. The old key will be replaced after validation.</DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit} className="flex flex-col gap-4">
           <div className="flex flex-col gap-2">

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

@@ -18,22 +18,9 @@ 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 {
   createSecret,
@@ -141,9 +128,7 @@ export default function SecretsPage() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold tracking-tight">Secrets Vault</h1>
-          <p className="text-sm text-muted-foreground">
-            Manage encrypted credentials for plugins and integrations
-          </p>
+          <p className="text-sm text-muted-foreground">Manage encrypted credentials for plugins and integrations</p>
         </div>
         <CreateSecretDialog
           onCreated={(plaintextValue) => {
@@ -167,29 +152,18 @@ export default function SecretsPage() {
                   Your new secret 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">
-                    {revealedValue}
-                  </code>
+                  <code className="flex-1 rounded bg-muted px-3 py-2 text-sm font-mono break-all">{revealedValue}</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={() => setRevealedValue(null)}
-                >
+                <Button variant="ghost" size="sm" className="mt-2" onClick={() => setRevealedValue(null)}>
                   Dismiss
                 </Button>
               </CardContent>
@@ -280,9 +254,7 @@ export default function SecretsPage() {
                   key={secret.id}
                   secret={secret}
                   isAuditExpanded={expandedAudit === secret.id}
-                  onToggleAudit={() =>
-                    setExpandedAudit(expandedAudit === secret.id ? null : secret.id)
-                  }
+                  onToggleAudit={() => setExpandedAudit(expandedAudit === secret.id ? null : secret.id)}
                   onRotate={() => handleRotate(secret.id)}
                   onDelete={() => handleDelete(secret.id)}
                 />
@@ -332,12 +304,7 @@ function SecretRow({
           <div className="flex items-center gap-1">
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label="Access log"
-                  onClick={onToggleAudit}
-                >
+                <Button variant="ghost" size="icon-sm" aria-label="Access log" onClick={onToggleAudit}>
                   <HistoryIcon className="size-4" />
                 </Button>
               </TooltipTrigger>
@@ -399,9 +366,7 @@ function AuditPanel({ secretId }: { secretId: string }) {
 
   return (
     <div className="px-4 py-3 space-y-2">
-      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-        Access Log
-      </p>
+      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Access Log</p>
       {loading ? (
         <div className="space-y-2">
           {Array.from({ length: 3 }, (_, i) => `audit-sk-${i}`).map((id) => (
@@ -409,9 +374,7 @@ function AuditPanel({ secretId }: { secretId: string }) {
           ))}
         </div>
       ) : unavailable ? (
-        <p className="py-4 text-center text-xs text-muted-foreground">
-          Audit log not available yet.
-        </p>
+        <p className="py-4 text-center text-xs text-muted-foreground">Audit log not available yet.</p>
       ) : entries.length === 0 ? (
         <p className="py-4 text-center text-xs text-muted-foreground">No access recorded yet.</p>
       ) : (
@@ -580,8 +543,7 @@ function RotateDialog({ secretName, onRotate }: { secretName: string; onRotate:
         <DialogHeader>
           <DialogTitle>Rotate Secret</DialogTitle>
           <DialogDescription>
-            Generate a new value for <strong>{secretName}</strong>. The current value will be
-            immediately invalidated.
+            Generate a new value for <strong>{secretName}</strong>. The current value will be immediately invalidated.
           </DialogDescription>
         </DialogHeader>
         <div className="rounded-sm border border-chart-3/20 bg-chart-3/10 px-3 py-2 text-sm text-chart-3">
@@ -606,13 +568,7 @@ function RotateDialog({ secretName, onRotate }: { secretName: string; onRotate:
   );
 }
 
-function DeleteSecretDialog({
-  secretName,
-  onDelete,
-}: {
-  secretName: string;
-  onDelete: () => void;
-}) {
+function DeleteSecretDialog({ secretName, onDelete }: { secretName: string; onDelete: () => void }) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -631,8 +587,7 @@ function DeleteSecretDialog({
         <DialogHeader>
           <DialogTitle>Delete Secret</DialogTitle>
           <DialogDescription>
-            Are you sure you want to delete <strong>{secretName}</strong>? This action cannot be
-            undone.
+            Are you sure you want to delete <strong>{secretName}</strong>? This action cannot be undone.
           </DialogDescription>
         </DialogHeader>
         <div className="rounded-sm border border-destructive/20 bg-destructive/10 px-3 py-2 text-sm text-destructive">