From bf223bc9c5f2dd63921e9b6512f729d9f4ec24d1 Mon Sep 17 00:00:00 2001
From: xprilion <xprilion@gmail.com>
Date: Wed, 29 Apr 2026 22:51:32 +0530
Subject: [PATCH 1/3] Sonarqube cleanup 5

---
 backend/openmlr/routes/terminal.py            | 22 +++++++------
 backend/tests/test_sandbox_types.py           |  2 +-
 backend/tests/test_tools_workspace.py         |  7 +++--
 frontend/src/components/ConfirmDialog.tsx     |  4 +++
 frontend/src/components/FileTree.tsx          |  2 +-
 frontend/src/components/ModelModal.tsx        |  7 +++++
 frontend/src/components/OnboardingModal.tsx   |  6 ++--
 .../src/components/ProjectManageModal.tsx     |  5 +++
 frontend/src/components/ProjectModal.tsx      |  6 ++--
 frontend/src/components/ReportDrawer.tsx      |  7 ++++-
 frontend/src/components/RightPanel.tsx        |  2 +-
 frontend/src/components/Sidebar.tsx           |  9 ++++++
 frontend/src/components/Terminal.tsx          |  8 +++++
 .../src/components/settings/AddKeyModal.tsx   | 14 ++++++---
 .../src/components/settings/AddNodeModal.tsx  | 31 ++++++++++++-------
 .../src/components/settings/AgentSettings.tsx |  6 ++--
 .../src/components/settings/McpSettings.tsx   | 19 +++++++-----
 .../components/settings/ProvidersSettings.tsx | 23 ++++++++++----
 .../components/settings/WritingSettings.tsx   | 18 +++++++----
 19 files changed, 142 insertions(+), 56 deletions(-)

diff --git a/backend/openmlr/routes/terminal.py b/backend/openmlr/routes/terminal.py
index 99b3f2b..967f759 100644
--- a/backend/openmlr/routes/terminal.py
+++ b/backend/openmlr/routes/terminal.py
@@ -192,15 +192,19 @@ async def terminal_websocket(
     shell = "/bin/bash"
 
     try:
-        proc = subprocess.Popen(
-            [shell, "--norc", "--noprofile"],
-            stdin=slave_fd,
-            stdout=slave_fd,
-            stderr=slave_fd,
-            cwd=workspace_path,
-            env=env,
-            start_new_session=True,
-            close_fds=True,
+        loop = asyncio.get_event_loop()
+        proc = await loop.run_in_executor(
+            None,
+            lambda: subprocess.Popen(
+                [shell, "--norc", "--noprofile"],
+                stdin=slave_fd,
+                stdout=slave_fd,
+                stderr=slave_fd,
+                cwd=workspace_path,
+                env=env,
+                start_new_session=True,
+                close_fds=True,
+            ),
         )
         pid = proc.pid
     except Exception as e:
diff --git a/backend/tests/test_sandbox_types.py b/backend/tests/test_sandbox_types.py
index bcc7be2..08c36a5 100644
--- a/backend/tests/test_sandbox_types.py
+++ b/backend/tests/test_sandbox_types.py
@@ -53,7 +53,7 @@ def test_failure(self):
         r = ExecutionResult(output="error", success=False, exit_code=1, duration_seconds=2.5)
         assert r.success is False
         assert r.exit_code == 1
-        assert r.duration_seconds == 2.5
+        assert r.duration_seconds == pytest.approx(2.5)
 
     def test_truncation_handled_by_caller(self):
         # Truncation is done by the tools, not the dataclass
diff --git a/backend/tests/test_tools_workspace.py b/backend/tests/test_tools_workspace.py
index 69edca8..4c92d9c 100644
--- a/backend/tests/test_tools_workspace.py
+++ b/backend/tests/test_tools_workspace.py
@@ -1,5 +1,6 @@
 """Tests for workspace agent tools."""
 
+import asyncio
 import os
 import tempfile
 
@@ -179,8 +180,10 @@ async def test_recent_failures_empty(self, workspace_dir):
     async def test_search_operation(self, workspace_dir):
         # Create a test file
         test_file = os.path.join(workspace_dir, "code", "test.py")
-        with open(test_file, "w") as f:
-            f.write("import torch\nmodel = TransformerModel()")
+        loop = asyncio.get_event_loop()
+        await loop.run_in_executor(
+            None, lambda: open(test_file, "w").write("import torch\nmodel = TransformerModel()")
+        )
 
         result, success = await _handle_workspace(
             operation="search",
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 30ae352..5e5adec 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -39,10 +39,14 @@ export function ConfirmDialog({
     <div 
       className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
       onClick={onCancel}
+      role="presentation"
     >
       <div 
         className="bg-surface rounded-xl border border-border p-6 max-w-md w-full shadow-xl animate-slide-up"
         onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="confirm-dialog-title"
       >
         <h3 className="text-lg font-semibold text-text mb-3">{title}</h3>
         <p className="text-text-dim mb-6 leading-relaxed">{message}</p>
diff --git a/frontend/src/components/FileTree.tsx b/frontend/src/components/FileTree.tsx
index df49f94..7b6aa93 100644
--- a/frontend/src/components/FileTree.tsx
+++ b/frontend/src/components/FileTree.tsx
@@ -164,7 +164,7 @@ export function FileTree({ projectUuid, refreshKey, onFileSelect }: Props) {
       return (data.entries || []).map((entry: FileNode) => ({
         ...entry,
         expanded: false,
-        children: entry.is_dir ? undefined : undefined,
+        children: undefined,
       }));
     } catch (err: any) {
       setError(err.message);
diff --git a/frontend/src/components/ModelModal.tsx b/frontend/src/components/ModelModal.tsx
index a13581b..bacaab3 100644
--- a/frontend/src/components/ModelModal.tsx
+++ b/frontend/src/components/ModelModal.tsx
@@ -252,16 +252,23 @@ export function ModelModal({ currentModel, onModelChange }: Props) {
         <div
           className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
           onClick={() => setOpen(false)}
+          onKeyDown={(e) => e.key === 'Escape' && setOpen(false)}
+          role="presentation"
         >
           {/* Fixed-size modal — never changes dimensions between loading and loaded */}
           <div
             className="bg-surface rounded-xl border border-border w-full max-w-lg flex flex-col shadow-xl"
             style={{ height: 'min(80vh, 600px)' }}
             onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="model-modal-title"
           >
             {/* Tabs */}
             <div className="flex border-b border-border shrink-0">
               <button
+                id="model-modal-title"
                 className={`flex-1 py-3 px-4 text-sm font-medium transition-colors ${
                   tab === 'models' ? 'text-primary border-b-2 border-primary' : 'text-text-dim hover:text-text'
                 }`}
diff --git a/frontend/src/components/OnboardingModal.tsx b/frontend/src/components/OnboardingModal.tsx
index 66844f1..7e859ab 100644
--- a/frontend/src/components/OnboardingModal.tsx
+++ b/frontend/src/components/OnboardingModal.tsx
@@ -280,10 +280,11 @@ export function OnboardingModal({ onComplete }: Props) {
                 with files, knowledge graph, and conversation history.
               </p>
               <div>
-                <label className="block text-sm font-medium text-text mb-1.5">
+                <label className="block text-sm font-medium text-text mb-1.5" htmlFor="project-name">
                   Project Name <span className="text-error">*</span>
                 </label>
                 <input
+                  id="project-name"
                   type="text"
                   className="w-full bg-bg border border-border rounded-lg px-4 py-3 text-text placeholder-text-dim focus:border-primary focus:outline-none transition-colors"
                   placeholder="e.g., Transformer Efficiency Survey"
@@ -294,10 +295,11 @@ export function OnboardingModal({ onComplete }: Props) {
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-text mb-1.5">
+                <label className="block text-sm font-medium text-text mb-1.5" htmlFor="project-desc">
                   Description <span className="text-text-dim">(optional)</span>
                 </label>
                 <textarea
+                  id="project-desc"
                   className="w-full bg-bg border border-border rounded-lg px-4 py-3 text-text placeholder-text-dim focus:border-primary focus:outline-none transition-colors resize-none"
                   rows={3}
                   placeholder="What is this project about?"
diff --git a/frontend/src/components/ProjectManageModal.tsx b/frontend/src/components/ProjectManageModal.tsx
index 82c114d..dc3d111 100644
--- a/frontend/src/components/ProjectManageModal.tsx
+++ b/frontend/src/components/ProjectManageModal.tsx
@@ -156,10 +156,15 @@ export function ProjectManageModal({ projects, onClose, onChanged }: Props) {
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
       onClick={onClose}
+      onKeyDown={(e) => e.key === 'Escape' && onClose()}
+      role="dialog"
+      aria-modal="true"
+      tabIndex={-1}
     >
       <div
         className="bg-surface border border-border rounded-xl shadow-xl w-full max-w-lg max-h-[70vh] flex flex-col"
         onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
       >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
diff --git a/frontend/src/components/ProjectModal.tsx b/frontend/src/components/ProjectModal.tsx
index 7d46c35..1bd9399 100644
--- a/frontend/src/components/ProjectModal.tsx
+++ b/frontend/src/components/ProjectModal.tsx
@@ -50,8 +50,9 @@ export function ProjectModal({ onClose, onCreate }: Props) {
         {/* Form */}
         <div className="px-6 py-5 space-y-4">
           <div>
-            <label className="block text-sm font-medium text-text mb-1.5">Project Name</label>
+            <label className="block text-sm font-medium text-text mb-1.5" htmlFor="project-name">Project Name</label>
             <input
+              id="project-name"
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
@@ -66,10 +67,11 @@ export function ProjectModal({ onClose, onCreate }: Props) {
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-text mb-1.5">
+            <label className="block text-sm font-medium text-text mb-1.5" htmlFor="project-desc">
               Description <span className="text-text-dim font-normal">(optional)</span>
             </label>
             <textarea
+              id="project-desc"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="Brief description of the research goal..."
diff --git a/frontend/src/components/ReportDrawer.tsx b/frontend/src/components/ReportDrawer.tsx
index ccac91f..8a36196 100644
--- a/frontend/src/components/ReportDrawer.tsx
+++ b/frontend/src/components/ReportDrawer.tsx
@@ -28,14 +28,19 @@ export function ReportDrawer({ reportId, title, cachedContent, onClose }: Props)
     <div 
       className="fixed inset-0 bg-black/60 flex justify-end z-50"
       onClick={onClose}
+      onKeyDown={(e) => e.key === 'Escape' && onClose()}
+      role="presentation"
     >
       <div 
         className="w-full max-w-2xl h-full bg-surface border-l border-border flex flex-col animate-slide-in-right"
         onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="report-drawer-title"
       >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
-          <h3 className="text-lg font-semibold text-text truncate pr-4">{title}</h3>
+          <h3 id="report-drawer-title" className="text-lg font-semibold text-text truncate pr-4">{title}</h3>
           <button 
             className="w-8 h-8 rounded-lg flex items-center justify-center text-text-dim hover:bg-surface-hover hover:text-text transition-colors"
             onClick={onClose}
diff --git a/frontend/src/components/RightPanel.tsx b/frontend/src/components/RightPanel.tsx
index 5f8e8b8..3b6849c 100644
--- a/frontend/src/components/RightPanel.tsx
+++ b/frontend/src/components/RightPanel.tsx
@@ -93,7 +93,7 @@ function SearchBudgetDialog({ currentMax, onSave, onClose }: { currentMax: numbe
           </button>
           <button
             className="px-4 py-1.5 text-xs font-medium rounded-lg bg-primary text-white hover:bg-primary-hover transition-colors disabled:opacity-50"
-            disabled={saving || !value || parseInt(value, 10) < 1}
+            disabled={saving || !value || Number.parseInt(value, 10) < 1}
             onClick={handleSave}
           >
             {saving ? 'Saving...' : 'Save'}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 4dc4d2e..f1c13c5 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -166,12 +166,21 @@ export function Sidebar({ conversations, currentUuid, user, convStatuses, termin
             {group.items.map((conv) => (
               <div
                 key={conv.uuid}
+                role="button"
+                tabIndex={0}
                 className={`group flex items-center gap-2 px-3 py-2.5 rounded-lg cursor-pointer text-sm transition-all ${
                   conv.uuid === currentUuid 
                     ? 'bg-primary/10 text-text' 
                     : 'text-text-dim hover:bg-surface-hover hover:text-text'
                 }`}
                 onClick={() => onSwitch(conv.uuid)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    onSwitch(conv.uuid);
+                  }
+                }}
+                aria-label={`Switch to conversation: ${conv.title}`}
+                aria-pressed={conv.uuid === currentUuid}
               >
                 <ConvIcon status={convStatuses[conv.uuid] || 'idle'} />
                 <span className="flex-1 truncate" title={conv.title}>{conv.title}</span>
diff --git a/frontend/src/components/Terminal.tsx b/frontend/src/components/Terminal.tsx
index df26b6b..36fd7f3 100644
--- a/frontend/src/components/Terminal.tsx
+++ b/frontend/src/components/Terminal.tsx
@@ -237,6 +237,14 @@ export function Terminal({ projectUuid, visible, onToggle, onConnectionChange, r
         ref={containerRef}
         className="flex-1 min-h-0 px-1"
         onClick={() => termRef.current?.focus()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            termRef.current?.focus();
+          }
+        }}
+        tabIndex={0}
+        role="button"
+        aria-label="Click to focus terminal"
       />
     </div>
   );
diff --git a/frontend/src/components/settings/AddKeyModal.tsx b/frontend/src/components/settings/AddKeyModal.tsx
index e524647..cc5773d 100644
--- a/frontend/src/components/settings/AddKeyModal.tsx
+++ b/frontend/src/components/settings/AddKeyModal.tsx
@@ -48,7 +48,7 @@ export function AddKeyModal({ onClose, onSubmit }: AddKeyModalProps) {
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose} role="dialog" aria-modal="true" aria-labelledby="add-key-title">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose} onKeyDown={(e) => e.key === 'Escape' && onClose()} role="dialog" aria-modal="true" aria-labelledby="add-key-title" tabIndex={-1}>
       <div className="bg-surface rounded-xl border border-border w-full max-w-lg mx-4 shadow-xl" onClick={(e) => e.stopPropagation()}>
         <div className="flex items-center justify-between px-5 py-4 border-b border-border">
           <h3 id="add-key-title" className="font-semibold text-text flex items-center gap-2">
@@ -87,8 +87,9 @@ export function AddKeyModal({ onClose, onSubmit }: AddKeyModalProps) {
 
           {/* Filename */}
           <div>
-            <label className="block text-sm font-medium text-text mb-1.5">Filename</label>
+            <label className="block text-sm font-medium text-text mb-1.5" htmlFor="key-filename">Filename</label>
             <input
+              id="key-filename"
               type="text"
               required
               placeholder="id_ed25519_workstation"
@@ -101,8 +102,9 @@ export function AddKeyModal({ onClose, onSubmit }: AddKeyModalProps) {
 
           {mode === 'upload' ? (
             <div>
-              <label className="block text-sm font-medium text-text mb-1.5">Private Key</label>
+              <label className="block text-sm font-medium text-text mb-1.5" htmlFor="key-private">Private Key</label>
               <textarea
+                id="key-private"
                 required
                 rows={6}
                 placeholder="-----BEGIN OPENSSH PRIVATE KEY-----..."
@@ -113,8 +115,9 @@ export function AddKeyModal({ onClose, onSubmit }: AddKeyModalProps) {
             </div>
           ) : (
             <div>
-              <label className="block text-sm font-medium text-text mb-1.5">Algorithm</label>
+              <label className="block text-sm font-medium text-text mb-1.5" htmlFor="key-algorithm">Algorithm</label>
               <select
+                id="key-algorithm"
                 value={algorithm}
                 onChange={(e) => setAlgorithm(e.target.value)}
                 className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-text text-sm focus:border-primary focus:outline-none"
@@ -127,8 +130,9 @@ export function AddKeyModal({ onClose, onSubmit }: AddKeyModalProps) {
 
           {/* Comment */}
           <div>
-            <label className="block text-sm font-medium text-text mb-1.5">Comment (optional)</label>
+            <label className="block text-sm font-medium text-text mb-1.5" htmlFor="key-comment">Comment (optional)</label>
             <input
+              id="key-comment"
               type="text"
               placeholder="Workstation key"
               value={comment}
diff --git a/frontend/src/components/settings/AddNodeModal.tsx b/frontend/src/components/settings/AddNodeModal.tsx
index 562dd49..d3590fd 100644
--- a/frontend/src/components/settings/AddNodeModal.tsx
+++ b/frontend/src/components/settings/AddNodeModal.tsx
@@ -141,7 +141,7 @@ export function AddNodeModal({ keys, node, onClose, onSubmit }: AddNodeModalProp
   ];
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose} role="dialog" aria-modal="true" aria-labelledby="add-node-title">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose} onKeyDown={(e) => e.key === 'Escape' && onClose()} role="dialog" aria-modal="true" aria-labelledby="add-node-title" tabIndex={-1}>
       <div className="bg-surface rounded-xl border border-border w-full max-w-lg mx-4 shadow-xl max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
         <div className="flex items-center justify-between px-5 py-4 border-b border-border">
           <h3 id="add-node-title" className="font-semibold text-text">
@@ -177,8 +177,9 @@ export function AddNodeModal({ keys, node, onClose, onSubmit }: AddNodeModalProp
 
           {/* Name */}
           <div>
-            <label className="block text-sm font-medium text-text mb-1.5">Name</label>
+            <label className="block text-sm font-medium text-text mb-1.5" htmlFor="node-name">Name</label>
             <input
+              id="node-name"
               type="text"
               required
               placeholder="Workstation"
@@ -193,8 +194,9 @@ export function AddNodeModal({ keys, node, onClose, onSubmit }: AddNodeModalProp
             <>
               <div className="grid grid-cols-3 gap-3">
                 <div className="col-span-2">
-                  <label className="block text-sm font-medium text-text mb-1.5">Host</label>
+                  <label className="block text-sm font-medium text-text mb-1.5" htmlFor="node-host">Host</label>
                   <input
+                    id="node-host"
                     type="text"
                     required
                     placeholder="ml-workstation.local"
@@ -204,18 +206,20 @@ export function AddNodeModal({ keys, node, onClose, onSubmit }: AddNodeModalProp
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-text mb-1.5">Port</label>
+                  <label className="block text-sm font-medium text-text mb-1.5" htmlFor="node-port">Port</label>
                   <input
+                    id="node-port"
                     type="number"
                     value={port}
-                    onChange={(e) => setPort(parseInt(e.target.value) || 22)}
+                    onChange={(e) => setPort(Number.parseInt(e.target.value) || 22)}
                     className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-text text-sm focus:border-primary focus:outline-none"
                   />
                 </div>
               </div>
               <div>
-                <label className="block text-sm font-medium text-text mb-1.5">Username</label>
+                <label className="block text-sm font-medium text-text mb-1.5" htmlFor="node-user">Username</label>
                 <input
+                  id="node-user"
                   type="text"
                   required
                   placeholder="researcher"
@@ -225,8 +229,9 @@ export function AddNodeModal({ keys, node, onClose, onSubmit }: AddNodeModalProp
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-text mb-1.5">SSH Key</label>
+                <label className="block text-sm font-medium text-text mb-1.5" htmlFor="node-key">SSH Key</label>
                 <select
+                  id="node-key"
                   value={keyFilename}
                   onChange={(e) => setKeyFilename(e.target.value)}
                   className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-text text-sm focus:border-primary focus:outline-none"
@@ -245,8 +250,9 @@ export function AddNodeModal({ keys, node, onClose, onSubmit }: AddNodeModalProp
                 )}
               </div>
               <div>
-                <label className="block text-sm font-medium text-text mb-1.5">Working Directory</label>
+                <label className="block text-sm font-medium text-text mb-1.5" htmlFor="node-workdir">Working Directory</label>
                 <input
+                  id="node-workdir"
                   type="text"
                   placeholder="~/openmlr-workspaces"
                   value={workdir}
@@ -278,8 +284,9 @@ export function AddNodeModal({ keys, node, onClose, onSubmit }: AddNodeModalProp
           {type === 'modal' && (
             <>
               <div>
-                <label className="block text-sm font-medium text-text mb-1.5">Container Image</label>
+                <label className="block text-sm font-medium text-text mb-1.5" htmlFor="modal-image">Container Image</label>
                 <input
+                  id="modal-image"
                   type="text"
                   value={modalImage}
                   onChange={(e) => setModalImage(e.target.value)}
@@ -287,8 +294,9 @@ export function AddNodeModal({ keys, node, onClose, onSubmit }: AddNodeModalProp
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-text mb-1.5">GPU (optional)</label>
+                <label className="block text-sm font-medium text-text mb-1.5" htmlFor="modal-gpu">GPU (optional)</label>
                 <select
+                  id="modal-gpu"
                   value={modalGpu}
                   onChange={(e) => setModalGpu(e.target.value)}
                   className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-text text-sm focus:border-primary focus:outline-none"
@@ -301,8 +309,9 @@ export function AddNodeModal({ keys, node, onClose, onSubmit }: AddNodeModalProp
                 </select>
               </div>
               <div>
-                <label className="block text-sm font-medium text-text mb-1.5">Packages (comma-separated)</label>
+                <label className="block text-sm font-medium text-text mb-1.5" htmlFor="modal-packages">Packages (comma-separated)</label>
                 <input
+                  id="modal-packages"
                   type="text"
                   placeholder="torch, transformers, datasets"
                   value={modalPackages}
diff --git a/frontend/src/components/settings/AgentSettings.tsx b/frontend/src/components/settings/AgentSettings.tsx
index 540c7f6..ecd786d 100644
--- a/frontend/src/components/settings/AgentSettings.tsx
+++ b/frontend/src/components/settings/AgentSettings.tsx
@@ -63,8 +63,9 @@ export function AgentSettings() {
       
       <div className="flex flex-col gap-5 mb-8">
         <div>
-          <label className="block text-sm font-medium text-text mb-2">Default Model</label>
+          <label className="block text-sm font-medium text-text mb-2" htmlFor="default-model">Default Model</label>
           <input
+            id="default-model"
             type="text"
             className="w-full bg-bg border border-border rounded-lg px-4 py-3 text-text placeholder-text-dim focus:border-primary focus:outline-none transition-colors"
             placeholder="auto-detect (e.g. anthropic/claude-sonnet-4)"
@@ -74,8 +75,9 @@ export function AgentSettings() {
         </div>
         
         <div>
-          <label className="block text-sm font-medium text-text mb-2">Research / Title Model (cheaper)</label>
+          <label className="block text-sm font-medium text-text mb-2" htmlFor="research-model">Research / Title Model (cheaper)</label>
           <input
+            id="research-model"
             type="text"
             className="w-full bg-bg border border-border rounded-lg px-4 py-3 text-text placeholder-text-dim focus:border-primary focus:outline-none transition-colors"
             placeholder="auto-detect (e.g. openai/gpt-4o-mini)"
diff --git a/frontend/src/components/settings/McpSettings.tsx b/frontend/src/components/settings/McpSettings.tsx
index 442e2df..5c46ecb 100644
--- a/frontend/src/components/settings/McpSettings.tsx
+++ b/frontend/src/components/settings/McpSettings.tsx
@@ -217,8 +217,9 @@ export function McpSettings() {
             
             <div className="flex flex-col gap-4 mb-5">
               <div>
-                <label className="block text-sm font-medium text-text mb-1.5">Server Name</label>
+                <label className="block text-sm font-medium text-text mb-1.5" htmlFor="mcp-server-name">Server Name</label>
                 <input
+                  id="mcp-server-name"
                   type="text"
                   className="w-full bg-surface border border-border rounded-lg px-4 py-2.5 text-text placeholder-text-dim focus:border-primary focus:outline-none"
                   placeholder="my-mcp-server"
@@ -228,8 +229,9 @@ export function McpSettings() {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-text mb-1.5">Transport</label>
+                <label className="block text-sm font-medium text-text mb-1.5" htmlFor="mcp-transport">Transport</label>
                 <select
+                  id="mcp-transport"
                   className="w-full bg-surface border border-border rounded-lg px-4 py-2.5 text-text focus:border-primary focus:outline-none"
                   value={editForm.transport}
                   onChange={(e) => setEditForm((f) => ({ 
@@ -244,9 +246,10 @@ export function McpSettings() {
 
               {editForm.transport === 'http' && (
                 <div>
-                  <label className="block text-sm font-medium text-text mb-1.5">Server URL</label>
-                  <input
-                    type="text"
+<label className="block text-sm font-medium text-text mb-1.5" htmlFor="mcp-server-url">Server URL</label>
+                <input
+                  id="mcp-server-url"
+                  type="text"
                     className="w-full bg-surface border border-border rounded-lg px-4 py-2.5 text-text placeholder-text-dim focus:border-primary focus:outline-none"
                     placeholder="http://localhost:8080/sse"
                     value={editForm.url || ''}
@@ -258,8 +261,9 @@ export function McpSettings() {
               {editForm.transport === 'stdio' && (
                 <>
                   <div>
-                    <label className="block text-sm font-medium text-text mb-1.5">Command</label>
+                    <label className="block text-sm font-medium text-text mb-1.5" htmlFor="mcp-command">Command</label>
                     <input
+                      id="mcp-command"
                       type="text"
                       className="w-full bg-surface border border-border rounded-lg px-4 py-2.5 text-text placeholder-text-dim focus:border-primary focus:outline-none"
                       placeholder="npx or uvx or path/to/binary"
@@ -268,8 +272,9 @@ export function McpSettings() {
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-text mb-1.5">Arguments (one per line)</label>
+                    <label className="block text-sm font-medium text-text mb-1.5" htmlFor="mcp-args">Arguments (one per line)</label>
                     <textarea
+                      id="mcp-args"
                       className="w-full bg-surface border border-border rounded-lg px-4 py-2.5 text-text placeholder-text-dim focus:border-primary focus:outline-none resize-none"
                       placeholder={"-y\n@modelcontextprotocol/server-filesystem\n/path/to/dir"}
                       value={(editForm.args || []).join('\n')}
diff --git a/frontend/src/components/settings/ProvidersSettings.tsx b/frontend/src/components/settings/ProvidersSettings.tsx
index 635e1a5..1eeaaab 100644
--- a/frontend/src/components/settings/ProvidersSettings.tsx
+++ b/frontend/src/components/settings/ProvidersSettings.tsx
@@ -318,17 +318,24 @@ export function ProvidersSettings() {
         <div
           className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
           onClick={() => setShowCustomModal(false)}
+          onKeyDown={(e) => e.key === 'Escape' && setShowCustomModal(false)}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="custom-provider-title"
+          tabIndex={-1}
         >
           <div
             className="bg-surface rounded-xl border border-border w-full max-w-md flex flex-col shadow-xl p-6"
             onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
           >
-            <h3 className="text-lg font-semibold text-text mb-4">Add Custom Provider</h3>
+            <h3 id="custom-provider-title" className="text-lg font-semibold text-text mb-4">Add Custom Provider</h3>
 
             <div className="flex flex-col gap-4">
               <div>
-                <label className="block text-sm text-text-dim mb-1">Display Name</label>
+                <label className="block text-sm text-text-dim mb-1" htmlFor="custom-provider-name">Display Name</label>
                 <input
+                  id="custom-provider-name"
                   type="text"
                   className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-sm text-text placeholder-text-dim focus:border-primary focus:outline-none"
                   placeholder="e.g. My Organization"
@@ -338,8 +345,9 @@ export function ProvidersSettings() {
               </div>
 
               <div>
-                <label className="block text-sm text-text-dim mb-1">Provider ID (prefix)</label>
+                <label className="block text-sm text-text-dim mb-1" htmlFor="custom-provider-id">Provider ID (prefix)</label>
                 <input
+                  id="custom-provider-id"
                   type="text"
                   className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-sm text-text placeholder-text-dim focus:border-primary focus:outline-none"
                   placeholder="e.g. my-org (models will be my-org/model-name)"
@@ -349,8 +357,9 @@ export function ProvidersSettings() {
               </div>
 
               <div>
-                <label className="block text-sm text-text-dim mb-1">SDK Type</label>
+                <label className="block text-sm text-text-dim mb-1" htmlFor="custom-provider-sdk">SDK Type</label>
                 <select
+                  id="custom-provider-sdk"
                   className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-sm text-text focus:border-primary focus:outline-none"
                   value={customForm.sdk_type}
                   onChange={(e) => setCustomForm((f) => ({ ...f, sdk_type: e.target.value as SdkType }))}
@@ -362,8 +371,9 @@ export function ProvidersSettings() {
               </div>
 
               <div>
-                <label className="block text-sm text-text-dim mb-1">API Base URL</label>
+                <label className="block text-sm text-text-dim mb-1" htmlFor="custom-provider-base">API Base URL</label>
                 <input
+                  id="custom-provider-base"
                   type="text"
                   className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-sm text-text placeholder-text-dim focus:border-primary focus:outline-none"
                   placeholder="https://api.my-org.com/v1"
@@ -373,8 +383,9 @@ export function ProvidersSettings() {
               </div>
 
               <div>
-                <label className="block text-sm text-text-dim mb-1">API Key</label>
+                <label className="block text-sm text-text-dim mb-1" htmlFor="custom-provider-key">API Key</label>
                 <input
+                  id="custom-provider-key"
                   type="password"
                   className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-sm text-text placeholder-text-dim focus:border-primary focus:outline-none"
                   placeholder="sk-..."
diff --git a/frontend/src/components/settings/WritingSettings.tsx b/frontend/src/components/settings/WritingSettings.tsx
index 7b81cc4..0641892 100644
--- a/frontend/src/components/settings/WritingSettings.tsx
+++ b/frontend/src/components/settings/WritingSettings.tsx
@@ -72,8 +72,9 @@ export function WritingSettings() {
           
           <div className="flex flex-col gap-4">
             <div>
-              <label className="block text-sm font-medium text-text mb-2">Full Name</label>
+              <label className="block text-sm font-medium text-text mb-2" htmlFor="author-name">Full Name</label>
               <input
+                id="author-name"
                 type="text"
                 className="w-full bg-bg border border-border rounded-lg px-4 py-3 text-text placeholder-text-dim focus:border-primary focus:outline-none transition-colors"
                 placeholder="e.g., Jane Doe"
@@ -83,8 +84,9 @@ export function WritingSettings() {
             </div>
             
             <div>
-              <label className="block text-sm font-medium text-text mb-2">Email</label>
+              <label className="block text-sm font-medium text-text mb-2" htmlFor="author-email">Email</label>
               <input
+                id="author-email"
                 type="email"
                 className="w-full bg-bg border border-border rounded-lg px-4 py-3 text-text placeholder-text-dim focus:border-primary focus:outline-none transition-colors"
                 placeholder="e.g., jane.doe@university.edu"
@@ -94,8 +96,9 @@ export function WritingSettings() {
             </div>
             
             <div>
-              <label className="block text-sm font-medium text-text mb-2">Affiliation</label>
+              <label className="block text-sm font-medium text-text mb-2" htmlFor="author-affiliation">Affiliation</label>
               <input
+                id="author-affiliation"
                 type="text"
                 className="w-full bg-bg border border-border rounded-lg px-4 py-3 text-text placeholder-text-dim focus:border-primary focus:outline-none transition-colors"
                 placeholder="e.g., Department of Computer Science, MIT"
@@ -105,8 +108,9 @@ export function WritingSettings() {
             </div>
             
             <div>
-              <label className="block text-sm font-medium text-text mb-2">ORCID <span className="text-text-dim font-normal">(optional)</span></label>
+              <label className="block text-sm font-medium text-text mb-2" htmlFor="author-orcid">ORCID <span className="text-text-dim font-normal">(optional)</span></label>
               <input
+                id="author-orcid"
                 type="text"
                 className="w-full bg-bg border border-border rounded-lg px-4 py-3 text-text placeholder-text-dim focus:border-primary focus:outline-none transition-colors"
                 placeholder="e.g., 0000-0002-1234-5678"
@@ -119,8 +123,9 @@ export function WritingSettings() {
         
         {/* Writing Preferences Section */}
         <div>
-          <label className="block text-sm font-medium text-text mb-2">Citation Style</label>
+          <label className="block text-sm font-medium text-text mb-2" htmlFor="citation-style">Citation Style</label>
           <select
+            id="citation-style"
             className="w-full bg-bg border border-border rounded-lg px-4 py-3 text-text focus:border-primary focus:outline-none transition-colors"
             value={form.citation_style}
             onChange={(e) => setForm((f) => ({ ...f, citation_style: e.target.value }))}
@@ -133,8 +138,9 @@ export function WritingSettings() {
         </div>
         
         <div>
-          <label className="block text-sm font-medium text-text mb-2">Export Format</label>
+          <label className="block text-sm font-medium text-text mb-2" htmlFor="export-format">Export Format</label>
           <select
+            id="export-format"
             className="w-full bg-bg border border-border rounded-lg px-4 py-3 text-text focus:border-primary focus:outline-none transition-colors"
             value={form.export_format}
             onChange={(e) => setForm((f) => ({ ...f, export_format: e.target.value }))}

From f949bafee4ea01c0a85d5389034faa52d64aa5c4 Mon Sep 17 00:00:00 2001
From: xprilion <xprilion@gmail.com>
Date: Wed, 29 Apr 2026 23:02:59 +0530
Subject: [PATCH 2/3] Sonarqube cleanup 5

---
 backend/openmlr/routes/terminal.py            | 29 +++---
 backend/tests/test_tools_workspace.py         | 12 ++-
 frontend/src/components/ConfirmDialog.tsx     | 93 +++++++++++--------
 frontend/src/components/ModelModal.tsx        | 45 ++++++---
 .../src/components/ProjectManageModal.tsx     | 50 +++++++---
 frontend/src/components/ReportDrawer.tsx      | 89 +++++++++++-------
 frontend/src/components/Sidebar.tsx           | 22 ++---
 frontend/src/components/Terminal.tsx          | 22 ++---
 .../components/settings/ProvidersSettings.tsx | 45 ++++++---
 9 files changed, 247 insertions(+), 160 deletions(-)

diff --git a/backend/openmlr/routes/terminal.py b/backend/openmlr/routes/terminal.py
index 967f759..b7a0f22 100644
--- a/backend/openmlr/routes/terminal.py
+++ b/backend/openmlr/routes/terminal.py
@@ -6,7 +6,7 @@
 Security:
 - Minimal environment (no server secrets leaked)
 - Workspace path validated against WORKSPACES_ROOT
-- Shell spawned via subprocess (not os.fork) to avoid async corruption
+- Shell spawned via asyncio.create_subprocess_exec (not os.fork) to avoid async corruption
 - --norc --noprofile to prevent .bashrc injection
 - Proper zombie process cleanup with SIGKILL escalation
 """
@@ -19,7 +19,6 @@
 import pty
 import signal
 import struct
-import subprocess
 import termios
 from pathlib import Path
 
@@ -185,26 +184,24 @@ async def terminal_websocket(
 
     await websocket.accept()
 
-    # Spawn PTY using subprocess instead of os.fork() to avoid
+    # Spawn PTY using asyncio.create_subprocess_exec instead of os.fork() to avoid
     # corrupting the async event loop and leaking file descriptors.
     master_fd, slave_fd = pty.openpty()
     env = _build_safe_env(workspace_path)
     shell = "/bin/bash"
 
     try:
-        loop = asyncio.get_event_loop()
-        proc = await loop.run_in_executor(
-            None,
-            lambda: subprocess.Popen(
-                [shell, "--norc", "--noprofile"],
-                stdin=slave_fd,
-                stdout=slave_fd,
-                stderr=slave_fd,
-                cwd=workspace_path,
-                env=env,
-                start_new_session=True,
-                close_fds=True,
-            ),
+        proc = await asyncio.create_subprocess_exec(
+            shell,
+            "--norc",
+            "--noprofile",
+            stdin=slave_fd,
+            stdout=slave_fd,
+            stderr=slave_fd,
+            cwd=workspace_path,
+            env=env,
+            start_new_session=True,
+            close_fds=True,
         )
         pid = proc.pid
     except Exception as e:
diff --git a/backend/tests/test_tools_workspace.py b/backend/tests/test_tools_workspace.py
index 4c92d9c..1726eaf 100644
--- a/backend/tests/test_tools_workspace.py
+++ b/backend/tests/test_tools_workspace.py
@@ -178,12 +178,14 @@ async def test_recent_failures_empty(self, workspace_dir):
         assert "No recent" in result
 
     async def test_search_operation(self, workspace_dir):
-        # Create a test file
+        # Create a test file using async-compatible file write
         test_file = os.path.join(workspace_dir, "code", "test.py")
-        loop = asyncio.get_event_loop()
-        await loop.run_in_executor(
-            None, lambda: open(test_file, "w").write("import torch\nmodel = TransformerModel()")
-        )
+
+        def _write_file():
+            with open(test_file, "w") as f:
+                f.write("import torch\nmodel = TransformerModel()")
+
+        await asyncio.to_thread(_write_file)
 
         result, success = await _handle_workspace(
             operation="search",
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 5e5adec..a30de51 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -19,58 +19,71 @@ export function ConfirmDialog({
   onCancel,
   danger = false,
 }: Props) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
   const cancelRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog && !dialog.open) {
+      dialog.showModal();
+    }
+
     // Focus cancel button by default for safety
     cancelRef.current?.focus();
 
-    // Handle escape key
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onCancel();
-      }
+    // Handle escape key via dialog's native cancel event
+    const handleCancel = (e: Event) => {
+      e.preventDefault();
+      onCancel();
     };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
+
+    dialog?.addEventListener('cancel', handleCancel);
+    return () => dialog?.removeEventListener('cancel', handleCancel);
   }, [onCancel]);
 
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    // Close when clicking the backdrop (outside the dialog content)
+    if (e.target === dialogRef.current) {
+      onCancel();
+    }
+  };
+
   return (
-    <div 
-      className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
-      onClick={onCancel}
-      role="presentation"
+    <dialog
+      ref={dialogRef}
+      className="fixed bg-transparent p-4 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
+      onClick={handleBackdropClick}
+      aria-labelledby="confirm-dialog-title"
     >
-      <div 
-        className="bg-surface rounded-xl border border-border p-6 max-w-md w-full shadow-xl animate-slide-up"
-        onClick={(e) => e.stopPropagation()}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="confirm-dialog-title"
-      >
-        <h3 className="text-lg font-semibold text-text mb-3">{title}</h3>
-        <p className="text-text-dim mb-6 leading-relaxed">{message}</p>
-        
-        <div className="flex gap-3">
-          <button
-            ref={cancelRef}
-            className="flex-1 py-2.5 px-4 rounded-lg border border-border text-text-dim hover:bg-surface-hover hover:text-text transition-colors"
-            onClick={onCancel}
-          >
-            {cancelLabel}
-          </button>
-          <button
-            className={`flex-1 py-2.5 px-4 rounded-lg font-medium text-white transition-colors ${
-              danger 
-                ? 'bg-error hover:opacity-90' 
-                : 'bg-primary hover:bg-primary-hover'
-            }`}
-            onClick={onConfirm}
-          >
-            {confirmLabel}
-          </button>
+      <div className="flex items-center justify-center min-h-full">
+        <div 
+          className="bg-surface rounded-xl border border-border p-6 max-w-md w-full shadow-xl animate-slide-up"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <h3 id="confirm-dialog-title" className="text-lg font-semibold text-text mb-3">{title}</h3>
+          <p className="text-text-dim mb-6 leading-relaxed">{message}</p>
+          
+          <div className="flex gap-3">
+            <button
+              ref={cancelRef}
+              className="flex-1 py-2.5 px-4 rounded-lg border border-border text-text-dim hover:bg-surface-hover hover:text-text transition-colors"
+              onClick={onCancel}
+            >
+              {cancelLabel}
+            </button>
+            <button
+              className={`flex-1 py-2.5 px-4 rounded-lg font-medium text-white transition-colors ${
+                danger 
+                  ? 'bg-error hover:opacity-90' 
+                  : 'bg-primary hover:bg-primary-hover'
+              }`}
+              onClick={onConfirm}
+            >
+              {confirmLabel}
+            </button>
+          </div>
         </div>
       </div>
-    </div>
+    </dialog>
   );
 }
diff --git a/frontend/src/components/ModelModal.tsx b/frontend/src/components/ModelModal.tsx
index bacaab3..47cb0db 100644
--- a/frontend/src/components/ModelModal.tsx
+++ b/frontend/src/components/ModelModal.tsx
@@ -1,6 +1,6 @@
 
 
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { Search, ChevronDown, Check, X, Filter, Save } from 'lucide-react';
 import { api } from '../api';
 import { useNavigate } from 'react-router-dom';
@@ -89,6 +89,7 @@ function LoadingSkeleton() {
 
 export function ModelModal({ currentModel, onModelChange }: Props) {
   const navigate = useNavigate();
+  const dialogRef = useRef<HTMLDialogElement>(null);
   const [open, setOpen] = useState(false);
   const [tab, setTab] = useState<Tab>('models');
   const [providers, setProviders] = useState<Provider[]>([]);
@@ -123,6 +124,26 @@ export function ModelModal({ currentModel, onModelChange }: Props) {
     loadData();
   }, [open, loadData]);
 
+  // Handle dialog open/close
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+
+    const handleCancel = (e: Event) => {
+      e.preventDefault();
+      setOpen(false);
+    };
+
+    dialog.addEventListener('cancel', handleCancel);
+    return () => dialog.removeEventListener('cancel', handleCancel);
+  }, [open]);
+
   // Get only configured providers that are in the models category
   const configuredModelProviders = useMemo(() => {
     return providers.filter((p) => p.configured && p.categories?.includes('models'));
@@ -248,22 +269,20 @@ export function ModelModal({ currentModel, onModelChange }: Props) {
         <ChevronDown size={14} className="shrink-0" />
       </button>
 
-      {open && (
-        <div
-          className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
-          onClick={() => setOpen(false)}
-          onKeyDown={(e) => e.key === 'Escape' && setOpen(false)}
-          role="presentation"
-        >
+      <dialog
+        ref={dialogRef}
+        className="fixed bg-transparent p-4 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
+        onClick={(e) => {
+          if (e.target === dialogRef.current) setOpen(false);
+        }}
+        aria-labelledby="model-modal-title"
+      >
+        <div className="flex items-center justify-center min-h-full">
           {/* Fixed-size modal — never changes dimensions between loading and loaded */}
           <div
             className="bg-surface rounded-xl border border-border w-full max-w-lg flex flex-col shadow-xl"
             style={{ height: 'min(80vh, 600px)' }}
             onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => e.stopPropagation()}
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="model-modal-title"
           >
             {/* Tabs */}
             <div className="flex border-b border-border shrink-0">
@@ -460,7 +479,7 @@ export function ModelModal({ currentModel, onModelChange }: Props) {
             </div>
           </div>
         </div>
-      )}
+      </dialog>
     </>
   );
 }
diff --git a/frontend/src/components/ProjectManageModal.tsx b/frontend/src/components/ProjectManageModal.tsx
index dc3d111..db1f5fe 100644
--- a/frontend/src/components/ProjectManageModal.tsx
+++ b/frontend/src/components/ProjectManageModal.tsx
@@ -145,6 +145,23 @@ function ProjectRow({ project, onChanged }: { project: Project; onChanged: () =>
 }
 
 export function ProjectManageModal({ projects, onClose, onChanged }: Props) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog && !dialog.open) {
+      dialog.showModal();
+    }
+
+    const handleCancel = (e: Event) => {
+      e.preventDefault();
+      onClose();
+    };
+
+    dialog?.addEventListener('cancel', handleCancel);
+    return () => dialog?.removeEventListener('cancel', handleCancel);
+  }, [onClose]);
+
   // Sort: default first, then alphabetical
   const sorted = [...projects].sort((a, b) => {
     if (a.is_default && !b.is_default) return -1;
@@ -152,25 +169,29 @@ export function ProjectManageModal({ projects, onClose, onChanged }: Props) {
     return a.name.localeCompare(b.name);
   });
 
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (e.target === dialogRef.current) {
+      onClose();
+    }
+  };
+
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
-      onClick={onClose}
-      onKeyDown={(e) => e.key === 'Escape' && onClose()}
-      role="dialog"
-      aria-modal="true"
-      tabIndex={-1}
+    <dialog
+      ref={dialogRef}
+      className="fixed bg-transparent p-4 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60 backdrop:backdrop-blur-sm"
+      onClick={handleBackdropClick}
+      aria-labelledby="project-manage-title"
     >
-      <div
-        className="bg-surface border border-border rounded-xl shadow-xl w-full max-w-lg max-h-[70vh] flex flex-col"
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
-      >
+      <div className="flex items-center justify-center min-h-full">
+        <div
+          className="bg-surface border border-border rounded-xl shadow-xl w-full max-w-lg max-h-[70vh] flex flex-col"
+          onClick={(e) => e.stopPropagation()}
+        >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
           <div className="flex items-center gap-2">
             <Layers size={18} className="text-primary" />
-            <h2 className="text-lg font-semibold text-text">Manage Projects</h2>
+            <h2 id="project-manage-title" className="text-lg font-semibold text-text">Manage Projects</h2>
           </div>
           <button
             className="w-8 h-8 rounded-lg flex items-center justify-center text-text-dim hover:bg-surface-hover hover:text-text transition-colors"
@@ -195,7 +216,8 @@ export function ProjectManageModal({ projects, onClose, onChanged }: Props) {
         <div className="px-6 py-3 border-t border-border text-xs text-text-dim text-center shrink-0">
           Hover a project to rename or delete. The default project cannot be modified.
         </div>
+        </div>
       </div>
-    </div>
+    </dialog>
   );
 }
diff --git a/frontend/src/components/ReportDrawer.tsx b/frontend/src/components/ReportDrawer.tsx
index 8a36196..eae8c2a 100644
--- a/frontend/src/components/ReportDrawer.tsx
+++ b/frontend/src/components/ReportDrawer.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { X } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -12,9 +12,25 @@ interface Props {
 }
 
 export function ReportDrawer({ reportId, title, cachedContent, onClose }: Props) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
   const [content, setContent] = useState(cachedContent || '');
   const [loading, setLoading] = useState(!cachedContent);
 
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog && !dialog.open) {
+      dialog.showModal();
+    }
+
+    const handleCancel = (e: Event) => {
+      e.preventDefault();
+      onClose();
+    };
+
+    dialog?.addEventListener('cancel', handleCancel);
+    return () => dialog?.removeEventListener('cancel', handleCancel);
+  }, [onClose]);
+
   useEffect(() => {
     if (cachedContent) return;
     setLoading(true);
@@ -24,42 +40,47 @@ export function ReportDrawer({ reportId, title, cachedContent, onClose }: Props)
       .finally(() => setLoading(false));
   }, [reportId, cachedContent]);
 
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (e.target === dialogRef.current) {
+      onClose();
+    }
+  };
+
   return (
-    <div 
-      className="fixed inset-0 bg-black/60 flex justify-end z-50"
-      onClick={onClose}
-      onKeyDown={(e) => e.key === 'Escape' && onClose()}
-      role="presentation"
+    <dialog
+      ref={dialogRef}
+      className="fixed bg-transparent p-0 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
+      onClick={handleBackdropClick}
+      aria-labelledby="report-drawer-title"
     >
-      <div 
-        className="w-full max-w-2xl h-full bg-surface border-l border-border flex flex-col animate-slide-in-right"
-        onClick={(e) => e.stopPropagation()}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="report-drawer-title"
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
-          <h3 id="report-drawer-title" className="text-lg font-semibold text-text truncate pr-4">{title}</h3>
-          <button 
-            className="w-8 h-8 rounded-lg flex items-center justify-center text-text-dim hover:bg-surface-hover hover:text-text transition-colors"
-            onClick={onClose}
-          >
-            <X size={18} />
-          </button>
-        </div>
-        
-        {/* Body */}
-        <div className="flex-1 overflow-y-auto px-6 py-5">
-          {loading ? (
-            <div className="flex items-center justify-center h-full text-text-dim">Loading...</div>
-          ) : (
-            <div className="prose max-w-none">
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
-            </div>
-          )}
+      <div className="flex justify-end min-h-full">
+        <div 
+          className="w-full max-w-2xl h-full bg-surface border-l border-border flex flex-col animate-slide-in-right"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
+            <h3 id="report-drawer-title" className="text-lg font-semibold text-text truncate pr-4">{title}</h3>
+            <button 
+              className="w-8 h-8 rounded-lg flex items-center justify-center text-text-dim hover:bg-surface-hover hover:text-text transition-colors"
+              onClick={onClose}
+            >
+              <X size={18} />
+            </button>
+          </div>
+          
+          {/* Body */}
+          <div className="flex-1 overflow-y-auto px-6 py-5">
+            {loading ? (
+              <div className="flex items-center justify-center h-full text-text-dim">Loading...</div>
+            ) : (
+              <div className="prose max-w-none">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </dialog>
   );
 }
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index f1c13c5..d01d960 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -166,26 +166,24 @@ export function Sidebar({ conversations, currentUuid, user, convStatuses, termin
             {group.items.map((conv) => (
               <div
                 key={conv.uuid}
-                role="button"
-                tabIndex={0}
-                className={`group flex items-center gap-2 px-3 py-2.5 rounded-lg cursor-pointer text-sm transition-all ${
+                className={`group flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-all relative ${
                   conv.uuid === currentUuid 
                     ? 'bg-primary/10 text-text' 
                     : 'text-text-dim hover:bg-surface-hover hover:text-text'
                 }`}
-                onClick={() => onSwitch(conv.uuid)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    onSwitch(conv.uuid);
-                  }
-                }}
-                aria-label={`Switch to conversation: ${conv.title}`}
-                aria-pressed={conv.uuid === currentUuid}
               >
+                <button
+                  type="button"
+                  className="absolute inset-0 w-full h-full cursor-pointer"
+                  onClick={() => onSwitch(conv.uuid)}
+                  aria-label={`Switch to conversation: ${conv.title}`}
+                  aria-pressed={conv.uuid === currentUuid}
+                />
                 <ConvIcon status={convStatuses[conv.uuid] || 'idle'} />
                 <span className="flex-1 truncate" title={conv.title}>{conv.title}</span>
                 <button
-                  className="opacity-0 group-hover:opacity-100 text-text-dim hover:text-error p-1 rounded transition-all"
+                  type="button"
+                  className="opacity-0 group-hover:opacity-100 text-text-dim hover:text-error p-1 rounded transition-all relative z-10"
                   onClick={(e) => {
                     e.stopPropagation();
                     setPendingDelete({ uuid: conv.uuid, title: conv.title });
diff --git a/frontend/src/components/Terminal.tsx b/frontend/src/components/Terminal.tsx
index 36fd7f3..41a3ba6 100644
--- a/frontend/src/components/Terminal.tsx
+++ b/frontend/src/components/Terminal.tsx
@@ -233,19 +233,15 @@ export function Terminal({ projectUuid, visible, onToggle, onConnectionChange, r
       </div>
 
       {/* xterm.js container */}
-      <div
-        ref={containerRef}
-        className="flex-1 min-h-0 px-1"
-        onClick={() => termRef.current?.focus()}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            termRef.current?.focus();
-          }
-        }}
-        tabIndex={0}
-        role="button"
-        aria-label="Click to focus terminal"
-      />
+      <div className="flex-1 min-h-0 px-1 relative">
+        <div ref={containerRef} className="h-full w-full" />
+        <button
+          type="button"
+          className="absolute inset-0 w-full h-full cursor-text bg-transparent"
+          onClick={() => termRef.current?.focus()}
+          aria-label="Click to focus terminal"
+        />
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/settings/ProvidersSettings.tsx b/frontend/src/components/settings/ProvidersSettings.tsx
index 1eeaaab..3c31188 100644
--- a/frontend/src/components/settings/ProvidersSettings.tsx
+++ b/frontend/src/components/settings/ProvidersSettings.tsx
@@ -1,6 +1,6 @@
 
 
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { api } from '../../api';
 import type { Provider } from '../../types';
 
@@ -42,6 +42,7 @@ export function ProvidersSettings() {
   const [activeTab, setActiveTab] = useState<TabId>('models');
 
   // Custom provider modal state
+  const customDialogRef = useRef<HTMLDialogElement>(null);
   const [showCustomModal, setShowCustomModal] = useState(false);
   const [customForm, setCustomForm] = useState<{
     name: string;
@@ -63,6 +64,26 @@ export function ProvidersSettings() {
     api.getProviders().then((d) => setProviders(d.providers || [])).catch(() => {});
   }, []);
 
+  // Handle custom provider dialog open/close
+  useEffect(() => {
+    const dialog = customDialogRef.current;
+    if (!dialog) return;
+    
+    if (showCustomModal && !dialog.open) {
+      dialog.showModal();
+    } else if (!showCustomModal && dialog.open) {
+      dialog.close();
+    }
+
+    const handleCancel = (e: Event) => {
+      e.preventDefault();
+      setShowCustomModal(false);
+    };
+
+    dialog.addEventListener('cancel', handleCancel);
+    return () => dialog.removeEventListener('cancel', handleCancel);
+  }, [showCustomModal]);
+
   // Group providers by tab (a provider can appear in multiple tabs)
   const providersByTab = useMemo(() => {
     const grouped: Record<string, Provider[]> = {};
@@ -314,20 +335,18 @@ export function ProvidersSettings() {
       </button>
 
       {/* Custom Provider Modal */}
-      {showCustomModal && (
-        <div
-          className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
-          onClick={() => setShowCustomModal(false)}
-          onKeyDown={(e) => e.key === 'Escape' && setShowCustomModal(false)}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="custom-provider-title"
-          tabIndex={-1}
-        >
+      <dialog
+        ref={customDialogRef}
+        className="fixed bg-transparent p-4 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
+        onClick={(e) => {
+          if (e.target === customDialogRef.current) setShowCustomModal(false);
+        }}
+        aria-labelledby="custom-provider-title"
+      >
+        <div className="flex items-center justify-center min-h-full">
           <div
             className="bg-surface rounded-xl border border-border w-full max-w-md flex flex-col shadow-xl p-6"
             onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => e.stopPropagation()}
           >
             <h3 id="custom-provider-title" className="text-lg font-semibold text-text mb-4">Add Custom Provider</h3>
 
@@ -411,7 +430,7 @@ export function ProvidersSettings() {
             </div>
           </div>
         </div>
-      )}
+      </dialog>
     </div>
   );
 }

From 17fc37e18e37082c300e00b31630546176a8b739 Mon Sep 17 00:00:00 2001
From: xprilion <xprilion@gmail.com>
Date: Wed, 29 Apr 2026 23:13:08 +0530
Subject: [PATCH 3/3] Sonarqube cleanup 5

---
 frontend/src/__tests__/ConfirmDialog.test.tsx         |  4 +++-
 frontend/src/__tests__/ModelModal.test.tsx            | 11 ++++++-----
 frontend/src/__tests__/Sidebar.test.tsx               |  3 ++-
 frontend/src/__tests__/setup.ts                       |  9 +++++++++
 frontend/src/components/ConfirmDialog.tsx             |  1 -
 frontend/src/components/ModelModal.tsx                |  1 -
 frontend/src/components/ProjectManageModal.tsx        |  1 -
 frontend/src/components/ReportDrawer.tsx              |  1 -
 .../src/components/settings/ProvidersSettings.tsx     |  1 -
 9 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/__tests__/ConfirmDialog.test.tsx b/frontend/src/__tests__/ConfirmDialog.test.tsx
index 553bd48..f12cf58 100644
--- a/frontend/src/__tests__/ConfirmDialog.test.tsx
+++ b/frontend/src/__tests__/ConfirmDialog.test.tsx
@@ -98,7 +98,9 @@ describe('ConfirmDialog', () => {
         onCancel={onCancel}
       />
     );
-    fireEvent.keyDown(window, { key: 'Escape' });
+    // The dialog handles escape via the native cancel event
+    const dialog = document.querySelector('dialog');
+    fireEvent(dialog!, new Event('cancel'));
     expect(onCancel).toHaveBeenCalled();
   });
 
diff --git a/frontend/src/__tests__/ModelModal.test.tsx b/frontend/src/__tests__/ModelModal.test.tsx
index b24a35e..35f33d2 100644
--- a/frontend/src/__tests__/ModelModal.test.tsx
+++ b/frontend/src/__tests__/ModelModal.test.tsx
@@ -162,8 +162,9 @@ describe('ModelModal', () => {
 
     fireEvent.click(screen.getByText('Close'));
 
+    const dialog = document.querySelector('dialog');
     await waitFor(() => {
-      expect(screen.queryByText('GPT-4o Mini')).not.toBeInTheDocument();
+      expect(dialog).not.toHaveAttribute('open');
     });
   });
 
@@ -205,12 +206,12 @@ describe('ModelModal', () => {
       expect(screen.getAllByText('GPT-4o').length).toBeGreaterThanOrEqual(1);
     });
 
-    // Find the overlay (the fixed div with bg-black/60)
-    const overlay = document.querySelector('.fixed.inset-0');
-    fireEvent.click(overlay!);
+    // Click on the dialog element itself (backdrop area) to close
+    const dialog = document.querySelector('dialog');
+    fireEvent.click(dialog!);
 
     await waitFor(() => {
-      expect(screen.queryByText('GPT-4o Mini')).not.toBeInTheDocument();
+      expect(dialog).not.toHaveAttribute('open');
     });
   });
 
diff --git a/frontend/src/__tests__/Sidebar.test.tsx b/frontend/src/__tests__/Sidebar.test.tsx
index f38b962..690e90b 100644
--- a/frontend/src/__tests__/Sidebar.test.tsx
+++ b/frontend/src/__tests__/Sidebar.test.tsx
@@ -93,7 +93,8 @@ describe('Sidebar', () => {
         <Sidebar {...defaultProps} onSwitch={onSwitch} />
       </MemoryRouter>
     );
-    fireEvent.click(screen.getByText('First conversation'));
+    // The conversation item uses an overlay button with aria-label
+    fireEvent.click(screen.getByRole('button', { name: /Switch to conversation: First conversation/i }));
     expect(onSwitch).toHaveBeenCalledWith('conv-1');
   });
 
diff --git a/frontend/src/__tests__/setup.ts b/frontend/src/__tests__/setup.ts
index bb02c60..6c0d8cc 100644
--- a/frontend/src/__tests__/setup.ts
+++ b/frontend/src/__tests__/setup.ts
@@ -1 +1,10 @@
 import '@testing-library/jest-dom/vitest';
+
+// Mock HTMLDialogElement methods not implemented in jsdom
+HTMLDialogElement.prototype.showModal = function() {
+  this.setAttribute('open', '');
+};
+
+HTMLDialogElement.prototype.close = function() {
+  this.removeAttribute('open');
+};
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index a30de51..5c8225a 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -58,7 +58,6 @@ export function ConfirmDialog({
       <div className="flex items-center justify-center min-h-full">
         <div 
           className="bg-surface rounded-xl border border-border p-6 max-w-md w-full shadow-xl animate-slide-up"
-          onClick={(e) => e.stopPropagation()}
         >
           <h3 id="confirm-dialog-title" className="text-lg font-semibold text-text mb-3">{title}</h3>
           <p className="text-text-dim mb-6 leading-relaxed">{message}</p>
diff --git a/frontend/src/components/ModelModal.tsx b/frontend/src/components/ModelModal.tsx
index 47cb0db..9aa6378 100644
--- a/frontend/src/components/ModelModal.tsx
+++ b/frontend/src/components/ModelModal.tsx
@@ -282,7 +282,6 @@ export function ModelModal({ currentModel, onModelChange }: Props) {
           <div
             className="bg-surface rounded-xl border border-border w-full max-w-lg flex flex-col shadow-xl"
             style={{ height: 'min(80vh, 600px)' }}
-            onClick={(e) => e.stopPropagation()}
           >
             {/* Tabs */}
             <div className="flex border-b border-border shrink-0">
diff --git a/frontend/src/components/ProjectManageModal.tsx b/frontend/src/components/ProjectManageModal.tsx
index db1f5fe..c9e8251 100644
--- a/frontend/src/components/ProjectManageModal.tsx
+++ b/frontend/src/components/ProjectManageModal.tsx
@@ -185,7 +185,6 @@ export function ProjectManageModal({ projects, onClose, onChanged }: Props) {
       <div className="flex items-center justify-center min-h-full">
         <div
           className="bg-surface border border-border rounded-xl shadow-xl w-full max-w-lg max-h-[70vh] flex flex-col"
-          onClick={(e) => e.stopPropagation()}
         >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
diff --git a/frontend/src/components/ReportDrawer.tsx b/frontend/src/components/ReportDrawer.tsx
index eae8c2a..62f7aa4 100644
--- a/frontend/src/components/ReportDrawer.tsx
+++ b/frontend/src/components/ReportDrawer.tsx
@@ -56,7 +56,6 @@ export function ReportDrawer({ reportId, title, cachedContent, onClose }: Props)
       <div className="flex justify-end min-h-full">
         <div 
           className="w-full max-w-2xl h-full bg-surface border-l border-border flex flex-col animate-slide-in-right"
-          onClick={(e) => e.stopPropagation()}
         >
           {/* Header */}
           <div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
diff --git a/frontend/src/components/settings/ProvidersSettings.tsx b/frontend/src/components/settings/ProvidersSettings.tsx
index 3c31188..d0aaba8 100644
--- a/frontend/src/components/settings/ProvidersSettings.tsx
+++ b/frontend/src/components/settings/ProvidersSettings.tsx
@@ -346,7 +346,6 @@ export function ProvidersSettings() {
         <div className="flex items-center justify-center min-h-full">
           <div
             className="bg-surface rounded-xl border border-border w-full max-w-md flex flex-col shadow-xl p-6"
-            onClick={(e) => e.stopPropagation()}
           >
             <h3 id="custom-provider-title" className="text-lg font-semibold text-text mb-4">Add Custom Provider</h3>