- Updated Kiro OAuth configuration

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

@@ -195,7 +195,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" style={{ width: "auto", height: "auto" }} 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 max-w-[48px] max-h-[48px]" sizes="48px" 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

@@ -168,7 +168,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" style={{ width: "auto", height: "auto" }} 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 max-w-[48px] max-h-[48px]" sizes="48px" 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

@@ -235,8 +235,8 @@ export default function DefaultToolCard({ toolId, tool, isExpanded, onToggle, ba
           alt={tool.name}
           width={40}
           height={40}
-          className="size-12 object-contain rounded-xl bg-gray-500"
-          style={{ width: "auto", height: "auto" }}
+          className="size-12 object-contain rounded-xl bg-gray-500 max-w-[48px] max-h-[48px]"
+          sizes="48px"
           onError={(e) => { e.target.style.display = "none"; }}
         />
       );
@@ -250,8 +250,8 @@ export default function DefaultToolCard({ toolId, tool, isExpanded, onToggle, ba
         alt={tool.name}
         width={40}
         height={40}
-        className="size-10 object-contain rounded-xl"
-        style={{ width: "auto", height: "auto" }}
+        className="size-10 object-contain rounded-xl max-w-[40px] max-h-[40px]"
+        sizes="40px"
         onError={(e) => { e.target.style.display = "none"; }}
       />
     );

src/app/(dashboard)/dashboard/providers/[id]/page.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { useParams } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
-import { Card, Button, Badge, Input, Modal, CardSkeleton, OAuthModal, Toggle } from "@/shared/components";
+import { Card, Button, Badge, Input, Modal, CardSkeleton, OAuthModal, KiroOAuthWrapper, Toggle } from "@/shared/components";
 import { OAUTH_PROVIDERS, APIKEY_PROVIDERS, getProviderAlias } from "@/shared/constants/providers";
 import { getModelsByProviderId } from "@/shared/constants/models";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
@@ -275,8 +275,8 @@ export default function ProviderDetailPage() {
               alt={providerInfo.name}
               width={48}
               height={48}
-              className="object-contain rounded-lg"
-              style={{ width: "auto", height: "auto" }}
+              className="object-contain rounded-lg max-w-[48px] max-h-[48px]"
+              sizes="48px"
               onError={(e) => { e.currentTarget.style.display = "none"; }}
             />
           </div>
@@ -344,13 +344,22 @@ export default function ProviderDetailPage() {
       </Card>
 
       {/* Modals */}
-      <OAuthModal
-        isOpen={showOAuthModal}
-        provider={providerId}
-        providerInfo={providerInfo}
-        onSuccess={handleOAuthSuccess}
-        onClose={() => setShowOAuthModal(false)}
-      />
+      {providerId === "kiro" ? (
+        <KiroOAuthWrapper
+          isOpen={showOAuthModal}
+          providerInfo={providerInfo}
+          onSuccess={handleOAuthSuccess}
+          onClose={() => setShowOAuthModal(false)}
+        />
+      ) : (
+        <OAuthModal
+          isOpen={showOAuthModal}
+          provider={providerId}
+          providerInfo={providerInfo}
+          onSuccess={handleOAuthSuccess}
+          onClose={() => setShowOAuthModal(false)}
+        />
+      )}
       <AddApiKeyModal
         isOpen={showAddApiKeyModal}
         provider={providerId}

src/app/(dashboard)/dashboard/providers/page.js

@@ -155,8 +155,8 @@ function ProviderCard({ providerId, provider, stats }) {
                   alt={provider.name}
                   width={40}
                   height={40}
-                  className="object-contain rounded-lg"
-                  style={{ width: "auto", height: "auto" }}
+                  className="object-contain rounded-lg max-w-[40px] max-h-[40px]"
+                  sizes="40px"
                   onError={() => setImgError(true)}
                 />
               )}