From 71ef31441b143bcffbf87d9820a7f18ab5da3c3d Mon Sep 17 00:00:00 2001
From: Haileyesus <118998054+blackmammoth@users.noreply.github.com>
Date: Wed, 1 Jul 2026 11:40:39 +0300
Subject: [PATCH] fix: resolve coderabbit comments

---
 src/components/auth/view/AuthErrorAlert.tsx         |  5 ++++-
 src/components/auth/view/AuthInputField.tsx         |  3 +--
 src/components/auth/view/AuthLoadingScreen.tsx      |  6 +++---
 src/components/chat/view/ChatInterface.tsx          |  3 ++-
 .../view/subcomponents/MainContentTitle.tsx         |  2 +-
 src/components/onboarding/view/Onboarding.tsx       | 13 ++++++++-----
 .../view/subcomponents/AgentConnectionCard.tsx      |  2 +-
 src/index.css                                       |  9 +++++----
 8 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/auth/view/AuthErrorAlert.tsx b/src/components/auth/view/AuthErrorAlert.tsx
index 0325759f..b9b65625 100644
--- a/src/components/auth/view/AuthErrorAlert.tsx
+++ b/src/components/auth/view/AuthErrorAlert.tsx
@@ -10,7 +10,10 @@ export default function AuthErrorAlert({ errorMessage }: AuthErrorAlertProps) {
   }
 
   return (
-    <div className="flex items-start gap-2.5 rounded-xl border border-destructive/30 bg-destructive/10 p-3 text-destructive">
+    <div
+      role="alert"
+      className="flex items-start gap-2.5 rounded-xl border border-destructive/30 bg-destructive/10 p-3 text-destructive"
+    >
       <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />
       <p className="text-sm leading-relaxed">{errorMessage}</p>
     </div>
diff --git a/src/components/auth/view/AuthInputField.tsx b/src/components/auth/view/AuthInputField.tsx
index a6fa64be..86b68854 100644
--- a/src/components/auth/view/AuthInputField.tsx
+++ b/src/components/auth/view/AuthInputField.tsx
@@ -66,9 +66,8 @@ export default function AuthInputField({
             type="button"
             onClick={() => setIsPasswordVisible((previous) => !previous)}
             disabled={isDisabled}
-            tabIndex={-1}
             aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
-            className="absolute right-2 top-1/2 flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-60"
+            className="absolute right-2 top-1/2 flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:opacity-60"
           >
             {isPasswordVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
           </button>
diff --git a/src/components/auth/view/AuthLoadingScreen.tsx b/src/components/auth/view/AuthLoadingScreen.tsx
index da151f28..5855e56a 100644
--- a/src/components/auth/view/AuthLoadingScreen.tsx
+++ b/src/components/auth/view/AuthLoadingScreen.tsx
@@ -7,7 +7,7 @@ export default function AuthLoadingScreen() {
         <div className="absolute -top-40 left-1/2 h-[36rem] w-[36rem] -translate-x-1/2 rounded-full bg-primary/10 blur-3xl" />
       </div>
 
-      <div className="relative text-center">
+      <div className="relative text-center" role="status" aria-live="polite">
         <div className="mb-5 flex justify-center">
           <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-primary/80 shadow-lg shadow-primary/25 ring-1 ring-inset ring-white/20">
             <img src="/logo.svg" alt="CloudCLI" className="h-9 w-9" />
@@ -15,8 +15,8 @@ export default function AuthLoadingScreen() {
         </div>
 
         <h1 className="mb-4 font-serif text-2xl font-bold tracking-tight text-foreground">CloudCLI</h1>
-
-        <div className="flex items-center justify-center gap-2">
+        <p className="sr-only">Loading authentication state…</p>
+        <div aria-hidden className="flex items-center justify-center gap-2">
           {loadingDotAnimationDelays.map((delay) => (
             <div
               key={delay}
diff --git a/src/components/chat/view/ChatInterface.tsx b/src/components/chat/view/ChatInterface.tsx
index 96980179..2fdcba57 100644
--- a/src/components/chat/view/ChatInterface.tsx
+++ b/src/components/chat/view/ChatInterface.tsx
@@ -365,10 +365,11 @@ function ChatInterface({
               <button
                 type="button"
                 onClick={scrollToBottomAndReset}
+                aria-label={t('input.scrollToBottom', { defaultValue: 'Scroll to bottom' })}
                 className="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border border-border/50 bg-card text-muted-foreground shadow-sm transition-all duration-200 hover:bg-accent hover:text-foreground"
                 title={t('input.scrollToBottom', { defaultValue: 'Scroll to bottom' })}
               >
-                <ArrowDownIcon className="h-4 w-4" />
+                <ArrowDownIcon className="h-4 w-4" aria-hidden />
               </button>
             </div>
           )}
diff --git a/src/components/main-content/view/subcomponents/MainContentTitle.tsx b/src/components/main-content/view/subcomponents/MainContentTitle.tsx
index e3d8776f..bc53d3a1 100644
--- a/src/components/main-content/view/subcomponents/MainContentTitle.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentTitle.tsx
@@ -70,7 +70,7 @@ export default function MainContentTitle({
       <div className="min-w-0 flex-1">
         {activeTab === 'chat' && selectedSession ? (
           <div className="min-w-0">
-            <h2 className="truncate text-sm font-semibold leading-tight text-foreground">
+            <h2 title={getSessionTitle(selectedSession)} className="truncate text-sm font-semibold leading-tight text-foreground">
               {getSessionTitle(selectedSession)}
             </h2>
             <div className="truncate text-[11px] leading-tight text-muted-foreground">{selectedProject.displayName}</div>
diff --git a/src/components/onboarding/view/Onboarding.tsx b/src/components/onboarding/view/Onboarding.tsx
index 900fb897..5416a8e2 100644
--- a/src/components/onboarding/view/Onboarding.tsx
+++ b/src/components/onboarding/view/Onboarding.tsx
@@ -175,11 +175,14 @@ export default function Onboarding({ onComplete }: OnboardingProps) {
               />
             )}
 
-            {errorMessage && (
-              <div className="mt-5 rounded-xl border border-destructive/30 bg-destructive/10 p-3.5">
-                <p className="text-sm text-destructive">{errorMessage}</p>
-              </div>
-            )}
+              {errorMessage && (
+                <div
+                  role="alert"
+                  className="mt-5 rounded-xl border border-destructive/30 bg-destructive/10 p-3.5"
+                >
+                  <p className="text-sm text-destructive">{errorMessage}</p>
+                </div>
+              )}
 
             <div className="mt-6 flex items-center justify-between border-t border-border pt-5">
               <button
diff --git a/src/components/onboarding/view/subcomponents/AgentConnectionCard.tsx b/src/components/onboarding/view/subcomponents/AgentConnectionCard.tsx
index 84d8933e..cef3f94a 100644
--- a/src/components/onboarding/view/subcomponents/AgentConnectionCard.tsx
+++ b/src/components/onboarding/view/subcomponents/AgentConnectionCard.tsx
@@ -43,7 +43,7 @@ export default function AgentConnectionCard({
               {title}
               {status.authenticated && <Check className="h-3.5 w-3.5 flex-shrink-0 text-emerald-500" />}
             </div>
-            <div className="truncate text-xs text-muted-foreground">{statusText}</div>
+            <div className="truncate text-xs text-muted-foreground" title={statusText}>{statusText}</div>
           </div>
         </div>
 
diff --git a/src/index.css b/src/index.css
index 58ef2874..adbcb0de 100644
--- a/src/index.css
+++ b/src/index.css
@@ -128,6 +128,7 @@
   
   body {
     @apply bg-background text-foreground;
+
     font-family: "Encode Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -964,7 +965,7 @@
   }
 
   @keyframes chat-activity-enter {
-    from {
+    0% {
       opacity: 0;
       filter: blur(3px);
       transform: translateY(18px) scaleY(0.92);
@@ -974,7 +975,7 @@
       filter: blur(0);
       transform: translateY(-2px) scaleY(1.01);
     }
-    to {
+    100% {
       opacity: 1;
       filter: blur(0);
       transform: translateY(0) scaleY(1);
@@ -982,12 +983,12 @@
   }
 
   @keyframes chat-activity-exit {
-    from {
+    0% {
       opacity: 1;
       filter: blur(0);
       transform: translateY(0) scaleY(1);
     }
-    to {
+    100% {
       opacity: 0;
       filter: blur(2px);
       transform: translateY(14px) scaleY(0.96);