From b5f41e4ed5a240c1746862755be815d1b4d0e64c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 24 Mar 2026 09:29:01 +0000
Subject: [PATCH] feat: improve React component performance and accessibility

- Wrap ChatMessageBubble with React.memo to prevent unnecessary re-renders
- Replace window.location.reload() with Inertia router.reload() in apps settings
- Add ARIA attributes to StyledModal (role, aria-modal, aria-labelledby)
- Add aria-label to chat textarea, send button, and suggestion buttons
- Memoize suggestion click handler with useCallback in ChatInterface
- Add role="article" to chat message containers for screen readers

https://claude.ai/code/session_01JFvpTYgm8GiE4vJ4cJKsFx
---
 admin/inertia/components/StyledModal.tsx      |  5 ++++-
 .../inertia/components/chat/ChatInterface.tsx | 21 ++++++++++++-------
 .../components/chat/ChatMessageBubble.tsx     |  7 ++++++-
 admin/inertia/pages/settings/apps.tsx         | 10 ++++-----
 4 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/admin/inertia/components/StyledModal.tsx b/admin/inertia/components/StyledModal.tsx
index 0e0d784..31b9349 100644
--- a/admin/inertia/components/StyledModal.tsx
+++ b/admin/inertia/components/StyledModal.tsx
@@ -45,6 +45,9 @@ const StyledModal: React.FC<StyledModalProps> = ({
         if (onClose) onClose()
       }}
       className="relative z-50"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="styled-modal-title"
     >
       <DialogBackdrop
         transition
@@ -67,7 +70,7 @@ const StyledModal: React.FC<StyledModalProps> = ({
             <div>
               {icon && <div className="flex items-center justify-center">{icon}</div>}
               <div className="mt-3 text-center sm:mt-5">
-                <DialogTitle as="h3" className="text-base font-semibold text-text-primary">
+                <DialogTitle as="h3" id="styled-modal-title" className="text-base font-semibold text-text-primary">
                   {title}
                 </DialogTitle>
                 <div className="mt-2 !h-fit">{children}</div>
diff --git a/admin/inertia/components/chat/ChatInterface.tsx b/admin/inertia/components/chat/ChatInterface.tsx
index ffdd017..90e2b8a 100644
--- a/admin/inertia/components/chat/ChatInterface.tsx
+++ b/admin/inertia/components/chat/ChatInterface.tsx
@@ -1,5 +1,5 @@
 import { IconSend, IconWand } from '@tabler/icons-react'
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useCallback } from 'react'
 import classNames from '~/lib/classNames'
 import { ChatMessage } from '../../../types/chat'
 import ChatMessageBubble from './ChatMessageBubble'
@@ -84,6 +84,14 @@ export default function ChatInterface({
     e.target.style.height = `${Math.min(e.target.scrollHeight, 200)}px`
   }
 
+  const handleSuggestionClick = useCallback((suggestion: string) => {
+    setInput(suggestion)
+    // Focus the textarea after setting input
+    setTimeout(() => {
+      textareaRef.current?.focus()
+    }, 0)
+  }, [])
+
   return (
     <div className="flex-1 flex flex-col min-h-0 bg-surface-primary shadow-sm">
       <div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
@@ -102,13 +110,8 @@ export default function ChatInterface({
                     {chatSuggestions.map((suggestion, index) => (
                       <button
                         key={index}
-                        onClick={() => {
-                          setInput(suggestion)
-                          // Focus the textarea after setting input
-                          setTimeout(() => {
-                            textareaRef.current?.focus()
-                          }, 0)
-                        }}
+                        onClick={() => handleSuggestionClick(suggestion)}
+                        aria-label={`Use suggestion: ${suggestion}`}
                         className="px-4 py-2 bg-surface-secondary hover:bg-surface-secondary rounded-lg text-sm text-text-primary transition-colors"
                       >
                         {suggestion}
@@ -163,6 +166,7 @@ export default function ChatInterface({
               onChange={handleInput}
               onKeyDown={handleKeyDown}
               placeholder={`Type your message to ${aiAssistantName}... (Shift+Enter for new line)`}
+              aria-label={`Type your message to ${aiAssistantName}`}
               className="w-full resize-none rounded-lg border border-border-default px-4 py-3 pr-12 focus:outline-none focus:ring-2 focus:ring-desert-green focus:border-transparent disabled:bg-surface-secondary disabled:text-text-muted"
               rows={1}
               disabled={isLoading}
@@ -171,6 +175,7 @@ export default function ChatInterface({
           </div>
           <button
             type="submit"
+            aria-label="Send message"
             disabled={!input.trim() || isLoading}
             className={classNames(
               'p-3 rounded-lg transition-all duration-200 flex-shrink-0 mb-2',
diff --git a/admin/inertia/components/chat/ChatMessageBubble.tsx b/admin/inertia/components/chat/ChatMessageBubble.tsx
index 010b05d..4ec65cc 100644
--- a/admin/inertia/components/chat/ChatMessageBubble.tsx
+++ b/admin/inertia/components/chat/ChatMessageBubble.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import classNames from '~/lib/classNames'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -7,9 +8,11 @@ export interface ChatMessageBubbleProps {
   message: ChatMessage
 }
 
-export default function ChatMessageBubble({ message }: ChatMessageBubbleProps) {
+function ChatMessageBubble({ message }: ChatMessageBubbleProps) {
   return (
     <div
+      role="article"
+      aria-label={`${message.role === 'user' ? 'User' : 'Assistant'} message`}
       className={classNames(
         'max-w-[70%] rounded-lg px-4 py-3',
         message.role === 'user' ? 'bg-desert-green text-white' : 'bg-surface-secondary text-text-primary'
@@ -116,3 +119,5 @@ export default function ChatMessageBubble({ message }: ChatMessageBubbleProps) {
     </div>
   )
 }
+
+export default React.memo(ChatMessageBubble)
diff --git a/admin/inertia/pages/settings/apps.tsx b/admin/inertia/pages/settings/apps.tsx
index 48260c2..dc671fe 100644
--- a/admin/inertia/pages/settings/apps.tsx
+++ b/admin/inertia/pages/settings/apps.tsx
@@ -1,4 +1,4 @@
-import { Head } from '@inertiajs/react'
+import { Head, router } from '@inertiajs/react'
 import StyledTable from '~/components/StyledTable'
 import SettingsLayout from '~/layouts/SettingsLayout'
 import { ServiceSlim } from '../../../types/services'
@@ -43,7 +43,7 @@ export default function SettingsPage(props: { system: { services: ServiceSlim[]
       )
     ) {
       setTimeout(() => {
-        window.location.reload()
+        router.reload()
       }, 3000)
     }
   }, [installActivity])
@@ -52,7 +52,7 @@ export default function SettingsPage(props: { system: { services: ServiceSlim[]
   useEffect(() => {
     const unsubscribe = subscribe(BROADCAST_CHANNELS.SERVICE_UPDATES, () => {
       setCheckingUpdates(false)
-      window.location.reload()
+      router.reload()
     })
     return () => { unsubscribe() }
   }, [])
@@ -138,7 +138,7 @@ export default function SettingsPage(props: { system: { services: ServiceSlim[]
 
       setTimeout(() => {
         setLoading(false)
-        window.location.reload()
+        router.reload()
       }, 3000)
     } catch (error) {
       console.error(`Error affecting service ${record.service_name}:`, error)
@@ -161,7 +161,7 @@ export default function SettingsPage(props: { system: { services: ServiceSlim[]
 
       setTimeout(() => {
         setLoading(false)
-        window.location.reload()
+        router.reload()
       }, 3000)
     } catch (error) {
       console.error(`Error force reinstalling service ${record.service_name}:`, error)