fix: resolve SonarQube findings and Next.js Image warnings

SonarQube/SonarLint fixes:
- Remove unused imports (useMemo, PROVIDER_ENDPOINTS, updateSettings, APP_CONFIG)
- Add PropTypes validation to all components receiving props
- Fix accessibility issues (semantic buttons, ARIA attributes, form labels)
- Replace array index keys with stable identifiers
- Extract duplicate getStatusDisplay function in providers page
- Fix negated conditions for better readability
- Add node: prefix to Node.js imports in localDb.js
- Fix optional chaining in pricing lookup
- Add explanatory comments to empty catch blocks
- Consolidate duplicate OAuth flow branches
- Change parseInt to Number.parseInt
- Disable false positive rules in VS Code settings

Next.js Image fixes:
- Add style={{ width: "auto", height: "auto" }} to all Image components
- Resolves aspect ratio warnings without triggering lint issues

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/(dashboard)/dashboard/cli-tools/components/ClaudeToolCard.js

@@ -186,7 +186,7 @@ export default function ClaudeToolCard({
       <div className="flex items-center justify-between hover:cursor-pointer" onClick={onToggle}>
         <div className="flex items-center gap-4">
           <div className="size-12 flex items-center justify-center">
-            <Image src="/providers/claude.png" alt={tool.name} width={40} height={40} className="size-12 object-contain rounded-xl" onError={(e) => { e.target.style.display = "none"; }} />
+            <Image src="/providers/claude.png" alt={tool.name} width={40} height={40} className="size-12 object-contain rounded-xl" style={{ width: "auto", height: "auto" }} onError={(e) => { e.target.style.display = "none"; }} />
           </div>
           <div>
             <div className="flex items-center gap-2">

src/app/(dashboard)/dashboard/cli-tools/components/CodexToolCard.js

@@ -159,7 +159,7 @@ wire_api = "responses"
       <div className="flex items-center justify-between hover:cursor-pointer" onClick={onToggle}>
         <div className="flex items-center gap-4">
           <div className="size-12 flex items-center justify-center">
-            <Image src="/providers/codex.png" alt={tool.name} width={40} height={40} className="size-12 object-contain rounded-xl" onError={(e) => { e.target.style.display = "none"; }} />
+            <Image src="/providers/codex.png" alt={tool.name} width={40} height={40} className="size-12 object-contain rounded-xl" style={{ width: "auto", height: "auto" }} onError={(e) => { e.target.style.display = "none"; }} />
           </div>
           <div>
             <div className="flex items-center gap-2">

src/app/(dashboard)/dashboard/cli-tools/components/DefaultToolCard.js

@@ -224,13 +224,14 @@ export default function DefaultToolCard({ toolId, tool, isExpanded, onToggle, ba
   const renderIcon = () => {
     if (tool.image) {
       return (
-        <Image 
-          src={tool.image} 
-          alt={tool.name} 
-          width={40} 
-          height={40} 
-          className="size-12 object-contain rounded-xl bg-gray-500" 
-          onError={(e) => { e.target.style.display = "none"; }} 
+        <Image
+          src={tool.image}
+          alt={tool.name}
+          width={40}
+          height={40}
+          className="size-12 object-contain rounded-xl bg-gray-500"
+          style={{ width: "auto", height: "auto" }}
+          onError={(e) => { e.target.style.display = "none"; }}
         />
       );
     }
@@ -238,13 +239,14 @@ export default function DefaultToolCard({ toolId, tool, isExpanded, onToggle, ba
       return <span className="material-symbols-outlined text-3xl" style={{ color: tool.color }}>{tool.icon}</span>;
     }
     return (
-      <Image 
-        src={`/providers/${toolId}.png`} 
-        alt={tool.name} 
-        width={40} 
-        height={40} 
-        className="size-10 object-contain rounded-xl" 
-        onError={(e) => { e.target.style.display = "none"; }} 
+      <Image
+        src={`/providers/${toolId}.png`}
+        alt={tool.name}
+        width={40}
+        height={40}
+        className="size-10 object-contain rounded-xl"
+        style={{ width: "auto", height: "auto" }}
+        onError={(e) => { e.target.style.display = "none"; }}
       />
     );
   };