From a2cfa5d010b49b923a927fe1947a9833f52a00a8 Mon Sep 17 00:00:00 2001
From: Junyi Hou <hji200914@gmail.com>
Date: Thu, 19 Feb 2026 01:24:45 +0800
Subject: [PATCH] refactor: improve state management and accessibility in
 components

- Updated `LoadingIndicator` to use `useReducer` for better state handling.
- Refactored `OnboardingGuide` to utilize `useReducer` for image loading state.
- Enhanced accessibility by adding `role` and `tabIndex` attributes to various interactive elements across components.
- Simplified state updates in `ChatHistoryModal` and `LoginWithOverleaf` by consolidating state management.
- Improved performance in `CodeBlock` by using `useMemo` for highlighted code.
- General code cleanup and consistency improvements across multiple components.
---
 webapp/_webapp/src/components/code-block.tsx  |  8 +--
 .../src/components/loading-indicator.tsx      | 42 ++++++++++---
 .../message-entry-container/assistant.tsx     |  6 +-
 .../message-entry-container/tools/general.tsx |  2 +-
 .../paper-score-comment/filter-controls.tsx   |  3 +
 .../message-entry-container/tools/tools.tsx   |  2 +-
 .../tools/xtramcp/generate-citations.tsx      |  6 ++
 .../tools/xtramcp/online-search-papers.tsx    |  6 ++
 .../tools/xtramcp/review-paper.tsx            | 16 +++--
 .../tools/xtramcp/search-relevant-papers.tsx  |  6 ++
 .../tools/xtramcp/verify-citations.tsx        |  6 ++
 .../tools/xtramcp/xtramcp-generic-card.tsx    |  9 +++
 .../src/components/onboarding-guide.tsx       | 61 +++++++++++++------
 webapp/_webapp/src/components/tabs.tsx        |  2 +-
 .../_webapp/src/components/text-patches.tsx   |  7 ++-
 webapp/_webapp/src/main.tsx                   | 26 ++------
 webapp/_webapp/src/stores/selection-store.ts  |  4 ++
 webapp/_webapp/src/views/chat/body/index.tsx  | 21 +++++++
 .../views/chat/footer/toolbar/selection.tsx   | 48 +++++++++++----
 .../src/views/chat/header/chat-button.tsx     |  9 +++
 .../views/chat/header/chat-history-modal.tsx  | 33 +++++-----
 webapp/_webapp/src/views/devtools/index.tsx   |  3 +-
 webapp/_webapp/src/views/embed-sidebar.tsx    |  2 +-
 .../src/views/login/advanced-settings.tsx     |  2 +-
 webapp/_webapp/src/views/login/index.tsx      |  3 +
 .../src/views/login/login-with-overleaf.tsx   |  6 +-
 webapp/_webapp/src/views/office/app.tsx       | 17 +++---
 .../views/prompts/project-instructions.tsx    |  2 +-
 .../src/views/prompts/user-instructions.tsx   |  2 +-
 .../src/views/settings/sections/footer.tsx    | 21 +++++++
 .../views/settings/sections/ui-settings.tsx   | 14 ++++-
 .../sections/user-developer-tools.tsx         |  2 +-
 .../src/views/settings/setting-text-input.tsx |  2 -
 33 files changed, 286 insertions(+), 113 deletions(-)

diff --git a/webapp/_webapp/src/components/code-block.tsx b/webapp/_webapp/src/components/code-block.tsx
index 16c71ec5..f237456d 100644
--- a/webapp/_webapp/src/components/code-block.tsx
+++ b/webapp/_webapp/src/components/code-block.tsx
@@ -3,7 +3,7 @@ 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;
@@ -11,11 +11,7 @@ type CodeBlockProps = {
 };
 
 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
diff --git a/webapp/_webapp/src/components/loading-indicator.tsx b/webapp/_webapp/src/components/loading-indicator.tsx
index 32329e5c..44fbf527 100644
--- a/webapp/_webapp/src/components/loading-indicator.tsx
+++ b/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);
diff --git a/webapp/_webapp/src/components/message-entry-container/assistant.tsx b/webapp/_webapp/src/components/message-entry-container/assistant.tsx
index 47743da3..ca692d44 100644
--- a/webapp/_webapp/src/components/message-entry-container/assistant.tsx
+++ b/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>
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/general.tsx b/webapp/_webapp/src/components/message-entry-container/tools/general.tsx
index f07a1c3a..c381ff03 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/general.tsx
+++ b/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"}
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/filter-controls.tsx b/webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/filter-controls.tsx
index cd438181..36104dfd 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/filter-controls.tsx
+++ b/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
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/tools.tsx b/webapp/_webapp/src/components/message-entry-container/tools/tools.tsx
index ad05288d..899c883c 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/tools.tsx
+++ b/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";
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/generate-citations.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/generate-citations.tsx
index db17ac73..90a24f6a 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/generate-citations.tsx
+++ b/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"
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/online-search-papers.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/online-search-papers.tsx
index 9ef7cb96..b493596e 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/online-search-papers.tsx
+++ b/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
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/review-paper.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/review-paper.tsx
index 44f5f80f..14aec0ef 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/review-paper.tsx
+++ b/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>
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/search-relevant-papers.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/search-relevant-papers.tsx
index 6c4aac51..c73ce21d 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/search-relevant-papers.tsx
+++ b/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
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/verify-citations.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/verify-citations.tsx
index edda90a1..245daefd 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/verify-citations.tsx
+++ b/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
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/xtramcp-generic-card.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/xtramcp-generic-card.tsx
index 8df506d6..d2d54216 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/xtramcp-generic-card.tsx
+++ b/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>
diff --git a/webapp/_webapp/src/components/onboarding-guide.tsx b/webapp/_webapp/src/components/onboarding-guide.tsx
index 772b45eb..14a3382f 100644
--- a/webapp/_webapp/src/components/onboarding-guide.tsx
+++ b/webapp/_webapp/src/components/onboarding-guide.tsx
@@ -1,6 +1,6 @@
 import { Button, Spinner } from "@heroui/react";
 import { Modal } from "./modal";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useReducer, useState } from "react";
 import { useSettingStore } from "../stores/setting-store";
 import { getUrl } from "../intermediate";
 import { Logo } from "./logo";
@@ -168,9 +168,9 @@ function OnboardingFooter({
       </div>
 
       <div className="flex flex-row justify-center gap-2 w-1/3">
-        {Array.from({ length: totalSteps }, (_, index) => (
+        {ONBOARDING_STEPS.slice(0, totalSteps).map((step, index) => (
           <div
-            key={index}
+            key={step.id}
             className={`w-2 h-2 rounded-full transition-colors duration-200 ${
               index === currentStep ? "bg-primary-500" : "bg-gray-300 dark:!bg-default-300"
             }`}
@@ -202,7 +202,10 @@ function OnboardingStep({ step, imageUrl, imageError, onImageClick, onImageError
             src={imageUrl}
             alt={step.title}
             className="w-full max-w-2xl h-auto rounded-lg cursor-pointer hover:opacity-90 transition-opacity duration-200"
+            role="button"
+            tabIndex={0}
             onClick={onImageClick}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { onImageClick(); } }}
             onError={onImageError}
           />
         </div>
@@ -235,7 +238,10 @@ function ImageModal({
             src={imageUrl}
             alt={title}
             className="max-h-[90vh] w-auto max-w-full object-contain rounded-lg shadow-lg cursor-pointer"
+            role="button"
+            tabIndex={0}
             onClick={onClose}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { onClose(); } }}
             onError={onImageError}
           />
         )}
@@ -273,22 +279,44 @@ function useOnboardingNavigation(totalSteps: number) {
   };
 }
 
+type ImageState = { imageUrl: string | undefined; imageError: boolean };
+type ImageAction =
+  | { type: "LOAD_START" }
+  | { type: "LOAD_SUCCESS"; url: string }
+  | { type: "LOAD_ERROR" }
+  | { type: "RESET" };
+
+function imageReducer(state: ImageState, action: ImageAction): ImageState {
+  switch (action.type) {
+    case "LOAD_START":
+      return { imageUrl: undefined, imageError: false };
+    case "LOAD_SUCCESS":
+      return { imageUrl: action.url, imageError: false };
+    case "LOAD_ERROR":
+      return { ...state, imageError: true };
+    case "RESET":
+      return { imageUrl: undefined, imageError: false };
+    default:
+      return state;
+  }
+}
+
 function useOnboardingImage(step: OnboardingStep) {
-  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);
-  const [imageError, setImageError] = useState(false);
+  const [{ imageUrl, imageError }, dispatch] = useReducer(imageReducer, { imageUrl: undefined, imageError: false });
 
   useEffect(() => {
     if (step.imagePath) {
-      setImageError(false);
+      dispatch({ type: "LOAD_START" });
       getUrl(step.imagePath)
-        .then(setImageUrl)
-        .catch(() => setImageError(true));
+        .then((url) => dispatch({ type: "LOAD_SUCCESS", url }))
+        .catch(() => dispatch({ type: "LOAD_ERROR" }));
     } else {
-      setImageUrl(undefined);
-      setImageError(false);
+      dispatch({ type: "RESET" });
     }
   }, [step.imagePath]);
 
+  const setImageError = useCallback(() => dispatch({ type: "LOAD_ERROR" }), []);
+
   return { imageUrl, imageError, setImageError };
 }
 
@@ -300,6 +328,7 @@ function useOnboardingKeyboardHandlers(
 ) {
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
+      if (!isOpen) return;
       switch (event.key) {
         case "ArrowRight":
           onNext();
@@ -312,15 +341,13 @@ function useOnboardingKeyboardHandlers(
           break;
       }
     },
-    [onNext, onPrevious, onComplete],
+    [isOpen, onNext, onPrevious, onComplete],
   );
 
   useEffect(() => {
-    if (isOpen) {
-      document.addEventListener("keydown", handleKeyDown);
-      return () => document.removeEventListener("keydown", handleKeyDown);
-    }
-  }, [isOpen, handleKeyDown]);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
 }
 
 // Main Component
@@ -359,7 +386,7 @@ export const OnboardingGuide = () => {
   }, []);
 
   const handleImageError = useCallback(() => {
-    setImageError(true);
+    setImageError();
   }, [setImageError]);
 
   const handleImageModalClose = useCallback(() => {
diff --git a/webapp/_webapp/src/components/tabs.tsx b/webapp/_webapp/src/components/tabs.tsx
index 35aca20c..fffc0a1d 100644
--- a/webapp/_webapp/src/components/tabs.tsx
+++ b/webapp/_webapp/src/components/tabs.tsx
@@ -151,7 +151,7 @@ export const Tabs = forwardRef<TabRef, TabProps>(({ items }, ref) => {
     <>
       <div className="pd-app-tab-items noselect relative" style={{ width: `${tabItemsWidth}px` }}>
         {/* Resize handle on the right edge */}
-        <div ref={resizeHandleRef} className="pd-tab-items-resize-handle" onMouseDown={handleMouseDown}>
+        <div ref={resizeHandleRef} className="pd-tab-items-resize-handle" role="separator" aria-label="Resize tabs" onMouseDown={handleMouseDown}>
           {/* Visual indicator line */}
           <div className="resize-handle-indicator" />
         </div>
diff --git a/webapp/_webapp/src/components/text-patches.tsx b/webapp/_webapp/src/components/text-patches.tsx
index f218171d..48d37797 100644
--- a/webapp/_webapp/src/components/text-patches.tsx
+++ b/webapp/_webapp/src/components/text-patches.tsx
@@ -88,8 +88,11 @@ export function TextPatches({ attachment, children }: TextPatchesProps) {
 
     let cntAdded = 0;
     let cntRemoved = 0;
-    const diffElements = diff.map((part, idx) => {
+    let charOffset = 0;
+    const diffElements = diff.map((part) => {
       const { value, added, removed } = part;
+      const key = `${added ? "a" : removed ? "r" : "n"}-${charOffset}`;
+      charOffset += value.length;
       let nodeStyles;
       if (added) {
         nodeStyles = "text-xs bg-green-200 text-green-800 px-[3px] py-px rounded-md";
@@ -101,7 +104,7 @@ export function TextPatches({ attachment, children }: TextPatchesProps) {
         nodeStyles = "text-xs text-gray-800";
       }
       return (
-        <span className={nodeStyles} key={idx}>
+        <span className={nodeStyles} key={key}>
           {value}
         </span>
       );
diff --git a/webapp/_webapp/src/main.tsx b/webapp/_webapp/src/main.tsx
index fad4cf68..965eaa30 100644
--- a/webapp/_webapp/src/main.tsx
+++ b/webapp/_webapp/src/main.tsx
@@ -1,4 +1,4 @@
-import { Extension } from "@codemirror/state";
+import type { Extension } from "@codemirror/state";
 import { useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -58,9 +58,7 @@ export const Main = () => {
     lastSelectedText,
     lastSurroundingText,
     lastSelectionRange,
-    setLastSelectedText,
-    setLastSurroundingText,
-    setLastSelectionRange,
+    setLastSelection,
     setSelectedText,
     setSurroundingText,
     setSelectionRange,
@@ -68,7 +66,7 @@ export const Main = () => {
   } = useSelectionStore();
   const [menuElement, setMenuElement] = useState<Element | null>(null);
   const { isOpen, setIsOpen } = useConversationUiStore();
-  const { settings, loadSettings, disableLineWrap, initLocalSettings } = useSettingStore();
+  const { settings, loadSettings, initLocalSettings } = useSettingStore();
   const { login } = useAuthStore();
   const { loadPrompts } = usePromptLibraryStore();
 
@@ -83,18 +81,6 @@ export const Main = () => {
     loadPrompts();
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => {
-    if (disableLineWrap) {
-      onElementAppeared(".cm-lineWrapping", (editor) => {
-        editor.classList.remove("cm-lineWrapping");
-      });
-    } else {
-      onElementAppeared(".cm-content", (editor) => {
-        editor.classList.add("cm-lineWrapping");
-      });
-    }
-  }, [disableLineWrap]);
-
   useEffect(() => {
     const handleSelectionChange = () => {
       const selection = window.getSelection();
@@ -102,7 +88,6 @@ export const Main = () => {
       const editor = document.querySelector(".cm-editor");
       if (editor && editor.contains(selection?.anchorNode ?? null)) {
         const text = selection?.toString() ?? null;
-        setLastSelectedText(text);
 
         let surrounding = "";
         try {
@@ -121,9 +106,8 @@ export const Main = () => {
         } catch {
           // fallback
         }
-        setLastSurroundingText(surrounding);
 
-        setLastSelectionRange(selection?.getRangeAt(0) ?? null);
+        setLastSelection(text, surrounding, selection?.getRangeAt(0) ?? null);
         return;
       } else {
         return;
@@ -133,7 +117,7 @@ export const Main = () => {
     return () => {
       document.removeEventListener("selectionchange", handleSelectionChange);
     };
-  }, [setLastSelectedText, setLastSelectionRange, setLastSurroundingText]);
+  }, [setLastSelection]);
 
   // Add effect to close context menu when clicking outside
 
diff --git a/webapp/_webapp/src/stores/selection-store.ts b/webapp/_webapp/src/stores/selection-store.ts
index 4d60ae2c..e6810486 100644
--- a/webapp/_webapp/src/stores/selection-store.ts
+++ b/webapp/_webapp/src/stores/selection-store.ts
@@ -16,6 +16,7 @@ type CoreState = {
 type SelectionStore = SetterStore<CoreState> & {
   clear: () => void;
   clearOverleafSelection: () => void;
+  setLastSelection: (text: string | null, surrounding: string, range: Range | null) => void;
 };
 
 export const useSelectionStore = create<SelectionStore>((set) => ({
@@ -43,6 +44,9 @@ export const useSelectionStore = create<SelectionStore>((set) => ({
   setLastSelectionRange: (lastSelectionRange) => {
     set({ lastSelectionRange });
   },
+  setLastSelection: (lastSelectedText, lastSurroundingText, lastSelectionRange) => {
+    set({ lastSelectedText, lastSurroundingText, lastSelectionRange });
+  },
   clear: () => {
     set({ selectedText: null, surroundingText: null, selectionRange: null });
   },
diff --git a/webapp/_webapp/src/views/chat/body/index.tsx b/webapp/_webapp/src/views/chat/body/index.tsx
index 40f33fe2..af307b0b 100644
--- a/webapp/_webapp/src/views/chat/body/index.tsx
+++ b/webapp/_webapp/src/views/chat/body/index.tsx
@@ -114,6 +114,8 @@ export const ChatBody = ({ conversation }: ChatBodyProps) => {
             <span>* Debug mode is enabled, </span>
             <span
               className={`${reloadSuccess ? "text-emerald-300" : "text-default-300 dark:!text-default-300"} underline cursor-pointer rnd-cancel`}
+              role="button"
+              tabIndex={0}
               onClick={async () => {
                 try {
                   const response = await getConversation({ conversationId: conversation?.id ?? "" });
@@ -131,6 +133,25 @@ export const ChatBody = ({ conversation }: ChatBodyProps) => {
                   }, 3000);
                 }
               }}
+              onKeyDown={async (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  try {
+                    const response = await getConversation({ conversationId: conversation?.id ?? "" });
+                    if (!response.conversation) {
+                      throw new Error(`Failed to load conversation ${conversation?.id ?? "unknown"}`);
+                    }
+                    setCurrentConversation(response.conversation);
+                    useStreamingStateMachine.getState().reset();
+                    setReloadSuccess(ReloadStatus.Success);
+                  } catch {
+                    setReloadSuccess(ReloadStatus.Failed);
+                  } finally {
+                    setTimeout(() => {
+                      setReloadSuccess(ReloadStatus.Default);
+                    }, 3000);
+                  }
+                }
+              }}
             >
               {reloadSuccess ? "reloaded" : "reload"}
             </span>
diff --git a/webapp/_webapp/src/views/chat/footer/toolbar/selection.tsx b/webapp/_webapp/src/views/chat/footer/toolbar/selection.tsx
index 596df7ba..71062f8d 100644
--- a/webapp/_webapp/src/views/chat/footer/toolbar/selection.tsx
+++ b/webapp/_webapp/src/views/chat/footer/toolbar/selection.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@heroui/react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useReducer, useRef } from "react";
 import googleAnalytics, { normalizeName } from "../../../../libs/google-analytics";
 import { useAuthStore } from "../../../../stores/auth-store";
 import { useConversationUiStore } from "../../../../stores/conversation/conversation-ui-store";
@@ -26,8 +26,23 @@ export function Selection<T>({ items, initialValue, onSelect, onClose }: Selecti
   const { minimalistMode } = useSettingStore();
   const { user } = useAuthStore();
   const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const [selectedIdx, setSelectedIdx] = useState<number>(0);
-  const [isKeyboardNavigation, setIsKeyboardNavigation] = useState(false);
+  const [{ selectedIdx, isKeyboardNavigation }, dispatchSelection] = useReducer(
+    (state: { selectedIdx: number; isKeyboardNavigation: boolean }, action: { type: "SET_IDX"; idx: number } | { type: "SET_KEYBOARD_NAV"; value: boolean } | { type: "SET_IDX_WITH_KEYBOARD_NAV"; idx: number }) => {
+      switch (action.type) {
+        case "SET_IDX":
+          return { ...state, selectedIdx: action.idx };
+        case "SET_KEYBOARD_NAV":
+          return { ...state, isKeyboardNavigation: action.value };
+        case "SET_IDX_WITH_KEYBOARD_NAV":
+          return { selectedIdx: action.idx, isKeyboardNavigation: true };
+        default:
+          return state;
+      }
+    },
+    { selectedIdx: 0, isKeyboardNavigation: false },
+  );
+  const setSelectedIdx = (idx: number) => dispatchSelection({ type: "SET_IDX", idx });
+  const setIsKeyboardNavigation = (value: boolean) => dispatchSelection({ type: "SET_KEYBOARD_NAV", value });
   const itemCount = items?.length ?? 0;
 
   useEffect(() => {
@@ -88,9 +103,6 @@ export function Selection<T>({ items, initialValue, onSelect, onClose }: Selecti
     };
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
-        setIsKeyboardNavigation(true);
-      }
       if (e.key === "ArrowDown") {
         e.preventDefault();
         e.stopPropagation();
@@ -101,10 +113,11 @@ export function Selection<T>({ items, initialValue, onSelect, onClose }: Selecti
         }
         if (nextIdx < itemCount) {
           scrollTo(nextIdx);
-          setSelectedIdx(nextIdx);
+          dispatchSelection({ type: "SET_IDX_WITH_KEYBOARD_NAV", idx: nextIdx });
+        } else {
+          dispatchSelection({ type: "SET_KEYBOARD_NAV", value: true });
         }
-      }
-      if (e.key === "ArrowUp") {
+      } else if (e.key === "ArrowUp") {
         e.preventDefault();
         e.stopPropagation();
         let prevIdx = selectedIdx - 1;
@@ -114,12 +127,14 @@ export function Selection<T>({ items, initialValue, onSelect, onClose }: Selecti
         }
         if (prevIdx >= 0) {
           scrollTo(prevIdx);
-          setSelectedIdx(prevIdx);
+          dispatchSelection({ type: "SET_IDX_WITH_KEYBOARD_NAV", idx: prevIdx });
+        } else {
+          dispatchSelection({ type: "SET_KEYBOARD_NAV", value: true });
         }
-      }
-      if (e.key === "Enter") {
+      } else if (e.key === "Enter") {
         e.preventDefault();
         e.stopPropagation();
+        dispatchSelection({ type: "SET_KEYBOARD_NAV", value: true });
         // Only select if not disabled
         if (!items[selectedIdx]?.disabled) {
           onSelect?.(items[selectedIdx]);
@@ -159,11 +174,20 @@ export function Selection<T>({ items, initialValue, onSelect, onClose }: Selecti
             idx === selectedIdx && !item.disabled && "bg-gray-100 dark:!bg-default-200",
             heightCollapseRequired || minimalistMode ? "px-2 py-1" : "p-2",
           )}
+          role="button"
+          tabIndex={item.disabled ? -1 : 0}
           onClick={() => {
             if (item.disabled) return;
             googleAnalytics.fireEvent(user?.id, `select_${normalizeName(item.title)}`, {});
             onSelect?.(item);
           }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              if (item.disabled) return;
+              googleAnalytics.fireEvent(user?.id, `select_${normalizeName(item.title)}`, {});
+              onSelect?.(item);
+            }
+          }}
           onMouseEnter={() => {
             if (!isKeyboardNavigation && !item.disabled) {
               setSelectedIdx(idx);
diff --git a/webapp/_webapp/src/views/chat/header/chat-button.tsx b/webapp/_webapp/src/views/chat/header/chat-button.tsx
index de15bf5c..a7824846 100644
--- a/webapp/_webapp/src/views/chat/header/chat-button.tsx
+++ b/webapp/_webapp/src/views/chat/header/chat-button.tsx
@@ -66,11 +66,20 @@ export const ChatButton = ({
             : "text-gray-500 dark:text-default-500 !border-gray-100 dark:!border-default-200 hover:border-gray-200 dark:hover:border-default-300",
         iconLoaded ? "opacity-100" : "opacity-0",
       )}
+      role="button"
+      tabIndex={disabled ? -1 : 0}
       onClick={() => {
         if (disabled) return;
         googleAnalytics.fireEvent(user?.id, "click_chat_button_" + normalizeName(text ?? alt ?? icon), {});
         onClick?.();
       }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          if (disabled) return;
+          googleAnalytics.fireEvent(user?.id, "click_chat_button_" + normalizeName(text ?? alt ?? icon), {});
+          onClick?.();
+        }
+      }}
       onMouseEnter={() => !disabled && setIsHovered(true)}
       onMouseLeave={() => !disabled && setIsHovered(false)}
       onMouseDown={onMouseDown}
diff --git a/webapp/_webapp/src/views/chat/header/chat-history-modal.tsx b/webapp/_webapp/src/views/chat/header/chat-history-modal.tsx
index 1c8c42f7..d3999f43 100644
--- a/webapp/_webapp/src/views/chat/header/chat-history-modal.tsx
+++ b/webapp/_webapp/src/views/chat/header/chat-history-modal.tsx
@@ -1,6 +1,6 @@
 import { Input, Listbox, ListboxItem, ListboxSection, Tooltip } from "@heroui/react";
 import { Icon } from "@iconify/react";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Conversation } from "../../../pkg/gen/apiclient/chat/v2/chat_pb";
 import { getConversation, updateConversation } from "../../../query/api";
 import { errorToast } from "../../../libs/toasts";
@@ -28,10 +28,12 @@ export const ChatHistoryModal = () => {
   const { user } = useAuthStore();
   const [searchQuery, setSearchQuery] = useState("");
   const [hoveredItemId, setHoveredItemId] = useState<string | null>(null);
-  const [editingTitleId, setEditingTitleId] = useState<string | null>(null);
-  const [editedTitle, setEditedTitle] = useState("");
+  const [editState, setEditState] = useState<{ id: string | null; title: string }>({ id: null, title: "" });
   const [deletingId, setDeletingId] = useState<string | null>(null);
 
+  const editingTitleId = editState.id;
+  const editedTitle = editState.title;
+
   // Refs
   const inputRef = useRef<HTMLInputElement | null>(null);
   const editInputRef = useRef<HTMLInputElement | null>(null);
@@ -50,8 +52,7 @@ export const ChatHistoryModal = () => {
 
   // Title editing handlers
   const handleEditTitle = (chat: Conversation) => {
-    setEditingTitleId(chat.id);
-    setEditedTitle(chat.title);
+    setEditState({ id: chat.id, title: chat.title });
     setTimeout(() => {
       editInputRef.current?.focus();
       editInputRef.current?.select();
@@ -60,13 +61,13 @@ export const ChatHistoryModal = () => {
 
   const handleSaveTitle = async (id: string) => {
     if (!editedTitle.trim()) {
-      setEditingTitleId(null);
+      setEditState({ id: null, title: "" });
       return;
     }
 
     const chatToUpdate = conversations?.conversations.find((chat) => chat.id === id);
     if (!chatToUpdate || chatToUpdate.title === editedTitle.trim()) {
-      setEditingTitleId(null);
+      setEditState({ id: null, title: "" });
       return;
     }
 
@@ -79,14 +80,14 @@ export const ChatHistoryModal = () => {
         title: editedTitle.trim(),
       });
       await refetchConversationList();
-      setEditingTitleId(null);
+      setEditState({ id: null, title: "" });
     } catch (e) {
       errorToast("Failed to update conversation title");
       logError(e);
     }
   };
 
-  const handleCancelEdit = () => setEditingTitleId(null);
+  const handleCancelEdit = () => setEditState({ id: null, title: "" });
 
   // Delete handler
   const handleDeleteConversation = (id: string, e: React.MouseEvent) => {
@@ -145,7 +146,7 @@ export const ChatHistoryModal = () => {
             value={editedTitle}
             onChange={(e) => {
               e.stopPropagation();
-              setEditedTitle(e.target.value);
+              setEditState((prev) => ({ ...prev, title: e.target.value }));
             }}
             onKeyDown={(e) => {
               e.stopPropagation();
@@ -177,18 +178,14 @@ export const ChatHistoryModal = () => {
     </ListboxItem>
   );
 
-  // refetch conversation list when showHistory is true
-  useEffect(() => {
-    if (showChatHistory) {
-      refetchConversationList();
-    }
-  }, [showChatHistory, refetchConversationList]);
-
   return (
     <Modal
       isOpen={showChatHistory}
       onOpenChange={(open) => {
-        if (open) inputRef.current?.focus();
+        if (open) {
+          inputRef.current?.focus();
+          refetchConversationList();
+        }
         setShowChatHistory(open);
       }}
       disableAnimation={true}
diff --git a/webapp/_webapp/src/views/devtools/index.tsx b/webapp/_webapp/src/views/devtools/index.tsx
index f105785e..1376acba 100644
--- a/webapp/_webapp/src/views/devtools/index.tsx
+++ b/webapp/_webapp/src/views/devtools/index.tsx
@@ -310,8 +310,9 @@ export const DevTools = () => {
 
             {/* Preparing delay */}
             <div className="flex flex-row gap-2 items-center pt-2 border-t !border-orange-200">
-              <label className="text-sm text-gray-700 whitespace-nowrap">Preparing delay (seconds):</label>
+              <label htmlFor="preparing-delay-input" className="text-sm text-gray-700 whitespace-nowrap">Preparing delay (seconds):</label>
               <Input
+                id="preparing-delay-input"
                 size="sm"
                 type="number"
                 min="0"
diff --git a/webapp/_webapp/src/views/embed-sidebar.tsx b/webapp/_webapp/src/views/embed-sidebar.tsx
index 24c2bc4f..3b29f81c 100644
--- a/webapp/_webapp/src/views/embed-sidebar.tsx
+++ b/webapp/_webapp/src/views/embed-sidebar.tsx
@@ -264,7 +264,7 @@ export const EmbedSidebar = () => {
       }}
     >
       {/* Resize handle on the left */}
-      <div ref={resizeHandleRef} className="pd-embed-resize-handle" onMouseDown={handleMouseDown}>
+      <div ref={resizeHandleRef} className="pd-embed-resize-handle" role="separator" aria-label="Resize sidebar" onMouseDown={handleMouseDown}>
         {/* Visual indicator line */}
         <div className="resize-handle-indicator" />
       </div>
diff --git a/webapp/_webapp/src/views/login/advanced-settings.tsx b/webapp/_webapp/src/views/login/advanced-settings.tsx
index 17b0bb62..eb3b464f 100644
--- a/webapp/_webapp/src/views/login/advanced-settings.tsx
+++ b/webapp/_webapp/src/views/login/advanced-settings.tsx
@@ -3,7 +3,7 @@ import { SettingItemInput } from "../settings/setting-item-input";
 import apiclient, { apiclientV2, getEndpointFromLocalStorage, resetApiClientEndpoint } from "../../libs/apiclient";
 
 export default function AdvancedSettings() {
-  const [endpoint, setEndpoint] = useState(getEndpointFromLocalStorage());
+  const [endpoint, setEndpoint] = useState(() => getEndpointFromLocalStorage());
 
   useEffect(() => {
     apiclient.updateBaseURL(endpoint, "v1");
diff --git a/webapp/_webapp/src/views/login/index.tsx b/webapp/_webapp/src/views/login/index.tsx
index 4451dd08..cc3f3fd0 100644
--- a/webapp/_webapp/src/views/login/index.tsx
+++ b/webapp/_webapp/src/views/login/index.tsx
@@ -86,9 +86,12 @@ export const Login = () => {
 
       <div
         className="text-xs text-gray-500 mt-2 text-center max-w-xs hover:cursor-pointer hover:underline"
+        role="button"
+        tabIndex={0}
         onClick={() => {
           setShowEndpointSettings(!showEndpointSettings);
         }}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setShowEndpointSettings(!showEndpointSettings); } }}
       >
         Advanced Options
       </div>
diff --git a/webapp/_webapp/src/views/login/login-with-overleaf.tsx b/webapp/_webapp/src/views/login/login-with-overleaf.tsx
index 2e581b24..1bfb3a37 100644
--- a/webapp/_webapp/src/views/login/login-with-overleaf.tsx
+++ b/webapp/_webapp/src/views/login/login-with-overleaf.tsx
@@ -35,8 +35,7 @@ export default function LoginWithOverleaf({
       setToken(resp.token);
       setRefreshToken(resp.refreshToken);
       await login();
-      await loadSettings();
-      await loadPrompts();
+      await Promise.all([loadSettings(), loadPrompts()]);
     } catch (e) {
       setErrorMessage("Login failed: " + (e as Error).message);
     } finally {
@@ -57,7 +56,10 @@ export default function LoginWithOverleaf({
   return (
     <div
       className="mt-[1rem] border !border-primary-700 rounded-lg px-3 h-[32px] min-h-[32px] w-[196px] flex flex-row items-center bg-primary-700 text-white cursor-pointer"
+      role="button"
+      tabIndex={0}
       onClick={() => onOverleafLogin()}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { onOverleafLogin(); } }}
       style={{
         cursor: isLoginLoading ? "wait" : "pointer",
       }}
diff --git a/webapp/_webapp/src/views/office/app.tsx b/webapp/_webapp/src/views/office/app.tsx
index 7698860b..351b495c 100644
--- a/webapp/_webapp/src/views/office/app.tsx
+++ b/webapp/_webapp/src/views/office/app.tsx
@@ -1,7 +1,7 @@
 import r2wc from "@r2wc/react-to-web-component";
 import { MainDrawer } from "..";
 import { useConversationUiStore } from "../../stores/conversation/conversation-ui-store";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Providers } from "./providers";
 import { AdapterProvider, type DocumentAdapter } from "../../adapters";
 import { useAuthStore } from "../../stores/auth-store";
@@ -20,13 +20,20 @@ interface PaperDebuggerProps {
 }
 
 const PaperDebugger = ({ displayMode = "fullscreen", adapterId }: PaperDebuggerProps) => {
-  const { setDisplayMode, setIsOpen, isOpen } = useConversationUiStore();
+  const { setDisplayMode, setIsOpen } = useConversationUiStore();
   const { initFromStorage: initAuthFromStorage, login } = useAuthStore();
   const { initLocalSettings } = useSettingStore();
   const [isInitialized, setIsInitialized] = useState(false);
+  const prevDisplayModeRef = useRef<typeof displayMode | null>(null);
 
   useThemeSync();
 
+  // Sync displayMode prop to store during render (compute during render instead of useEffect)
+  if (prevDisplayModeRef.current !== displayMode) {
+    prevDisplayModeRef.current = displayMode;
+    setDisplayMode(displayMode);
+  }
+
   // Initialize stores from storage on mount
   // This must happen before the main UI renders to restore login state and settings
   useEffect(() => {
@@ -36,14 +43,10 @@ const PaperDebugger = ({ displayMode = "fullscreen", adapterId }: PaperDebuggerP
     initLocalSettings();
     // Attempt to login with restored tokens
     login();
+    setIsOpen(true);
     setIsInitialized(true);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => {
-    setDisplayMode(displayMode);
-    setIsOpen(true);
-  }, [setIsOpen, isOpen, setDisplayMode, displayMode]);
-
   // Get adapter from registry (must be registered by the host application)
   const adapter = useMemo<DocumentAdapter | null>(() => {
     if (adapterId) {
diff --git a/webapp/_webapp/src/views/prompts/project-instructions.tsx b/webapp/_webapp/src/views/prompts/project-instructions.tsx
index 27d47826..21acd0cc 100644
--- a/webapp/_webapp/src/views/prompts/project-instructions.tsx
+++ b/webapp/_webapp/src/views/prompts/project-instructions.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useRef, useEffect, useState } from "react";
 import { Button, cn } from "@heroui/react";
 import { SettingsSectionContainer, SettingsSectionTitle } from "../settings/sections/components";
-import { useGetProjectInstructionsQuery, useUpsertProjectInstructionsMutation } from "../../query/index";
+import { useGetProjectInstructionsQuery, useUpsertProjectInstructionsMutation } from "../../query";
 import { useQueryClient } from "@tanstack/react-query";
 import { queryKeys } from "../../query/keys";
 import { getProjectId } from "../../libs/helpers";
diff --git a/webapp/_webapp/src/views/prompts/user-instructions.tsx b/webapp/_webapp/src/views/prompts/user-instructions.tsx
index 90a8842c..c1617661 100644
--- a/webapp/_webapp/src/views/prompts/user-instructions.tsx
+++ b/webapp/_webapp/src/views/prompts/user-instructions.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useRef, useEffect, useState } from "react";
 import { Button, cn } from "@heroui/react";
 import { SettingsSectionContainer, SettingsSectionTitle } from "../settings/sections/components";
-import { useGetUserInstructionsQuery, useUpsertUserInstructionsMutation } from "../../query/index";
+import { useGetUserInstructionsQuery, useUpsertUserInstructionsMutation } from "../../query";
 import { useQueryClient } from "@tanstack/react-query";
 import { queryKeys } from "../../query/keys";
 
diff --git a/webapp/_webapp/src/views/settings/sections/footer.tsx b/webapp/_webapp/src/views/settings/sections/footer.tsx
index 8b7de630..6e7c8d12 100644
--- a/webapp/_webapp/src/views/settings/sections/footer.tsx
+++ b/webapp/_webapp/src/views/settings/sections/footer.tsx
@@ -19,6 +19,8 @@ export const SettingsFooter = () => {
         </span>
         <div
           className="text-xs font-light select-none"
+          role="button"
+          tabIndex={0}
           onClick={() => {
             setVersionClickCount((prev: number) => {
               const next = prev + 1;
@@ -36,6 +38,25 @@ export const SettingsFooter = () => {
             }, 1500);
             setVersionClickTimeout(timeout);
           }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              setVersionClickCount((prev: number) => {
+                const next = prev + 1;
+                if (next >= 5) {
+                  setEnableUserDeveloperTools(!enableUserDeveloperTools);
+                  return 0;
+                }
+                return next;
+              });
+              if (versionClickTimeout) {
+                clearTimeout(versionClickTimeout);
+              }
+              const timeout = setTimeout(() => {
+                setVersionClickCount(0);
+              }, 1500);
+              setVersionClickTimeout(timeout);
+            }
+          }}
         >
           version:{" "}
           {manifest?.version && manifest?.version_name ? `${manifest.version}, ${manifest.version_name}` : "unknown"}
diff --git a/webapp/_webapp/src/views/settings/sections/ui-settings.tsx b/webapp/_webapp/src/views/settings/sections/ui-settings.tsx
index f43c87e9..0135ce84 100644
--- a/webapp/_webapp/src/views/settings/sections/ui-settings.tsx
+++ b/webapp/_webapp/src/views/settings/sections/ui-settings.tsx
@@ -2,6 +2,7 @@ import { SettingsSectionContainer, SettingsSectionTitle } from "./components";
 import { useSettingStore } from "../../../stores/setting-store";
 import { SettingItem } from "../setting-items";
 import { SettingItemSelect } from "../setting-item-select";
+import { onElementAppeared } from "../../../libs/helpers";
 
 const THEME_OPTIONS: Record<string, string> = {
   auto: "Auto",
@@ -72,7 +73,18 @@ export const UISettings = () => {
         label="Disable line wrap"
         description="Disable Overleaf's line wrap feature."
         selected={disableLineWrap}
-        onSelectChange={(selected) => setDisableLineWrap(selected)}
+        onSelectChange={(selected) => {
+          setDisableLineWrap(selected);
+          if (selected) {
+            onElementAppeared(".cm-lineWrapping", (editor) => {
+              editor.classList.remove("cm-lineWrapping");
+            });
+          } else {
+            onElementAppeared(".cm-content", (editor) => {
+              editor.classList.add("cm-lineWrapping");
+            });
+          }
+        }}
       />
     </SettingsSectionContainer>
   );
diff --git a/webapp/_webapp/src/views/settings/sections/user-developer-tools.tsx b/webapp/_webapp/src/views/settings/sections/user-developer-tools.tsx
index 9cd93c0c..467e26a4 100644
--- a/webapp/_webapp/src/views/settings/sections/user-developer-tools.tsx
+++ b/webapp/_webapp/src/views/settings/sections/user-developer-tools.tsx
@@ -8,7 +8,7 @@ import { useAdapter } from "../../../adapters/context";
 
 export const UserDeveloperTools = () => {
   const { conversationMode, setConversationMode } = useSettingStore();
-  const [endpoint, setEndpoint] = useState(getEndpointFromLocalStorage());
+  const [endpoint, setEndpoint] = useState(() => getEndpointFromLocalStorage());
   const adapter = useAdapter();
   const documentId = adapter.getDocumentId?.() || "N/A";
 
diff --git a/webapp/_webapp/src/views/settings/setting-text-input.tsx b/webapp/_webapp/src/views/settings/setting-text-input.tsx
index 6f11a21a..ff52778c 100644
--- a/webapp/_webapp/src/views/settings/setting-text-input.tsx
+++ b/webapp/_webapp/src/views/settings/setting-text-input.tsx
@@ -141,7 +141,6 @@ export function createSettingsTextInput<K extends SettingKey>(settingKey: K) {
                 value={value}
                 onChange={(e) => setValue(e.target.value)}
                 rows={rows}
-                autoFocus
               />
             ) : (
               <input
@@ -152,7 +151,6 @@ export function createSettingsTextInput<K extends SettingKey>(settingKey: K) {
                 placeholder={placeholder}
                 value={value}
                 onChange={(e) => setValue(e.target.value)}
-                autoFocus
               />
             )}
             <div className="flex gap-2 shrink-0">