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

package/src/app/(dashboard)/billing/payment/page.tsx

@@ -1,13 +1,7 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
-import {
-  CreditCardIcon,
-  DownloadIcon,
-  ExternalLinkIcon,
-  LockIcon,
-  ShieldCheckIcon,
-} from "lucide-react";
+import { CreditCardIcon, DownloadIcon, ExternalLinkIcon, LockIcon, ShieldCheckIcon } from "lucide-react";
 import { type FormEvent, useCallback, useEffect, useState } from "react";
 import { AddPaymentMethodDialog } from "@/components/billing/add-payment-method-dialog";
 import { ByokCallout } from "@/components/billing/byok-callout";
@@ -19,21 +13,9 @@ 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 {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import type { BillingInfo, Invoice } from "@/lib/api";
-import {
-  getBillingInfo,
-  removePaymentMethod,
-  setDefaultPaymentMethod,
-  updateBillingEmail,
-} from "@/lib/api";
+import { getBillingInfo, removePaymentMethod, setDefaultPaymentMethod, updateBillingEmail } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
 import { brandName } from "@/lib/brand-config";
 import { formatCreditStandard } from "@/lib/format-credit";
@@ -236,9 +218,7 @@ export default function PaymentPage() {
     <div className="max-w-3xl space-y-6">
       <div>
         <h1 className="text-2xl font-bold tracking-tight">Payment</h1>
-        <p className="text-sm text-muted-foreground">
-          Manage your payment methods and view billing history
-        </p>
+        <p className="text-sm text-muted-foreground">Manage your payment methods and view billing history</p>
       </div>
 
       <ByokCallout compact />
@@ -247,9 +227,7 @@ export default function PaymentPage() {
       <Card>
         <CardHeader>
           <CardTitle>Payment Methods</CardTitle>
-          <CardDescription>
-            Cards on file for {brandName()} platform charges (not AI provider costs)
-          </CardDescription>
+          <CardDescription>Cards on file for {brandName()} platform charges (not AI provider costs)</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           {info.paymentMethods.length === 0 ? (
@@ -257,13 +235,9 @@ export default function PaymentPage() {
           ) : (
             <div className="space-y-3">
               {info.paymentMethods.map((pm) => {
-                const brandClass =
-                  BRAND_STYLES[pm.brand.toLowerCase()] ?? "bg-muted text-muted-foreground";
+                const brandClass = BRAND_STYLES[pm.brand.toLowerCase()] ?? "bg-muted text-muted-foreground";
                 return (
-                  <div
-                    key={pm.id}
-                    className="flex items-center justify-between rounded-md border p-3"
-                  >
+                  <div key={pm.id} className="flex items-center justify-between rounded-md border p-3">
                     <div className="flex items-center gap-3">
                       <div
                         className={cn(
@@ -322,11 +296,7 @@ export default function PaymentPage() {
           <Button variant="outline" onClick={() => setShowAddPayment(true)}>
             Add payment method
           </Button>
-          <AddPaymentMethodDialog
-            open={showAddPayment}
-            onOpenChange={setShowAddPayment}
-            onSuccess={load}
-          />
+          <AddPaymentMethodDialog open={showAddPayment} onOpenChange={setShowAddPayment} onSuccess={load} />
           <div className="flex flex-wrap items-center gap-4 text-xs text-muted-foreground">
             <span className="flex items-center gap-1">
               <LockIcon className="size-3" />
@@ -375,18 +345,13 @@ export default function PaymentPage() {
         <Card>
           <CardHeader>
             <CardTitle>Org Payment Methods</CardTitle>
-            <CardDescription>
-              Cards on file for org-level charges ({orgContext.orgName})
-            </CardDescription>
+            <CardDescription>Cards on file for org-level charges ({orgContext.orgName})</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             {orgLoading ? (
               <div className="space-y-3">
                 {["sk-org-a", "sk-org-b"].map((skId) => (
-                  <div
-                    key={skId}
-                    className="flex items-center justify-between rounded-md border p-3"
-                  >
+                  <div key={skId} className="flex items-center justify-between rounded-md border p-3">
                     <Skeleton className="h-4 w-40" />
                     <Skeleton className="h-8 w-16" />
                   </div>
@@ -397,17 +362,11 @@ export default function PaymentPage() {
             ) : (
               <div className="space-y-3">
                 {orgPaymentMethods.map((pm) => (
-                  <div
-                    key={pm.id}
-                    className="flex items-center justify-between rounded-md border p-3"
-                  >
+                  <div key={pm.id} className="flex items-center justify-between rounded-md border p-3">
                     <p className="text-sm font-medium font-mono">
                       **** {pm.last4}
                       {pm.isDefault && (
-                        <Badge
-                          variant="outline"
-                          className="ml-2 border-primary/25 text-primary text-xs"
-                        >
+                        <Badge variant="outline" className="ml-2 border-primary/25 text-primary text-xs">
                           Default
                         </Badge>
                       )}
@@ -455,10 +414,7 @@ export default function PaymentPage() {
             {orgLoading ? (
               <div className="space-y-3">
                 {["sk-oinv-a", "sk-oinv-b"].map((skId) => (
-                  <div
-                    key={skId}
-                    className="flex items-center justify-between rounded-md border p-3"
-                  >
+                  <div key={skId} className="flex items-center justify-between rounded-md border p-3">
                     <Skeleton className="h-4 w-32" />
                     <Skeleton className="h-4 w-20" />
                   </div>
@@ -503,11 +459,7 @@ export default function PaymentPage() {
                         <TableCell>
                           {invoice.downloadUrl ? (
                             <Button variant="ghost" size="sm" asChild>
-                              <a
-                                href={invoice.downloadUrl}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
+                              <a href={invoice.downloadUrl} target="_blank" rel="noopener noreferrer">
                                 <DownloadIcon className="mr-1 size-3" />
                                 Download PDF
                               </a>
@@ -536,9 +488,7 @@ export default function PaymentPage() {
       {/* Billing History */}
       <div>
         <h2 className="text-lg font-semibold">Billing History</h2>
-        <p className="mb-4 text-sm text-muted-foreground">
-          Past invoices for {brandName()} platform services
-        </p>
+        <p className="mb-4 text-sm text-muted-foreground">Past invoices for {brandName()} platform services</p>
       </div>
 
       {info.invoices.length === 0 ? (
@@ -643,11 +593,10 @@ function InvoiceRow({
                 className="overflow-hidden"
               >
                 <div className="bg-muted/50 p-4">
-                  <p className="mb-2 text-xs font-semibold text-muted-foreground">
-                    Hosted Usage Line Items
-                  </p>
+                  <p className="mb-2 text-xs font-semibold text-muted-foreground">Hosted Usage Line Items</p>
                   <div className="space-y-1 text-xs">
                     {invoice.hostedLineItems?.map((item, i) => (
+                      // biome-ignore lint/suspicious/noArrayIndexKey: static list, index key is safe
                       <div key={`${invoice.id}-item-${i}`} className="flex justify-between">
                         <span>
                           {item.capability} — {item.units.toLocaleString()} units @{" "}

package/src/app/(dashboard)/billing/plans/page.tsx

@@ -18,16 +18,12 @@ export default function PlansPage() {
 
       <Card className="border-terminal shadow-[0_0_12px_rgba(0,255,65,0.15)]">
         <CardHeader className="text-center">
-          <CardTitle className="text-sm uppercase tracking-widest text-muted-foreground">
-            {productName()}
-          </CardTitle>
+          <CardTitle className="text-sm uppercase tracking-widest text-muted-foreground">{productName()}</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col items-center gap-4 text-center">
           <p className="text-5xl font-bold text-terminal">
             ${pricingData.bot_price.amount}
-            <span className="text-xl font-normal text-muted-foreground">
-              /{pricingData.bot_price.period}
-            </span>
+            <span className="text-xl font-normal text-muted-foreground">/{pricingData.bot_price.period}</span>
           </p>
           <p className="text-muted-foreground">per bot</p>
           <ul className="space-y-2 text-sm">
@@ -38,9 +34,7 @@ export default function PlansPage() {
               </li>
             ))}
           </ul>
-          <p className="text-xs text-muted-foreground">
-            Usage is billed from credits at transparent per-use rates.
-          </p>
+          <p className="text-xs text-muted-foreground">Usage is billed from credits at transparent per-use rates.</p>
           <Button variant="outline" size="sm" asChild>
             <Link href="/pricing">View full pricing</Link>
           </Button>

package/src/app/(dashboard)/billing/usage/hosted/page.tsx

@@ -8,22 +8,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { CreditDetailed } from "@/components/ui/credit-detailed";
 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 type { HostedCapability, HostedUsageEvent } from "@/lib/api";
 import { getHostedUsageEvents } from "@/lib/api";
 import { formatCreditDetailed, formatCreditStandard } from "@/lib/format-credit";
@@ -230,13 +217,11 @@ export default function HostedUsageDetailPage() {
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="all">All capabilities</SelectItem>
-                  {(Object.entries(CAPABILITY_LABELS) as [HostedCapability, string][]).map(
-                    ([cap, label]) => (
-                      <SelectItem key={cap} value={cap}>
-                        {label}
-                      </SelectItem>
-                    ),
-                  )}
+                  {(Object.entries(CAPABILITY_LABELS) as [HostedCapability, string][]).map(([cap, label]) => (
+                    <SelectItem key={cap} value={cap}>
+                      {label}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
               <Button variant="outline" size="sm" onClick={handleExportCsv}>
@@ -324,9 +309,7 @@ export default function HostedUsageDetailPage() {
                         })}
                       </TableCell>
                       <TableCell>
-                        <Badge variant="outline">
-                          {CAPABILITY_LABELS[event.capability] ?? event.capability}
-                        </Badge>
+                        <Badge variant="outline">{CAPABILITY_LABELS[event.capability] ?? event.capability}</Badge>
                       </TableCell>
                       <TableCell>{event.provider}</TableCell>
                       <TableCell className="text-right">

package/src/app/(dashboard)/billing/usage/page.tsx

@@ -2,17 +2,7 @@
 
 import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 import { ByokCallout } from "@/components/billing/byok-callout";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -231,9 +221,7 @@ export default function UsagePage() {
             <div className="space-y-1 text-sm">
               <div className="flex justify-between">
                 <span className="text-muted-foreground">Total spend this period</span>
-                <span className="font-medium tabular-nums">
-                  {formatCreditStandard(summary.totalSpend)}
-                </span>
+                <span className="font-medium tabular-nums">{formatCreditStandard(summary.totalSpend)}</span>
               </div>
               <div className="flex justify-between">
                 <span className="text-muted-foreground">Included credit</span>
@@ -254,24 +242,11 @@ export default function UsagePage() {
       <Card>
         <CardHeader>
           <CardTitle>Platform Usage</CardTitle>
-          <CardDescription>
-            Your {brandName()} orchestration usage this billing period
-          </CardDescription>
+          <CardDescription>Your {brandName()} orchestration usage this billing period</CardDescription>
         </CardHeader>
         <CardContent className="space-y-5">
-          <UsageMeter
-            label="Instances"
-            current={usage.instancesRunning}
-            cap={usage.instanceCap}
-            unit=""
-          />
-          <UsageMeter
-            label="Storage"
-            current={usage.storageUsedGb}
-            cap={usage.storageCapGb}
-            unit="GB"
-            decimals={1}
-          />
+          <UsageMeter label="Instances" current={usage.instancesRunning} cap={usage.instanceCap} unit="" />
+          <UsageMeter label="Storage" current={usage.storageUsedGb} cap={usage.storageCapGb} unit="GB" decimals={1} />
           <div className="space-y-1.5">
             <div className="flex justify-between text-sm">
               <span className="text-muted-foreground">API calls</span>
@@ -291,10 +266,7 @@ export default function UsagePage() {
           <CardContent className="space-y-4">
             {hostedUsage.capabilities.length > 0 && (
               <div className="w-full">
-                <ResponsiveContainer
-                  width="100%"
-                  height={hostedUsage.capabilities.length * 40 + 20}
-                >
+                <ResponsiveContainer width="100%" height={hostedUsage.capabilities.length * 40 + 20}>
                   <BarChart
                     data={hostedUsage.capabilities.map((cap) => ({
                       label: CAPABILITY_LABELS[cap.capability] ?? cap.label,
@@ -334,9 +306,7 @@ export default function UsagePage() {
             <div className="space-y-2">
               {hostedUsage.capabilities.map((cap) => (
                 <div key={cap.capability} className="flex items-center justify-between text-sm">
-                  <span className="font-medium">
-                    {CAPABILITY_LABELS[cap.capability] ?? cap.label}
-                  </span>
+                  <span className="font-medium">{CAPABILITY_LABELS[cap.capability] ?? cap.label}</span>
                   <div className="flex items-center gap-4 text-muted-foreground">
                     <span>
                       {cap.units.toLocaleString()} {cap.unitLabel}
@@ -384,11 +354,7 @@ export default function UsagePage() {
               <Label htmlFor="cost-tracker-toggle" className="text-sm text-muted-foreground">
                 {showCostTracker ? "On" : "Off"}
               </Label>
-              <Switch
-                id="cost-tracker-toggle"
-                checked={showCostTracker}
-                onCheckedChange={setShowCostTracker}
-              />
+              <Switch id="cost-tracker-toggle" checked={showCostTracker} onCheckedChange={setShowCostTracker} />
             </div>
           </div>
         </CardHeader>
@@ -404,8 +370,7 @@ export default function UsagePage() {
                   <span className="font-medium">{cost.provider}</span>
                   <div className="flex items-center gap-4 text-muted-foreground">
                     <span>
-                      {(cost.inputTokens / 1000).toFixed(0)}k in /{" "}
-                      {(cost.outputTokens / 1000).toFixed(0)}k out
+                      {(cost.inputTokens / 1000).toFixed(0)}k in / {(cost.outputTokens / 1000).toFixed(0)}k out
                     </span>
                     <span className="font-medium text-foreground min-w-[7rem]">
                       ~<CreditDetailed value={cost.estimatedCost} />
@@ -415,8 +380,7 @@ export default function UsagePage() {
               ))}
             </div>
             <p className="text-xs text-muted-foreground">
-              These are your direct costs with your providers — {brandName()} does not charge for
-              inference.
+              These are your direct costs with your providers — {brandName()} does not charge for inference.
             </p>
           </CardContent>
         )}
@@ -429,9 +393,7 @@ export default function UsagePage() {
             <div className="flex items-center justify-between">
               <div className="space-y-1">
                 <CardTitle>Spending Controls</CardTitle>
-                <CardDescription>
-                  Set alerts and hard caps to manage your hosted AI spend
-                </CardDescription>
+                <CardDescription>Set alerts and hard caps to manage your hosted AI spend</CardDescription>
               </div>
               <div className="flex items-center gap-2">
                 <Label htmlFor="spending-controls-toggle" className="text-sm text-muted-foreground">
@@ -503,63 +465,61 @@ export default function UsagePage() {
               {/* Per-capability limits */}
               <div className="space-y-3">
                 <h4 className="text-sm font-semibold">Per-Capability Limits</h4>
-                {(Object.entries(CAPABILITY_LABELS) as [HostedCapability, string][]).map(
-                  ([cap, label]) => (
-                    <div key={cap} className="space-y-1">
-                      <p className="text-xs font-medium text-muted-foreground">{label}</p>
-                      <div className="grid gap-4 sm:grid-cols-2">
-                        <Input
-                          type="number"
-                          min={0}
-                          step={1}
-                          placeholder="Alert at $/mo"
-                          aria-label={`${label} alert limit`}
-                          value={spendingLimits.perCapability[cap]?.alertAt ?? ""}
-                          onChange={(e) => {
-                            const existing = spendingLimits.perCapability[cap] ?? {
-                              alertAt: null,
-                              hardCap: null,
-                            };
-                            setSpendingLimits({
-                              ...spendingLimits,
-                              perCapability: {
-                                ...spendingLimits.perCapability,
-                                [cap]: {
-                                  ...existing,
-                                  alertAt: e.target.value ? Number(e.target.value) : null,
-                                },
+                {(Object.entries(CAPABILITY_LABELS) as [HostedCapability, string][]).map(([cap, label]) => (
+                  <div key={cap} className="space-y-1">
+                    <p className="text-xs font-medium text-muted-foreground">{label}</p>
+                    <div className="grid gap-4 sm:grid-cols-2">
+                      <Input
+                        type="number"
+                        min={0}
+                        step={1}
+                        placeholder="Alert at $/mo"
+                        aria-label={`${label} alert limit`}
+                        value={spendingLimits.perCapability[cap]?.alertAt ?? ""}
+                        onChange={(e) => {
+                          const existing = spendingLimits.perCapability[cap] ?? {
+                            alertAt: null,
+                            hardCap: null,
+                          };
+                          setSpendingLimits({
+                            ...spendingLimits,
+                            perCapability: {
+                              ...spendingLimits.perCapability,
+                              [cap]: {
+                                ...existing,
+                                alertAt: e.target.value ? Number(e.target.value) : null,
                               },
-                            });
-                          }}
-                        />
-                        <Input
-                          type="number"
-                          min={0}
-                          step={1}
-                          placeholder="Hard cap $/mo"
-                          aria-label={`${label} hard cap`}
-                          value={spendingLimits.perCapability[cap]?.hardCap ?? ""}
-                          onChange={(e) => {
-                            const existing = spendingLimits.perCapability[cap] ?? {
-                              alertAt: null,
-                              hardCap: null,
-                            };
-                            setSpendingLimits({
-                              ...spendingLimits,
-                              perCapability: {
-                                ...spendingLimits.perCapability,
-                                [cap]: {
-                                  ...existing,
-                                  hardCap: e.target.value ? Number(e.target.value) : null,
-                                },
+                            },
+                          });
+                        }}
+                      />
+                      <Input
+                        type="number"
+                        min={0}
+                        step={1}
+                        placeholder="Hard cap $/mo"
+                        aria-label={`${label} hard cap`}
+                        value={spendingLimits.perCapability[cap]?.hardCap ?? ""}
+                        onChange={(e) => {
+                          const existing = spendingLimits.perCapability[cap] ?? {
+                            alertAt: null,
+                            hardCap: null,
+                          };
+                          setSpendingLimits({
+                            ...spendingLimits,
+                            perCapability: {
+                              ...spendingLimits.perCapability,
+                              [cap]: {
+                                ...existing,
+                                hardCap: e.target.value ? Number(e.target.value) : null,
                               },
-                            });
-                          }}
-                        />
-                      </div>
+                            },
+                          });
+                        }}
+                      />
                     </div>
-                  ),
-                )}
+                  </div>
+                ))}
               </div>
 
               {limitsMsg && <p className="text-sm text-muted-foreground">{limitsMsg}</p>}

package/src/app/(dashboard)/changesets/[id]/changeset-detail-client.tsx

@@ -20,12 +20,7 @@ import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { getChangeset } from "@/lib/changeset-api";
-import type {
-  ChangesetDetail,
-  ChangesetFile,
-  ChangesetReviewStatus,
-  ChangesetStatus,
-} from "@/lib/changeset-types";
+import type { ChangesetDetail, ChangesetFile, ChangesetReviewStatus, ChangesetStatus } from "@/lib/changeset-types";
 import { toUserMessage } from "@/lib/errors";
 import { formatRelativeTime } from "@/lib/format";
 import { cn } from "@/lib/utils";
@@ -98,6 +93,7 @@ function DiffBlock({ patch }: { patch: string }) {
           lineClass = "text-red-400 bg-red-500/10";
         }
         return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: static list, index key is safe
           <div key={`${idx}-${line.slice(0, 20)}`} className={lineClass}>
             {line}
           </div>
@@ -197,9 +193,7 @@ export function ChangesetDetailClient({ changesetId }: { changesetId: string })
           <ChangesetStatusBadge status={changeset.status} />
           <ReviewStatusBadge status={changeset.reviewStatus} />
         </div>
-        {changeset.description && (
-          <p className="text-sm text-muted-foreground">{changeset.description}</p>
-        )}
+        {changeset.description && <p className="text-sm text-muted-foreground">{changeset.description}</p>}
       </div>
 
       {/* Metadata */}
@@ -252,9 +246,7 @@ export function ChangesetDetailClient({ changesetId }: { changesetId: string })
               <span className="text-sm text-muted-foreground">
                 {changeset.files.length} file{changeset.files.length !== 1 ? "s" : ""} changed
               </span>
-              <span className="text-sm font-mono text-emerald-400">
-                +{changeset.totalAdditions}
-              </span>
+              <span className="text-sm font-mono text-emerald-400">+{changeset.totalAdditions}</span>
               <span className="text-sm font-mono text-red-400">-{changeset.totalDeletions}</span>
             </CardContent>
           </Card>
@@ -268,9 +260,7 @@ export function ChangesetDetailClient({ changesetId }: { changesetId: string })
         <TabsContent value="reviews" className="space-y-4">
           {changeset.reviews.length === 0 ? (
             <Card>
-              <CardContent className="py-8 text-center text-sm text-muted-foreground">
-                No reviews yet.
-              </CardContent>
+              <CardContent className="py-8 text-center text-sm text-muted-foreground">No reviews yet.</CardContent>
             </Card>
           ) : (
             changeset.reviews.map((review) => (
@@ -283,9 +273,7 @@ export function ChangesetDetailClient({ changesetId }: { changesetId: string })
                     </div>
                     <div className="flex items-center gap-2">
                       <ReviewStatusBadge status={review.status} />
-                      <span className="text-xs text-muted-foreground">
-                        {formatRelativeTime(review.createdAt)}
-                      </span>
+                      <span className="text-xs text-muted-foreground">{formatRelativeTime(review.createdAt)}</span>
                     </div>
                   </div>
                 </CardHeader>
@@ -303,9 +291,7 @@ export function ChangesetDetailClient({ changesetId }: { changesetId: string })
         <TabsContent value="comments" className="space-y-4">
           {changeset.comments.length === 0 ? (
             <Card>
-              <CardContent className="py-8 text-center text-sm text-muted-foreground">
-                No comments yet.
-              </CardContent>
+              <CardContent className="py-8 text-center text-sm text-muted-foreground">No comments yet.</CardContent>
             </Card>
           ) : (
             changeset.comments.map((comment) => (
@@ -316,9 +302,7 @@ export function ChangesetDetailClient({ changesetId }: { changesetId: string })
                       <User className="size-3.5 text-muted-foreground" />
                       <span className="text-sm font-medium">{comment.author}</span>
                     </div>
-                    <span className="text-xs text-muted-foreground">
-                      {formatRelativeTime(comment.createdAt)}
-                    </span>
+                    <span className="text-xs text-muted-foreground">{formatRelativeTime(comment.createdAt)}</span>
                   </div>
                 </CardHeader>
                 <CardContent className="pt-0">
@@ -370,9 +354,7 @@ function FileCard({ file }: { file: ChangesetFile }) {
               )}
               <FileStatusBadge status={file.status} />
               <span className="font-mono text-sm">
-                {file.status === "renamed" && file.previousPath
-                  ? `${file.previousPath} → ${file.path}`
-                  : file.path}
+                {file.status === "renamed" && file.previousPath ? `${file.previousPath} → ${file.path}` : file.path}
               </span>
             </div>
             <div className="flex items-center gap-3">

package/src/app/(dashboard)/changesets/[id]/error.tsx

@@ -28,9 +28,7 @@ export default function ChangesetDetailError({
           <CardTitle>Changeset Error</CardTitle>
         </CardHeader>
         <CardContent className="space-y-4 text-center">
-          <p className="text-sm text-muted-foreground">
-            Something went wrong while loading this changeset.
-          </p>
+          <p className="text-sm text-muted-foreground">Something went wrong while loading this changeset.</p>
           <div className="flex justify-center gap-3">
             <Button variant="outline" onClick={reset}>
               Retry
@@ -41,9 +39,7 @@ export default function ChangesetDetailError({
           </div>
           {process.env.NODE_ENV === "development" && (
             <details className="mt-4 text-left">
-              <summary className="cursor-pointer text-xs text-muted-foreground">
-                Error details
-              </summary>
+              <summary className="cursor-pointer text-xs text-muted-foreground">Error details</summary>
               <pre className="mt-2 overflow-auto rounded bg-muted p-2 text-xs">
                 {error.message}
                 {error.stack && `\n\n${error.stack}`}

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

@@ -8,13 +8,7 @@ import { logger } from "@/lib/logger";
 
 const log = logger("error-boundary:changesets");
 
-export default function ChangesetsError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
+export default function ChangesetsError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   const [showDetails, setShowDetails] = useState(false);
   const isDev = process.env.NODE_ENV === "development";