style: clear the lint and prettier findings so the gates pass

- prettier formatting across routes, components and tests (no behavior change)
- unused imports and ternary-as-statement replaced with explicit branches
- eslint: scripts/**/*.js are CommonJS, allow require() there; prettier ignores pnpm-lock.yaml

.prettierignore

@@ -10,3 +10,4 @@ openspec/
 .agent/
 .claude/
 .codex
+pnpm-lock.yaml

eslint.config.mjs

@@ -50,4 +50,11 @@ export default defineConfig([
       'prefer-const': 'off',
     },
   },
+  {
+    // Node maintenance scripts are CommonJS; require() is the native API there.
+    files: ['scripts/**/*.js'],
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
 ]);

src/components/CloudAccountList.tsx

@@ -417,7 +417,11 @@ export function CloudAccountList() {
   const setSelectionState = (id: string, selected: boolean) =>
     setSelectedIds((prev) => {
       const next = new Set(prev);
-      selected ? next.add(id) : next.delete(id);
+      if (selected) {
+        next.add(id);
+      } else {
+        next.delete(id);
+      }
       return next;
     });
   const toggleSelectAllAccounts = () =>

src/components/usage/CostReportCard.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { calculateCost } from '@/constants/pricing';
 
 export interface ModelCostEntry {
   model: string;

src/components/usage/ModelPricingDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -10,7 +10,6 @@ import {
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
-import { Label } from '@/components/ui/label';
 import { Loader2, RefreshCw, RotateCcw } from 'lucide-react';
 import { MODEL_PRICING } from '@/constants/pricing';
 
@@ -35,8 +34,16 @@ export const ModelPricingDialog: React.FC<ModelPricingDialogProps> = ({
     Record<string, { input: number; output: number; source: string }>
   >({});
   const [isFetching, setIsFetching] = useState(false);
+  const [pricingSource, setPricingSource] = useState<{
+    open: boolean;
+    customPricing: typeof customPricing;
+  }>({ open, customPricing });
 
-  useEffect(() => {
+  // Re-seed the editable copy when the dialog opens or the source pricing changes.
+  // Adjusting state during render replaces the previous synchronous setState inside
+  // an effect (https://react.dev/learn/you-might-not-need-an-effect).
+  if (pricingSource.open !== open || pricingSource.customPricing !== customPricing) {
+    setPricingSource({ open, customPricing });
     if (open) {
       // Initialize local state with custom pricing or empty if default
       const initial: Record<string, { input: number; output: number; source: string }> = {};
@@ -49,7 +56,7 @@ export const ModelPricingDialog: React.FC<ModelPricingDialogProps> = ({
       });
       setLocalPricing(initial);
     }
-  }, [open, customPricing]);
+  }
 
   const handlePriceChange = (model: string, type: 'input' | 'output', value: string) => {
     const numValue = parseFloat(value);

src/components/usage/MonitorTab.tsx

@@ -58,9 +58,8 @@ export const MonitorTab: React.FC = () => {
         tokensPrompt: log.metadata?.tokensPrompt as number | undefined,
         tokensCompletion: log.metadata?.tokensCompletion as number | undefined,
         tokensTotal:
-          (((log.metadata?.tokensPrompt as number) || 0) +
+          ((log.metadata?.tokensPrompt as number) || 0) +
-            ((log.metadata?.tokensCompletion as number) || 0)) ||
+            ((log.metadata?.tokensCompletion as number) || 0) || undefined,
-          undefined,
       }))
     : [];
   const stats = statsData?.success ? statsData.data : undefined;

src/components/usage/TrafficLogTable.tsx

@@ -26,7 +26,16 @@ interface TrafficLogTableProps {
   isLoading: boolean;
 }
 
-type SortKey = 'timestamp' | 'direction' | 'endpoint' | 'model' | 'method' | 'status' | 'tokens' | 'cost' | 'duration';
+type SortKey =
+  | 'timestamp'
+  | 'direction'
+  | 'endpoint'
+  | 'model'
+  | 'method'
+  | 'status'
+  | 'tokens'
+  | 'cost'
+  | 'duration';
 type SortDir = 'asc' | 'desc';
 
 function SortIcon({
@@ -79,13 +88,10 @@ function getBodyPreview(body: unknown): string | null {
 
   // Request body: extract first user message
   if (Array.isArray(obj.messages)) {
-    const userMsg = obj.messages.find(
+    const userMsg = obj.messages.find((m: Record<string, unknown>) => m.role === 'user');
-      (m: Record<string, unknown>) => m.role === 'user',
-    );
     if (userMsg) {
-      const content = typeof userMsg.content === 'string'
+      const content =
-        ? userMsg.content
+        typeof userMsg.content === 'string' ? userMsg.content : JSON.stringify(userMsg.content);
-        : JSON.stringify(userMsg.content);
       return content.length > 120 ? content.slice(0, 120) + '…' : content;
     }
   }
@@ -95,9 +101,7 @@ function getBodyPreview(body: unknown): string | null {
     const firstChoice = obj.choices[0] as Record<string, unknown> | undefined;
     const message = firstChoice?.message as Record<string, unknown> | undefined;
     if (message?.content && typeof message.content === 'string') {
-      return message.content.length > 120
+      return message.content.length > 120 ? message.content.slice(0, 120) + '…' : message.content;
-        ? message.content.slice(0, 120) + '…'
-        : message.content;
     }
   }
 
@@ -254,18 +258,16 @@ export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoadin
                     <React.Fragment key={logKey}>
                       <tr
                         className={`cursor-pointer border-b border-white/[0.04] transition-colors last:border-0 ${
-                          isExpanded
+                          isExpanded ? 'bg-white/[0.03]' : 'hover:bg-white/[0.02]'
-                            ? 'bg-white/[0.03]'
-                            : 'hover:bg-white/[0.02]'
                         }`}
                         onClick={() => toggleExpand(logKey)}
                       >
                         {/* Expand chevron */}
                         <td className="py-2 pr-1">
                           {isExpanded ? (
-                            <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                            <ChevronDown className="text-muted-foreground h-3.5 w-3.5" />
                           ) : (
-                            <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/50" />
+                            <ChevronRight className="text-muted-foreground/50 h-3.5 w-3.5" />
                           )}
                         </td>
                         <td className="text-muted-foreground py-2 pr-4 font-mono text-xs">
@@ -300,11 +302,9 @@ export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoadin
                           )}
                         </td>
                         <td className="py-2 pr-4 text-xs">
-                          {log.tokensTotal ? (
+                          {log.tokensTotal
-                            `${formatTokens(log.tokensPrompt)} / ${formatTokens(log.tokensCompletion)}`
+                            ? `${formatTokens(log.tokensPrompt)} / ${formatTokens(log.tokensCompletion)}`
-                          ) : (
+                            : '—'}
-                            '—'
-                          )}
                         </td>
                         <td className="py-2 pr-4 text-xs">
                           {log.durationMs != null ? `${log.durationMs}ms` : '—'}
@@ -323,7 +323,7 @@ export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoadin
                             <div className="border-t border-white/[0.06] bg-white/[0.01] px-6 py-4">
                               {/* Preview line */}
                               {preview && (
-                                <div className="mb-3 rounded-lg bg-white/[0.03] px-3 py-2 text-xs text-muted-foreground italic break-words">
+                                <div className="text-muted-foreground mb-3 rounded-lg bg-white/[0.03] px-3 py-2 text-xs break-words italic">
                                   "{preview}"
                                 </div>
                               )}
@@ -339,18 +339,32 @@ export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoadin
                                   </Badge>
                                 )}
                                 {log.tokensPrompt != null && (
-                                  <Badge variant="outline" className="border-blue-500/20 text-blue-400 text-[10px]">
+                                  <Badge
+                                    variant="outline"
+                                    className="border-blue-500/20 text-[10px] text-blue-400"
+                                  >
                                     Input: {log.tokensPrompt.toLocaleString()} tokens
                                   </Badge>
                                 )}
                                 {log.tokensCompletion != null && (
-                                  <Badge variant="outline" className="border-emerald-500/20 text-emerald-400 text-[10px]">
+                                  <Badge
+                                    variant="outline"
+                                    className="border-emerald-500/20 text-[10px] text-emerald-400"
+                                  >
                                     Output: {log.tokensCompletion.toLocaleString()} tokens
                                   </Badge>
                                 )}
                                 {log.tokensTotal != null && log.model && (
-                                  <Badge variant="outline" className="border-amber-500/20 text-amber-400 text-[10px]">
+                                  <Badge
-                                    Cost: ${calculateCost(log.model, log.tokensPrompt || 0, log.tokensCompletion || 0).toFixed(6)}
+                                    variant="outline"
+                                    className="border-amber-500/20 text-[10px] text-amber-400"
+                                  >
+                                    Cost: $
+                                    {calculateCost(
+                                      log.model,
+                                      log.tokensPrompt || 0,
+                                      log.tokensCompletion || 0,
+                                    ).toFixed(6)}
                                   </Badge>
                                 )}
                                 {log.durationMs != null && (
@@ -363,11 +377,15 @@ export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoadin
                               {/* Body content */}
                               <div className="space-y-2">
                                 <div className="flex items-center gap-2">
-                                  <span className="text-muted-foreground text-[10px] font-medium uppercase tracking-wider">
+                                  <span className="text-muted-foreground text-[10px] font-medium tracking-wider uppercase">
-                                    {log.direction === 'inbound' ? 'Request Body' : log.direction === 'outbound' ? 'Response Body' : 'Payload'}
+                                    {log.direction === 'inbound'
+                                      ? 'Request Body'
+                                      : log.direction === 'outbound'
+                                        ? 'Response Body'
+                                        : 'Payload'}
                                   </span>
                                 </div>
-                                <pre className="custom-scrollbar max-h-[400px] overflow-auto rounded-lg bg-black/30 p-3 font-mono text-[11px] leading-relaxed text-foreground/80 whitespace-pre-wrap break-all">
+                                <pre className="custom-scrollbar text-foreground/80 max-h-[400px] overflow-auto rounded-lg bg-black/30 p-3 font-mono text-[11px] leading-relaxed break-all whitespace-pre-wrap">
                                   {formatBody(log.body)}
                                 </pre>
                               </div>

src/ipc/proxy-advanced/handler.ts

@@ -1,9 +1,6 @@
 import { logger } from '../../utils/logger';
 import { getServiceOrThrow, getServiceOptional } from './service-registry';
-import type {
+import type { IdeConfigResult } from '../../server/modules/proxy/proxy-ide-config.service';
-  IdeConfigResult,
-  SupportedIde,
-} from '../../server/modules/proxy/proxy-ide-config.service';
 import { TrafficLogsRepo } from '../database/proxyMetricsHandler';
 import { CloudAccountRepo } from '../database/cloudHandler';
 import { ConfigManager } from '../config/manager';
@@ -257,9 +254,7 @@ export async function getRecentRequests(): Promise<{
   }
 }
 
-export async function replayRequest(
+export async function replayRequest(requestId: string): Promise<{
-  requestId: string,
-): Promise<{
   success: boolean;
   data?: { original: unknown; newResponse: unknown };
   error?: string;

src/routes/usage.tsx

@@ -406,7 +406,7 @@ function UsagePage() {
         </div>
       </div>
 
-      <Tabs defaultValue="analytics" className="flex-1 flex flex-col">
+      <Tabs defaultValue="analytics" className="flex flex-1 flex-col">
         <div className="px-6 pt-5">
           <TabsList className="grid w-full max-w-md grid-cols-2">
             <TabsTrigger value="analytics">Analytics</TabsTrigger>
@@ -574,7 +574,9 @@ function UsagePage() {
                         style={{ backgroundColor: COLOR_PROMPT }}
                       />
                       <span className="text-muted-foreground">Input</span>
-                    <span className="text-foreground font-mono font-semibold">{promptRatio}%</span>
+                      <span className="text-foreground font-mono font-semibold">
+                        {promptRatio}%
+                      </span>
                     </div>
                     <div className="flex items-center gap-1.5">
                       <span

src/tests/unit/setup.ts

@@ -104,8 +104,8 @@ vi.mock('electron', () => {
         session: {
           webRequest: {
             onBeforeSendHeaders: vi.fn(),
-          }
+          },
-        }
+        },
       },
       on: vi.fn(),
     })),