fix: resolve coderabbit comments

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>

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>

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>
-
+        <p className="sr-only">Loading authentication state…</p>
-        <div className="flex items-center justify-center gap-2">
+        <div aria-hidden className="flex items-center justify-center gap-2">
           {loadingDotAnimationDelays.map((delay) => (
             <div
               key={delay}

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>
           )}

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>

src/components/onboarding/view/Onboarding.tsx

@@ -176,7 +176,10 @@ export default function Onboarding({ onComplete }: OnboardingProps) {
             )}
 
               {errorMessage && (
-              <div className="mt-5 rounded-xl border border-destructive/30 bg-destructive/10 p-3.5">
+                <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>
               )}

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>
 

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);