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

package/src/components/admin/bulk-suspend-dialog.tsx

@@ -61,17 +61,14 @@ function BulkSuspendDialog({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <ShieldBan className="size-5 text-amber-500" />
-            <span className="text-amber-500">Suspend</span>{" "}
-            <span className="font-semibold">{selectedCount}</span> accounts
+            <span className="text-amber-500">Suspend</span> <span className="font-semibold">{selectedCount}</span>{" "}
+            accounts
           </DialogTitle>
-          <DialogDescription>
-            Suspended accounts will immediately lose platform access.
-          </DialogDescription>
+          <DialogDescription>Suspended accounts will immediately lose platform access.</DialogDescription>
         </DialogHeader>
 
         <Banner variant="warning">
-          This will immediately prevent these accounts from using the platform. Users will be locked
-          out.
+          This will immediately prevent these accounts from using the platform. Users will be locked out.
         </Banner>
 
         <div className="flex flex-col gap-4">
@@ -113,11 +110,7 @@ function BulkSuspendDialog({
           <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isLoading}>
             Cancel
           </Button>
-          <Button
-            variant="destructive"
-            onClick={handleConfirm}
-            disabled={!reason.trim() || isLoading}
-          >
+          <Button variant="destructive" onClick={handleConfirm} disabled={!reason.trim() || isLoading}>
             Suspend {selectedCount} accounts
           </Button>
         </DialogFooter>

package/src/components/admin/bulk-undo-toast.tsx

@@ -59,8 +59,7 @@ function BulkUndoToast({
 
   const progressPercent = (remainingMs / windowMs) * 100;
 
-  const barColor =
-    remainingMs > 180_000 ? "bg-terminal" : remainingMs > 60_000 ? "bg-amber-500" : "bg-red-500";
+  const barColor = remainingMs > 180_000 ? "bg-terminal" : remainingMs > 60_000 ? "bg-amber-500" : "bg-red-500";
 
   return (
     <AnimatePresence>

package/src/components/admin/compliance-dashboard.tsx

@@ -14,23 +14,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 { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -106,8 +93,7 @@ function complianceActionBadgeClasses(action: string): string {
     return "bg-destructive/15 text-red-400 border border-destructive/20";
   if (action.includes("trigger_export") || action.includes("complete_export"))
     return "bg-terminal/15 text-terminal border border-terminal/20";
-  if (action.includes("policy_update"))
-    return "bg-amber-500/15 text-amber-400 border border-amber-500/20";
+  if (action.includes("policy_update")) return "bg-amber-500/15 text-amber-400 border border-amber-500/20";
   return "bg-secondary text-muted-foreground border border-border";
 }
 
@@ -202,9 +188,7 @@ function TriggerDialog({
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle className="text-base font-semibold uppercase tracking-wider">
-            {title}
-          </DialogTitle>
+          <DialogTitle className="text-base font-semibold uppercase tracking-wider">{title}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
         <div className="space-y-3">
@@ -270,12 +254,7 @@ function Pagination({
         >
           Previous
         </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          disabled={!hasMore}
-          onClick={() => onNavigate(offset + PAGE_SIZE)}
-        >
+        <Button variant="ghost" size="sm" disabled={!hasMore} onClick={() => onNavigate(offset + PAGE_SIZE)}>
           Next
         </Button>
         <Button
@@ -417,8 +396,8 @@ function DeletionRequestsTab() {
             <span className="animate-ellipsis" />
           </p>
           <p className="mt-2 text-xs text-muted-foreground">
-            The admin.complianceDeletionRequests procedure is not yet available. This section will
-            activate automatically once deployed.
+            The admin.complianceDeletionRequests procedure is not yet available. This section will activate
+            automatically once deployed.
           </p>
         </div>
         <TriggerDialog
@@ -485,27 +464,15 @@ function DeletionRequestsTab() {
         <Table>
           <TableHeader>
             <TableRow className="bg-secondary crt-scanlines">
-              <TableHead className="text-xs font-medium uppercase tracking-wider w-[140px]">
-                Tenant ID
-              </TableHead>
-              <TableHead className="text-xs font-medium uppercase tracking-wider">
-                Requested By
-              </TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider w-[140px]">Tenant ID</TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider">Requested By</TableHead>
               <TableHead className="text-xs font-medium uppercase tracking-wider">Status</TableHead>
-              <TableHead className="text-xs font-medium uppercase tracking-wider">
-                Delete After
-              </TableHead>
-              <TableHead className="text-xs font-medium uppercase tracking-wider">
-                Created
-              </TableHead>
-              <TableHead className="text-xs font-medium uppercase tracking-wider w-[80px]">
-                Actions
-              </TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider">Delete After</TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider">Created</TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider w-[80px]">Actions</TableHead>
             </TableRow>
           </TableHeader>
-          <TableBody
-            className={cn("transition-opacity duration-150", loading && data && "opacity-60")}
-          >
+          <TableBody className={cn("transition-opacity duration-150", loading && data && "opacity-60")}>
             {loading && !data ? (
               <SkeletonRows cols={6} />
             ) : filteredRequests.length === 0 && !loading ? (
@@ -697,8 +664,8 @@ function DataExportsTab() {
             <span className="animate-ellipsis" />
           </p>
           <p className="mt-2 text-xs text-muted-foreground">
-            The admin.complianceExportRequests procedure is not yet available. This section will
-            activate automatically once deployed.
+            The admin.complianceExportRequests procedure is not yet available. This section will activate automatically
+            once deployed.
           </p>
         </div>
         <TriggerDialog
@@ -765,25 +732,15 @@ function DataExportsTab() {
         <Table>
           <TableHeader>
             <TableRow className="bg-secondary crt-scanlines">
-              <TableHead className="text-xs font-medium uppercase tracking-wider w-[140px]">
-                Tenant ID
-              </TableHead>
-              <TableHead className="text-xs font-medium uppercase tracking-wider">
-                Requested By
-              </TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider w-[140px]">Tenant ID</TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider">Requested By</TableHead>
               <TableHead className="text-xs font-medium uppercase tracking-wider">Status</TableHead>
               <TableHead className="text-xs font-medium uppercase tracking-wider">Format</TableHead>
-              <TableHead className="text-xs font-medium uppercase tracking-wider">
-                Created
-              </TableHead>
-              <TableHead className="text-xs font-medium uppercase tracking-wider w-[80px]">
-                Actions
-              </TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider">Created</TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider w-[80px]">Actions</TableHead>
             </TableRow>
           </TableHeader>
-          <TableBody
-            className={cn("transition-opacity duration-150", loading && data && "opacity-60")}
-          >
+          <TableBody className={cn("transition-opacity duration-150", loading && data && "opacity-60")}>
             {loading && !data ? (
               <SkeletonRows cols={6} />
             ) : filteredRequests.length === 0 && !loading ? (
@@ -882,9 +839,7 @@ function ComplianceAuditTab() {
       setLoadError(false);
       try {
         const since =
-          dateRange === "all"
-            ? undefined
-            : new Date(Date.now() - Number(dateRange) * 86400000).toISOString();
+          dateRange === "all" ? undefined : new Date(Date.now() - Number(dateRange) * 86400000).toISOString();
         const result = await fetchAuditLog({
           limit: PAGE_SIZE,
           offset: newOffset,
@@ -976,21 +931,13 @@ function ComplianceAuditTab() {
         <Table>
           <TableHeader>
             <TableRow className="bg-secondary crt-scanlines">
-              <TableHead className="text-xs font-medium uppercase tracking-wider w-[100px]">
-                Time
-              </TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider w-[100px]">Time</TableHead>
               <TableHead className="text-xs font-medium uppercase tracking-wider">Action</TableHead>
-              <TableHead className="text-xs font-medium uppercase tracking-wider">
-                Resource
-              </TableHead>
-              <TableHead className="text-xs font-medium uppercase tracking-wider">
-                Details
-              </TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider">Resource</TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider">Details</TableHead>
             </TableRow>
           </TableHeader>
-          <TableBody
-            className={cn("transition-opacity duration-150", loading && data && "opacity-60")}
-          >
+          <TableBody className={cn("transition-opacity duration-150", loading && data && "opacity-60")}>
             {loading && !data ? (
               <SkeletonRows cols={4} rows={8} />
             ) : filteredEvents.length === 0 && !loading ? (
@@ -1017,12 +964,8 @@ function ComplianceAuditTab() {
                     </span>
                   </TableCell>
                   <TableCell className="text-sm">
-                    <span className="text-xs uppercase tracking-wide text-muted-foreground">
-                      {event.resourceType}
-                    </span>{" "}
-                    <span className="font-mono text-xs">
-                      {event.resourceName ?? event.resourceId}
-                    </span>
+                    <span className="text-xs uppercase tracking-wide text-muted-foreground">{event.resourceType}</span>{" "}
+                    <span className="font-mono text-xs">{event.resourceName ?? event.resourceId}</span>
                   </TableCell>
                   <TableCell className="text-xs text-muted-foreground max-w-[300px] truncate">
                     {event.details ?? "\u2014"}
@@ -1034,14 +977,7 @@ function ComplianceAuditTab() {
         </Table>
       </div>
 
-      {data && (
-        <Pagination
-          offset={offset}
-          total={data.total}
-          hasMore={data.hasMore}
-          onNavigate={(o) => load(o)}
-        />
-      )}
+      {data && <Pagination offset={offset} total={data.total} hasMore={data.hasMore} onNavigate={(o) => load(o)} />}
     </div>
   );
 }
@@ -1098,9 +1034,7 @@ function EditRetentionPolicyDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle className="text-base font-semibold uppercase tracking-wider">
-            Edit Retention Policy
-          </DialogTitle>
+          <DialogTitle className="text-base font-semibold uppercase tracking-wider">Edit Retention Policy</DialogTitle>
           <DialogDescription>Update retention settings for {policy.dataType}</DialogDescription>
         </DialogHeader>
         <div className="space-y-4 py-2">
@@ -1215,9 +1149,7 @@ function RetentionPoliciesTab() {
           key={policy.dataType}
           className="rounded-sm border border-terminal/10 bg-card p-4 transition-colors duration-150 hover:border-terminal/20"
         >
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-foreground">
-            {policy.dataType}
-          </h3>
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-foreground">{policy.dataType}</h3>
           <dl className="mt-3 space-y-1.5 text-xs font-mono text-muted-foreground">
             <div className="flex justify-between">
               <dt>Retention period</dt>
@@ -1271,9 +1203,7 @@ function RetentionPoliciesTab() {
             if (!open) setEditingPolicy(null);
           }}
           onSaved={(updated) => {
-            setPolicies((prev) =>
-              prev ? prev.map((p) => (p.dataType === updated.dataType ? updated : p)) : prev,
-            );
+            setPolicies((prev) => (prev ? prev.map((p) => (p.dataType === updated.dataType ? updated : p)) : prev));
             setEditingPolicy(null);
           }}
         />

package/src/components/admin/gpu-dashboard.tsx

@@ -73,9 +73,7 @@ function KpiCard({ label, value, subtext, valueClassName, loading, index }: KpiC
       {loading ? (
         <div className="h-8 w-24 bg-muted animate-pulse rounded-sm" />
       ) : (
-        <div className={cn("text-2xl font-bold tabular-nums", valueClassName ?? "text-foreground")}>
-          {value}
-        </div>
+        <div className={cn("text-2xl font-bold tabular-nums", valueClassName ?? "text-foreground")}>{value}</div>
       )}
       {subtext && <div className="text-xs text-muted-foreground mt-1">{subtext}</div>}
     </motion.div>
@@ -122,9 +120,7 @@ function ProvisionForm({ regions, sizes, onProvision, onCancel }: ProvisionFormP
       transition={{ duration: 0.2 }}
       className="mx-6 mb-4 bg-card border border-terminal/20 rounded-sm p-4"
     >
-      <div className="text-xs uppercase tracking-widest text-muted-foreground mb-3">
-        Provision New GPU Node
-      </div>
+      <div className="text-xs uppercase tracking-widest text-muted-foreground mb-3">Provision New GPU Node</div>
       <form onSubmit={handleSubmit} className="grid grid-cols-4 gap-3 items-end">
         <div>
           <label htmlFor="gpu-name" className="text-xs text-muted-foreground block mb-1">
@@ -143,12 +139,7 @@ function ProvisionForm({ regions, sizes, onProvision, onCancel }: ProvisionFormP
           <label htmlFor="gpu-region" className="text-xs text-muted-foreground block mb-1">
             Region
           </label>
-          <select
-            id="gpu-region"
-            className={inputCls}
-            value={region}
-            onChange={(e) => setRegion(e.target.value)}
-          >
+          <select id="gpu-region" className={inputCls} value={region} onChange={(e) => setRegion(e.target.value)}>
             {regions.map((r) => (
               <option key={r.slug} value={r.slug} disabled={!r.available}>
                 {r.name}
@@ -160,12 +151,7 @@ function ProvisionForm({ regions, sizes, onProvision, onCancel }: ProvisionFormP
           <label htmlFor="gpu-size" className="text-xs text-muted-foreground block mb-1">
             Size
           </label>
-          <select
-            id="gpu-size"
-            className={inputCls}
-            value={size}
-            onChange={(e) => setSize(e.target.value)}
-          >
+          <select id="gpu-size" className={inputCls} value={size} onChange={(e) => setSize(e.target.value)}>
             {sizes.map((s) => (
               <option key={s.slug} value={s.slug}>
                 {s.name} — ${s.priceMonthly}/mo
@@ -202,11 +188,7 @@ export function GpuDashboard() {
     setLoading(true);
     setError(null);
     try {
-      const [nodeList, regionList, sizeList] = await Promise.all([
-        listGpuNodes(),
-        listGpuRegions(),
-        listGpuSizes(),
-      ]);
+      const [nodeList, regionList, sizeList] = await Promise.all([listGpuNodes(), listGpuRegions(), listGpuSizes()]);
       setNodes(nodeList);
       setRegions(regionList);
       setSizes(sizeList);
@@ -269,18 +251,13 @@ export function GpuDashboard() {
   // KPI computations
   const runningNodes = nodes.filter((n) => n.status === "running");
   const errorNodes = nodes.filter((n) => n.status === "error");
-  const utilizationValues = runningNodes
-    .filter((n) => n.utilization != null)
-    .map((n) => n.utilization as number);
+  const utilizationValues = runningNodes.filter((n) => n.utilization != null).map((n) => n.utilization as number);
   const avgUtilization =
-    utilizationValues.length > 0
-      ? utilizationValues.reduce((a, b) => a + b, 0) / utilizationValues.length
-      : null;
+    utilizationValues.length > 0 ? utilizationValues.reduce((a, b) => a + b, 0) / utilizationValues.length : null;
   const tempValues = runningNodes
     .filter((n) => n.temperatureCelsius != null)
     .map((n) => n.temperatureCelsius as number);
-  const avgTemp =
-    tempValues.length > 0 ? tempValues.reduce((a, b) => a + b, 0) / tempValues.length : null;
+  const avgTemp = tempValues.length > 0 ? tempValues.reduce((a, b) => a + b, 0) / tempValues.length : null;
 
   return (
     <div className="space-y-4 max-w-7xl mx-auto">
@@ -301,12 +278,7 @@ export function GpuDashboard() {
             <RefreshCw size={12} className={loading ? "animate-spin" : ""} />
             Refresh
           </Button>
-          <Button
-            type="button"
-            size="xs"
-            onClick={() => setShowProvision((v) => !v)}
-            className="font-mono"
-          >
+          <Button type="button" size="xs" onClick={() => setShowProvision((v) => !v)} className="font-mono">
             <Zap size={12} />
             Provision Node
           </Button>
@@ -323,12 +295,7 @@ export function GpuDashboard() {
 
       {/* KPI Cards */}
       <div className="grid grid-cols-2 xl:grid-cols-4 gap-3 px-6">
-        <KpiCard
-          index={0}
-          label="Total Nodes"
-          value={loading ? "" : String(nodes.length)}
-          loading={loading}
-        />
+        <KpiCard index={0} label="Total Nodes" value={loading ? "" : String(nodes.length)} loading={loading} />
         <KpiCard
           index={1}
           label="Running"
@@ -340,9 +307,7 @@ export function GpuDashboard() {
           index={2}
           label="Avg Utilization"
           value={loading ? "" : avgUtilization != null ? `${avgUtilization.toFixed(1)}%` : "—"}
-          valueClassName={
-            avgUtilization != null && avgUtilization > 85 ? "text-amber-400" : "text-foreground"
-          }
+          valueClassName={avgUtilization != null && avgUtilization > 85 ? "text-amber-400" : "text-foreground"}
           subtext="running nodes"
           loading={loading}
         />
@@ -380,9 +345,7 @@ export function GpuDashboard() {
         className="mx-6 bg-card border border-border rounded-sm"
       >
         <div className="px-4 py-3 border-b border-border">
-          <div className="text-xs uppercase tracking-widest text-muted-foreground">
-            GPU Inventory
-          </div>
+          <div className="text-xs uppercase tracking-widest text-muted-foreground">GPU Inventory</div>
         </div>
 
         {loading ? (
@@ -399,9 +362,7 @@ export function GpuDashboard() {
             ))}
           </div>
         ) : nodes.length === 0 ? (
-          <div className="text-center text-muted-foreground text-xs py-12">
-            No GPU nodes provisioned
-          </div>
+          <div className="text-center text-muted-foreground text-xs py-12">No GPU nodes provisioned</div>
         ) : (
           <>
             {/* Table header */}
@@ -439,9 +400,7 @@ export function GpuDashboard() {
                   <div
                     className={cn(
                       "w-24 text-right tabular-nums text-sm",
-                      node.utilization != null && node.utilization > 85
-                        ? "text-amber-400"
-                        : "text-foreground",
+                      node.utilization != null && node.utilization > 85 ? "text-amber-400" : "text-foreground",
                     )}
                   >
                     {node.utilization != null ? `${node.utilization}%` : "—"}
@@ -459,9 +418,7 @@ export function GpuDashboard() {
                     {node.temperatureCelsius != null ? `${node.temperatureCelsius}°C` : "—"}
                   </div>
                   <div className="flex-1 text-right tabular-nums text-sm text-muted-foreground">
-                    {vramPct != null
-                      ? `${vramPct} (${node.memoryUsedMib} / ${node.memoryTotalMib} MiB)`
-                      : "—"}
+                    {vramPct != null ? `${vramPct} (${node.memoryUsedMib} / ${node.memoryTotalMib} MiB)` : "—"}
                   </div>
                   <div className="w-28 flex justify-end gap-1">
                     <Button
@@ -495,25 +452,19 @@ export function GpuDashboard() {
 
       {/* Allocation — stubbed */}
       <div className="mx-6 bg-card border border-border rounded-sm p-4">
-        <div className="text-xs uppercase tracking-widest text-muted-foreground mb-2">
-          Allocation / Tenant Mapping
-        </div>
+        <div className="text-xs uppercase tracking-widest text-muted-foreground mb-2">Allocation / Tenant Mapping</div>
         <p className="text-xs text-muted-foreground">
-          Tenant-to-GPU allocation endpoints are not yet available. This section will display which
-          bots and tenants are assigned to each GPU node once the backend implements the allocation
-          API.
+          Tenant-to-GPU allocation endpoints are not yet available. This section will display which bots and tenants are
+          assigned to each GPU node once the backend implements the allocation API.
         </p>
       </div>
 
       {/* Configuration — stubbed */}
       <div className="mx-6 mb-6 bg-card border border-border rounded-sm p-4">
-        <div className="text-xs uppercase tracking-widest text-muted-foreground mb-2">
-          GPU Configuration
-        </div>
+        <div className="text-xs uppercase tracking-widest text-muted-foreground mb-2">GPU Configuration</div>
         <p className="text-xs text-muted-foreground">
-          GPU capability enable/disable and allocation limit configuration endpoints are not yet
-          available. This section will provide controls once the backend exposes the configuration
-          API.
+          GPU capability enable/disable and allocation limit configuration endpoints are not yet available. This section
+          will provide controls once the backend exposes the configuration API.
         </p>
       </div>
 

package/src/components/admin/grant-credits-dialog.tsx

@@ -29,12 +29,7 @@ interface GrantCreditsDialogProps {
   onComplete: () => void;
 }
 
-export function GrantCreditsDialog({
-  open,
-  onOpenChange,
-  user,
-  onComplete,
-}: GrantCreditsDialogProps) {
+export function GrantCreditsDialog({ open, onOpenChange, user, onComplete }: GrantCreditsDialogProps) {
   const [amount, setAmount] = useState("");
   const [reason, setReason] = useState("");
   const [submitting, setSubmitting] = useState(false);
@@ -70,9 +65,7 @@ export function GrantCreditsDialog({
           <div className="space-y-2">
             <Label htmlFor="grant-amount">Amount</Label>
             <div className="relative">
-              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-                $
-              </span>
+              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">$</span>
               <Input
                 id="grant-amount"
                 type="number"
@@ -105,14 +98,8 @@ export function GrantCreditsDialog({
           <Button variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button
-            variant="terminal"
-            disabled={!isValidAmount || !reason.trim() || submitting}
-            onClick={handleGrant}
-          >
-            {submitting
-              ? "Granting..."
-              : `Grant ${isValidAmount ? formatCreditStandard(parsedAmount) : "$0.00"}`}
+          <Button variant="terminal" disabled={!isValidAmount || !reason.trim() || submitting} onClick={handleGrant}>
+            {submitting ? "Granting..." : `Grant ${isValidAmount ? formatCreditStandard(parsedAmount) : "$0.00"}`}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/components/admin/incident-dashboard.tsx

@@ -37,10 +37,7 @@ function SeverityBadge({ severity }: { severity: IncidentSeverity }) {
     SEV3: "bg-yellow-500/15 text-yellow-400 border-yellow-500/20",
   };
   return (
-    <Badge
-      variant="secondary"
-      className={cn("text-xs px-2 py-0.5 border font-mono", colors[severity])}
-    >
+    <Badge variant="secondary" className={cn("text-xs px-2 py-0.5 border font-mono", colors[severity])}>
       {severity}
     </Badge>
   );
@@ -134,9 +131,7 @@ function SeverityClassifierPanel() {
               type="number"
               min={0}
               value={signals.dlqDepth}
-              onChange={(e) =>
-                setSignals((s) => ({ ...s, dlqDepth: Number.parseInt(e.target.value, 10) || 0 }))
-              }
+              onChange={(e) => setSignals((s) => ({ ...s, dlqDepth: Number.parseInt(e.target.value, 10) || 0 }))}
               className="h-7 text-xs"
             />
           </div>
@@ -272,14 +267,13 @@ function EscalationPanel() {
           <div className="space-y-2">
             {result.contacts.map((contact: EscalationContact, i: number) => (
               <div
+                // biome-ignore lint/suspicious/noArrayIndexKey: static list, index key is safe
                 key={`${contact.role}-${i}`}
                 className="flex items-center justify-between py-2 border-b border-border/50 last:border-0 text-sm"
               >
                 <div>
                   <span className="font-medium">{contact.role}</span>
-                  {contact.name && (
-                    <span className="text-muted-foreground ml-2">— {contact.name}</span>
-                  )}
+                  {contact.name && <span className="text-muted-foreground ml-2">— {contact.name}</span>}
                 </div>
                 <div className="text-xs text-muted-foreground">
                   {contact.method} · within {contact.within}
@@ -346,6 +340,7 @@ function ResponseProcedurePanel() {
         {procedure && (
           <ol className="space-y-2 list-decimal list-inside">
             {procedure.steps.map((step: string, index: number) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: static list, index key is safe
               <li key={`${index}-${step.slice(0, 20)}`} className="text-sm text-muted-foreground">
                 {step}
               </li>
@@ -442,9 +437,7 @@ function CommunicationPanel() {
             />
           </div>
           <div className="space-y-1">
-            <Label className="text-xs text-muted-foreground">
-              Affected Systems (comma-separated)
-            </Label>
+            <Label className="text-xs text-muted-foreground">Affected Systems (comma-separated)</Label>
             <Input
               value={affectedSystemsText}
               onChange={(e) => setAffectedSystemsText(e.target.value)}
@@ -477,17 +470,13 @@ function CommunicationPanel() {
         {templates && (
           <div className="space-y-3">
             <div>
-              <div className="text-xs font-medium text-muted-foreground mb-1">
-                Customer Template
-              </div>
+              <div className="text-xs font-medium text-muted-foreground mb-1">Customer Template</div>
               <pre className="text-xs bg-muted/30 rounded p-3 whitespace-pre-wrap font-mono border border-border/50">
                 {templates.customer}
               </pre>
             </div>
             <div>
-              <div className="text-xs font-medium text-muted-foreground mb-1">
-                Internal Template
-              </div>
+              <div className="text-xs font-medium text-muted-foreground mb-1">Internal Template</div>
               <pre className="text-xs bg-muted/30 rounded p-3 whitespace-pre-wrap font-mono border border-border/50">
                 {templates.internal}
               </pre>
@@ -628,9 +617,7 @@ function PostmortemPanel() {
             />
           </div>
           <div className="space-y-1">
-            <Label className="text-xs text-muted-foreground">
-              Affected Systems (comma-separated)
-            </Label>
+            <Label className="text-xs text-muted-foreground">Affected Systems (comma-separated)</Label>
             <Input
               value={affectedSystemsText}
               onChange={(e) => setAffectedSystemsText(e.target.value)}
@@ -696,9 +683,7 @@ export function IncidentDashboard() {
             onClick={() => setTab(t.id)}
             className={cn(
               "text-sm px-3 py-1.5 rounded-sm transition-colors",
-              tab === t.id
-                ? "bg-terminal/10 text-terminal font-medium"
-                : "text-muted-foreground hover:text-foreground",
+              tab === t.id ? "bg-terminal/10 text-terminal font-medium" : "text-muted-foreground hover:text-foreground",
             )}
           >
             {t.label}