refactor: improve state management and accessibility in components

webapp/_webapp/src/components/code-block.tsx

@@ -3,19 +3,15 @@ import "highlight.js/styles/default.min.css";
 import latex from "highlight.js/lib/languages/latex";
 hljs.registerLanguage("latex", latex);
 
-import { useState, useEffect } from "react";
+import { useMemo } from "react";
 
 type CodeBlockProps = {
   code: string;
   className?: string;
 };
 
 export const CodeBlock = ({ code, className }: CodeBlockProps) => {
-  const [highlightedCode, setHighlightedCode] = useState(code);
-
-  useEffect(() => {
-    setHighlightedCode(hljs.highlight(code, { language: "latex" }).value);
-  }, [code]);
+  const highlightedCode = useMemo(() => hljs.highlight(code, { language: "latex" }).value, [code]);
 
   return (
     <pre

webapp/_webapp/src/components/loading-indicator.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useReducer, useEffect } from "react";
 
 // ============================================================================
 // Types
@@ -49,11 +49,37 @@ const PHASE_STYLES = {
 // Component
 // ============================================================================
 
+type IndicatorState = {
+  progress: number;
+  phase: Phase;
+  isTimeout: boolean;
+};
+
+type IndicatorAction =
+  | { type: "SET_PROGRESS"; progress: number }
+  | { type: "ADVANCE_PHASE"; nextPhase: Phase }
+  | { type: "SET_TIMEOUT" };
+
+function indicatorReducer(state: IndicatorState, action: IndicatorAction): IndicatorState {
+  switch (action.type) {
+    case "SET_PROGRESS":
+      return { ...state, progress: action.progress };
+    case "ADVANCE_PHASE":
+      return { ...state, phase: action.nextPhase, progress: 0 };
+    case "SET_TIMEOUT":
+      return { ...state, isTimeout: true };
+    default:
+      return state;
+  }
+}
+
 export const LoadingIndicator = ({ text = "Thinking", estimatedSeconds = 0, errorMessage }: LoadingIndicatorProps) => {
   // State
-  const [progress, setProgress] = useState(0);
-  const [phase, setPhase] = useState<Phase>("green");
-  const [isTimeout, setIsTimeout] = useState(false);
+  const [{ progress, phase, isTimeout }, dispatch] = useReducer(indicatorReducer, {
+    progress: 0,
+    phase: "green",
+    isTimeout: false,
+  });
 
   // Handle progress animation
   useEffect(() => {
@@ -103,18 +129,18 @@ export const LoadingIndicator = ({ text = "Thinking", estimatedSeconds = 0, erro
         // we spend 100% of estimatedDuration in green,
         // 50% in orange, and 50% in red before warning.
         if (phase === "green") {
-          setPhase("orange");
+          dispatch({ type: "ADVANCE_PHASE", nextPhase: "orange" });
           currentProgress = 0;
         } else if (phase === "orange") {
-          setPhase("red");
+          dispatch({ type: "ADVANCE_PHASE", nextPhase: "red" });
           currentProgress = 0;
         } else if (phase === "red") {
-          setIsTimeout(true);
+          dispatch({ type: "SET_TIMEOUT" });
           return;
         }
       }
 
-      setProgress(currentProgress);
+      dispatch({ type: "SET_PROGRESS", progress: currentProgress });
 
       if (!isTimeout) {
         animationFrameId = requestAnimationFrame(updateProgress);

webapp/_webapp/src/components/message-entry-container/assistant.tsx

@@ -132,8 +132,8 @@ export const AssistantMessageContainer = ({
             )}
 
             {/* PaperDebugger blocks */}
-            {parsedMessage.paperDebuggerContent.map((content, index) => (
-              <TextPatches key={index} attachment={prevAttachment}>
+            {parsedMessage.paperDebuggerContent.map((content) => (
+              <TextPatches key={content} attachment={prevAttachment}>
                 {content}
               </TextPatches>
             ))}
@@ -147,7 +147,7 @@ export const AssistantMessageContainer = ({
           {((parsedMessage.regularContent?.length || 0) > 0 || parsedMessage.paperDebuggerContent.length > 0) && (
             <div className="actions rnd-cancel noselect">
               <Tooltip content="Copy" placement="bottom" size="sm" delay={1000}>
-                <span onClick={handleCopy} tabIndex={0} role="button" aria-label="Copy message">
+                <span onClick={handleCopy} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { handleCopy(); } }} tabIndex={0} role="button" aria-label="Copy message">
                   <Icon icon={copySuccess ? "tabler:copy-check" : "tabler:copy"} className="icon" />
                 </span>
               </Tooltip>

webapp/_webapp/src/components/message-entry-container/tools/general.tsx

@@ -95,7 +95,7 @@ export const GeneralToolCard = ({
   // When there is a message, show the compact card with collapsible content
   return (
     <div className={cn("tool-card noselect compact", { animated: animated })}>
-      <div className="flex items-center gap-1 cursor-pointer" onClick={toggleCollapse}>
+      <div className="flex items-center gap-1 cursor-pointer" role="button" tabIndex={0} onClick={toggleCollapse} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { toggleCollapse(); } }}>
         <button
           className="text-gray-400 hover:text-gray-600 transition-colors duration-200 rounded flex"
           aria-label={isCollapsed ? "Expand" : "Collapse"}

webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/filter-controls.tsx

@@ -38,7 +38,10 @@ export const FilterControls = ({
     <div>
       <div
         className="!flex !items-center !justify-between !mb-1 !px-2 cursor-pointer"
+        role="button"
+        tabIndex={0}
         onClick={() => setIsSuggestionsExpanded(!isSuggestionsExpanded)}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsSuggestionsExpanded(!isSuggestionsExpanded); } }}
       >
         <button className="!flex !items-center !gap-2 !text-sm !font-semibold !text-gray-800 hover:!text-gray-600 !transition-colors truncate">
           <Icon

webapp/_webapp/src/components/message-entry-container/tools/tools.tsx

@@ -1,5 +1,5 @@
 import { PaperScoreCard } from "./paper-score";
-import { PaperScoreCommentCard } from "./paper-score-comment/index";
+import { PaperScoreCommentCard } from "./paper-score-comment";
 import { GreetingCard } from "./greeting";
 import { ErrorToolCard } from "./error";
 import { AlwaysExceptionCard } from "./always-exception";

webapp/_webapp/src/components/message-entry-container/tools/xtramcp/generate-citations.tsx

@@ -40,7 +40,10 @@ export const GenerateCitationsCard = ({ functionName, message, preparing, animat
         {/* Header with Error label and arrow button */}
         <div
           className="flex items-center justify-between cursor-pointer"
+          role="button"
+          tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -68,7 +71,10 @@ export const GenerateCitationsCard = ({ functionName, message, preparing, animat
           {/* Header with arrow button */}
           <div
             className="flex items-center cursor-pointer gap-1"
+            role="button"
+            tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
           >
             <button
               className="text-gray-400 hover:text-gray-600 transition-colors duration-200 rounded flex"

webapp/_webapp/src/components/message-entry-container/tools/xtramcp/online-search-papers.tsx

@@ -40,7 +40,10 @@ export const OnlineSearchPapersCard = ({ functionName, message, preparing, anima
         {/* Header with Error label and arrow button */}
         <div
           className="flex items-center justify-between cursor-pointer"
+          role="button"
+          tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -72,7 +75,10 @@ export const OnlineSearchPapersCard = ({ functionName, message, preparing, anima
           {/* Header with arrow button */}
           <div
             className="flex items-center justify-between cursor-pointer"
+            role="button"
+            tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton

webapp/_webapp/src/components/message-entry-container/tools/xtramcp/review-paper.tsx

@@ -4,8 +4,8 @@ import MarkdownComponent from "../../../markdown";
 import { useState } from "react";
 import { XtraMcpToolCardProps, parseXtraMcpToolResult, CollapseArrowButton, CollapseWrapper } from "./utils/common";
 
-// Helper function to render severity levels with strikethrough
-const renderSeverityLevels = (threshold: string) => {
+// Component to render severity levels with strikethrough
+const SeverityLevels = ({ threshold }: { threshold: string }) => {
   const levels = ["nit", "minor", "major", "blocker"];
   const thresholdIndex = levels.indexOf(threshold.toLowerCase());
 
@@ -30,7 +30,7 @@ const renderSeverityLevels = (threshold: string) => {
   );
 };
 
-const renderSections = (sections: Array<string>) => {
+const Sections = ({ sections }: { sections: Array<string> }) => {
   return (
     <span>
       {sections.map((section, index) => (
@@ -81,7 +81,10 @@ export const ReviewPaperCard = ({ functionName, message, preparing, animated }:
         {/* Header with Error label and arrow button */}
         <div
           className="flex items-center justify-between cursor-pointer"
+          role="button"
+          tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -113,7 +116,10 @@ export const ReviewPaperCard = ({ functionName, message, preparing, animated }:
           {/* Header with arrow button */}
           <div
             className="flex items-center justify-between cursor-pointer"
+            role="button"
+            tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
@@ -144,13 +150,13 @@ export const ReviewPaperCard = ({ functionName, message, preparing, animated }:
                 {result.metadata.severity_threshold && (
                   <div className="mb-2">
                     <span className="font-medium">Filtered:</span>{" "}
-                    {renderSeverityLevels(result.metadata.severity_threshold)}
+                    <SeverityLevels threshold={result.metadata.severity_threshold} />
                   </div>
                 )}
                 {result.metadata.sections_reviewed && (
                   <div>
                     <span className="font-medium">Sections reviewed:</span>{" "}
-                    {renderSections(result.metadata.sections_reviewed)}
+                    <Sections sections={result.metadata.sections_reviewed} />
                   </div>
                 )}
               </div>

webapp/_webapp/src/components/message-entry-container/tools/xtramcp/search-relevant-papers.tsx

@@ -48,7 +48,10 @@ export const SearchRelevantPapersCard = ({ functionName, message, preparing, ani
         {/* Header with Error label and arrow button */}
         <div
           className="flex items-center justify-between cursor-pointer"
+          role="button"
+          tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -80,7 +83,10 @@ export const SearchRelevantPapersCard = ({ functionName, message, preparing, ani
           {/* Header with arrow button */}
           <div
             className="flex items-center justify-between cursor-pointer"
+            role="button"
+            tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton

webapp/_webapp/src/components/message-entry-container/tools/xtramcp/verify-citations.tsx

@@ -40,7 +40,10 @@ export const VerifyCitationsCard = ({ functionName, message, preparing, animated
         {/* Header with Error label and arrow button */}
         <div
           className="flex items-center justify-between cursor-pointer"
+          role="button"
+          tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -72,7 +75,10 @@ export const VerifyCitationsCard = ({ functionName, message, preparing, animated
           {/* Header with arrow button */}
           <div
             className="flex items-center justify-between cursor-pointer"
+            role="button"
+            tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton

webapp/_webapp/src/components/message-entry-container/tools/xtramcp/xtramcp-generic-card.tsx

@@ -40,7 +40,10 @@ export const XtraMcpGenericCard = ({ functionName, message, preparing, animated
         {/* Header with Error label and arrow button */}
         <div
           className="flex items-center justify-between cursor-pointer"
+          role="button"
+          tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -71,7 +74,10 @@ export const XtraMcpGenericCard = ({ functionName, message, preparing, animated
           {/* Header with arrow button */}
           <div
             className="flex items-center justify-between cursor-pointer"
+            role="button"
+            tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
@@ -139,7 +145,10 @@ export const XtraMcpGenericCard = ({ functionName, message, preparing, animated
       <div className={cn("tool-card noselect narrow", { animated: animated })}>
         <div
           className="flex items-center justify-between cursor-pointer"
+          role="button"
+          tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
         </div>