From 85520bdea6076880ff6076594b6bfe97ee96cf73 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Wed, 25 Feb 2026 20:55:29 -0800
Subject: [PATCH] chore: clean up build warnings in frontend components

- Remove unused .animate-spin CSS from PluginManagementPanel and McpManagementPanel
- Replace deprecated <svelte:component> with Svelte 5 dynamic component syntax
- Add for/id associations to MCP add-server form labels
- Change display-only <label> elements in MCP details panel to <p>
- Add missing a11y_click_events_have_key_events suppression to overlay divs
- Add onwarn filter to svelte.config.js for intentional patterns
---
 src/lib/components/McpManagementPanel.svelte  | 71 +++++++------------
 .../components/PluginManagementPanel.svelte   | 15 ----
 src/lib/components/SessionHistoryPanel.svelte |  1 +
 .../components/TextInputContextMenu.svelte    |  2 +-
 .../components/editor/ConfirmDialog.svelte    |  4 +-
 .../editor/EditorContextMenu.svelte           |  2 +-
 .../components/editor/FileContextMenu.svelte  |  4 +-
 src/lib/components/editor/InputDialog.svelte  |  4 +-
 svelte.config.js                              | 11 +++
 9 files changed, 47 insertions(+), 67 deletions(-)

diff --git a/src/lib/components/McpManagementPanel.svelte b/src/lib/components/McpManagementPanel.svelte
index 81f4970..63d697b 100644
--- a/src/lib/components/McpManagementPanel.svelte
+++ b/src/lib/components/McpManagementPanel.svelte
@@ -190,10 +190,13 @@
       <h3 class="text-sm font-medium text-[var(--text-primary)] mb-3">Add MCP Server</h3>
       <div class="space-y-3">
         <div>
-          <label class="text-xs text-[var(--text-secondary)] uppercase tracking-wider block mb-1"
+          <label
+            for="mcp-new-name"
+            class="text-xs text-[var(--text-secondary)] uppercase tracking-wider block mb-1"
             >Server Name</label
           >
           <input
+            id="mcp-new-name"
             type="text"
             bind:value={newServerName}
             placeholder="my-server"
@@ -201,10 +204,13 @@
           />
         </div>
         <div>
-          <label class="text-xs text-[var(--text-secondary)] uppercase tracking-wider block mb-1"
+          <label
+            for="mcp-new-transport"
+            class="text-xs text-[var(--text-secondary)] uppercase tracking-wider block mb-1"
             >Transport</label
           >
           <select
+            id="mcp-new-transport"
             bind:value={newServerTransport}
             class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] text-sm focus:outline-none focus:border-[var(--accent-primary)]"
           >
@@ -214,10 +220,14 @@
           </select>
         </div>
         <div>
-          <label class="text-xs text-[var(--text-secondary)] uppercase tracking-wider block mb-1">
+          <label
+            for="mcp-new-url"
+            class="text-xs text-[var(--text-secondary)] uppercase tracking-wider block mb-1"
+          >
             {newServerTransport === "stdio" ? "Command" : "URL"}
           </label>
           <input
+            id="mcp-new-url"
             type="text"
             bind:value={newServerUrl}
             placeholder={newServerTransport === "stdio"
@@ -266,6 +276,7 @@
       {:else}
         <div class="space-y-2">
           {#each servers as server (server.name)}
+            {@const TransportIcon = getTransportIcon(server.transport)}
             <button
               onclick={() => loadServerDetails(server.name)}
               class="w-full bg-[var(--bg-secondary)]/50 rounded-lg p-3 border border-[var(--border-color)] hover:border-[var(--accent-primary)]/50 transition-all text-left"
@@ -274,10 +285,7 @@
               <div class="flex items-start justify-between">
                 <div class="flex-1">
                   <h4 class="font-medium text-[var(--text-primary)] flex items-center gap-2">
-                    <svelte:component
-                      this={getTransportIcon(server.transport)}
-                      class="w-4 h-4 {getTransportColor(server.transport)}"
-                    />
+                    <TransportIcon class="w-4 h-4 {getTransportColor(server.transport)}" />
                     {server.name}
                     {#if server.status}
                       {#if server.status.includes("Connected")}
@@ -323,25 +331,19 @@
             <RefreshCw class="w-6 h-6 animate-spin text-[var(--text-secondary)]" />
           </div>
         {:else}
+          {@const TransportIcon = getTransportIcon(selectedServer.transport)}
           <div class="space-y-4">
             <!-- Name -->
             <div>
-              <label class="text-xs text-[var(--text-secondary)] uppercase tracking-wider"
-                >Name</label
-              >
+              <p class="text-xs text-[var(--text-secondary)] uppercase tracking-wider">Name</p>
               <p class="text-sm text-[var(--text-primary)] mt-1">{selectedServer.name}</p>
             </div>
 
             <!-- Transport -->
             <div>
-              <label class="text-xs text-[var(--text-secondary)] uppercase tracking-wider"
-                >Transport</label
-              >
+              <p class="text-xs text-[var(--text-secondary)] uppercase tracking-wider">Transport</p>
               <p class="text-sm text-[var(--text-primary)] mt-1 flex items-center gap-2">
-                <svelte:component
-                  this={getTransportIcon(selectedServer.transport)}
-                  class="w-4 h-4 {getTransportColor(selectedServer.transport)}"
-                />
+                <TransportIcon class="w-4 h-4 {getTransportColor(selectedServer.transport)}" />
                 {selectedServer.transport.toUpperCase()}
               </p>
             </div>
@@ -349,9 +351,7 @@
             <!-- URL or Command -->
             {#if selectedServer.url}
               <div>
-                <label class="text-xs text-[var(--text-secondary)] uppercase tracking-wider"
-                  >URL</label
-                >
+                <p class="text-xs text-[var(--text-secondary)] uppercase tracking-wider">URL</p>
                 <p
                   class="text-sm text-[var(--text-primary)] mt-1 break-all font-mono bg-[var(--bg-primary)] p-2 rounded border border-[var(--border-color)]"
                 >
@@ -362,9 +362,7 @@
 
             {#if selectedServer.command}
               <div>
-                <label class="text-xs text-[var(--text-secondary)] uppercase tracking-wider"
-                  >Command</label
-                >
+                <p class="text-xs text-[var(--text-secondary)] uppercase tracking-wider">Command</p>
                 <p
                   class="text-sm text-[var(--text-primary)] mt-1 font-mono bg-[var(--bg-primary)] p-2 rounded border border-[var(--border-color)]"
                 >
@@ -376,9 +374,9 @@
             <!-- Environment Variables -->
             {#if selectedServer.env}
               <div>
-                <label class="text-xs text-[var(--text-secondary)] uppercase tracking-wider"
-                  >Environment</label
-                >
+                <p class="text-xs text-[var(--text-secondary)] uppercase tracking-wider">
+                  Environment
+                </p>
                 <pre
                   class="text-xs text-[var(--text-primary)] mt-1 font-mono bg-[var(--bg-primary)] p-2 rounded border border-[var(--border-color)] overflow-x-auto">{JSON.stringify(
                     selectedServer.env,
@@ -391,9 +389,9 @@
             <!-- Full Server Details -->
             {#if serverDetails}
               <div>
-                <label class="text-xs text-[var(--text-secondary)] uppercase tracking-wider"
-                  >Full Details</label
-                >
+                <p class="text-xs text-[var(--text-secondary)] uppercase tracking-wider">
+                  Full Details
+                </p>
                 <pre
                   class="text-xs text-[var(--text-primary)] mt-1 font-mono bg-[var(--bg-primary)] p-2 rounded border border-[var(--border-color)] overflow-x-auto whitespace-pre-wrap">{serverDetails}</pre>
               </div>
@@ -416,18 +414,3 @@
     {/if}
   </div>
 </div>
-
-<style>
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .animate-spin {
-    animation: spin 1s linear infinite;
-  }
-</style>
diff --git a/src/lib/components/PluginManagementPanel.svelte b/src/lib/components/PluginManagementPanel.svelte
index 5a4f4fc..6e1a856 100644
--- a/src/lib/components/PluginManagementPanel.svelte
+++ b/src/lib/components/PluginManagementPanel.svelte
@@ -430,18 +430,3 @@
     {/if}
   </div>
 </div>
-
-<style>
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .animate-spin {
-    animation: spin 1s linear infinite;
-  }
-</style>
diff --git a/src/lib/components/SessionHistoryPanel.svelte b/src/lib/components/SessionHistoryPanel.svelte
index d237060..81e49e2 100644
--- a/src/lib/components/SessionHistoryPanel.svelte
+++ b/src/lib/components/SessionHistoryPanel.svelte
@@ -471,6 +471,7 @@
     tabindex="0"
     onkeydown={(e) => e.key === "Escape" && (showClearAllConfirm = false)}
   >
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
     <div
       class="bg-[var(--bg-primary)] border border-red-500/30 rounded-lg shadow-xl max-w-md w-full p-6"
       onclick={(e) => e.stopPropagation()}
diff --git a/src/lib/components/TextInputContextMenu.svelte b/src/lib/components/TextInputContextMenu.svelte
index b1f78e4..d350dca 100644
--- a/src/lib/components/TextInputContextMenu.svelte
+++ b/src/lib/components/TextInputContextMenu.svelte
@@ -73,7 +73,7 @@
     onClose();
   }}
 >
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
   <div
     bind:this={menuElement}
     class="menu-content"
diff --git a/src/lib/components/editor/ConfirmDialog.svelte b/src/lib/components/editor/ConfirmDialog.svelte
index 16e7bf6..160c80b 100644
--- a/src/lib/components/editor/ConfirmDialog.svelte
+++ b/src/lib/components/editor/ConfirmDialog.svelte
@@ -30,9 +30,9 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
 <div class="dialog-overlay" onclick={onCancel}>
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
   <div class="dialog-content" onclick={(e) => e.stopPropagation()}>
     <h2 class="dialog-title">{title}</h2>
     <p class="dialog-message">{message}</p>
diff --git a/src/lib/components/editor/EditorContextMenu.svelte b/src/lib/components/editor/EditorContextMenu.svelte
index 4445129..bf113d2 100644
--- a/src/lib/components/editor/EditorContextMenu.svelte
+++ b/src/lib/components/editor/EditorContextMenu.svelte
@@ -83,7 +83,7 @@
     onClose();
   }}
 >
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
   <div
     bind:this={menuElement}
     class="menu-content"
diff --git a/src/lib/components/editor/FileContextMenu.svelte b/src/lib/components/editor/FileContextMenu.svelte
index 50eec44..89d06e7 100644
--- a/src/lib/components/editor/FileContextMenu.svelte
+++ b/src/lib/components/editor/FileContextMenu.svelte
@@ -78,7 +78,7 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
 <div
   class="menu-overlay"
   onclick={onClose}
@@ -87,7 +87,7 @@
     onClose();
   }}
 >
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
   <div
     bind:this={menuElement}
     class="menu-content"
diff --git a/src/lib/components/editor/InputDialog.svelte b/src/lib/components/editor/InputDialog.svelte
index 654172c..e4ed98a 100644
--- a/src/lib/components/editor/InputDialog.svelte
+++ b/src/lib/components/editor/InputDialog.svelte
@@ -50,9 +50,9 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
 <div class="dialog-overlay" onclick={onCancel}>
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
   <div class="dialog-content" onclick={(e) => e.stopPropagation()}>
     <h2 class="dialog-title">{title}</h2>
 
diff --git a/svelte.config.js b/svelte.config.js
index a7830ea..9bf9791 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -8,6 +8,17 @@ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   preprocess: vitePreprocess(),
+  // Suppress specific build-time warnings that are intentional patterns:
+  // - a11y_click_events_have_key_events: all overlay/context-menu divs use svelte:window handlers
+  // - state_referenced_locally: InputDialog intentionally captures the initial prop value
+  onwarn: (warning, handler) => {
+    if (
+      warning.code === "a11y_click_events_have_key_events" ||
+      warning.code === "state_referenced_locally"
+    )
+      return;
+    handler(warning);
+  },
   kit: {
     adapter: adapter({
       fallback: "index.html",