From 880b1d6311462b7070271e489f5aee0a074c418d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Mon, 12 May 2025 18:44:08 +0200
Subject: [PATCH 01/40] feat: add MCP server management functionality to Chat
 component

- Introduced MCP server addition and removal capabilities in the Chat component.
- Implemented fetching of MCP connections on component mount.
- Added UI elements for displaying and managing MCP connections.
- Updated dependencies including @radix-ui/react-dialog and agents.
- Enhanced session management with unique session IDs stored in localStorage.
---
 package-lock.json                     | 375 +++++++++++++++++---------
 package.json                          |   4 +-
 src/app.tsx                           | 140 +++++++++-
 src/components/AddMcpServerDialog.tsx | 103 +++++++
 src/components/dialog/dialog.tsx      | 132 +++++++++
 src/server.ts                         |  60 ++++-
 6 files changed, 678 insertions(+), 136 deletions(-)
 create mode 100644 src/components/AddMcpServerDialog.tsx
 create mode 100644 src/components/dialog/dialog.tsx

diff --git a/package-lock.json b/package-lock.json
index b43b465..7ee4331 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,14 +14,16 @@
         "@ai-sdk/ui-utils": "^1.2.10",
         "@phosphor-icons/react": "^2.1.7",
         "@radix-ui/react-avatar": "^1.1.7",
+        "@radix-ui/react-dialog": "^1.1.13",
         "@radix-ui/react-dropdown-menu": "^2.1.12",
         "@radix-ui/react-slot": "^1.2.0",
         "@radix-ui/react-switch": "^1.2.2",
         "@types/marked": "^6.0.0",
-        "agents": "^0.0.77",
+        "agents": "^0.0.80",
         "ai": "^4.3.13",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "lucide-react": "^0.510.0",
         "marked": "^15.0.11",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -94,13 +96,12 @@
       }
     },
     "node_modules/@ai-sdk/react": {
-      "version": "1.2.11",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-1.2.11.tgz",
-      "integrity": "sha512-+kPqLkJ3TWP6czaJPV+vzAKSUcKQ1598BUrcLHt56sH99+LhmIIW3ylZp0OfC3O6TR3eO1Lt0Yzw4R0mK6g9Gw==",
-      "license": "Apache-2.0",
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-1.2.12.tgz",
+      "integrity": "sha512-jK1IZZ22evPZoQW3vlkZ7wvjYGYF+tRBKXtrcolduIkQ/m/sOAVcVeVDUDvh1T91xCnWCdUGCPZg2avZ90mv3g==",
       "dependencies": {
-        "@ai-sdk/provider-utils": "2.2.7",
-        "@ai-sdk/ui-utils": "1.2.10",
+        "@ai-sdk/provider-utils": "2.2.8",
+        "@ai-sdk/ui-utils": "1.2.11",
         "swr": "^2.2.5",
         "throttleit": "2.1.0"
       },
@@ -117,14 +118,29 @@
         }
       }
     },
+    "node_modules/@ai-sdk/react/node_modules/@ai-sdk/provider-utils": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.2.8.tgz",
+      "integrity": "sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA==",
+      "dependencies": {
+        "@ai-sdk/provider": "1.1.3",
+        "nanoid": "^3.3.8",
+        "secure-json-parse": "^2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.23.8"
+      }
+    },
     "node_modules/@ai-sdk/ui-utils": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-1.2.10.tgz",
-      "integrity": "sha512-GUj+LBoAlRQF1dL/M49jtufGqtLOMApxTpCmVjoRpIPt/dFALVL9RfqfvxwztyIwbK+IxGzcYjSGRsrWrj+86g==",
-      "license": "Apache-2.0",
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-1.2.11.tgz",
+      "integrity": "sha512-3zcwCc8ezzFlwp3ZD15wAPjf2Au4s3vAbKsXQVyhxODHcmu0iyPO2Eua6D/vicq/AUm/BAo60r97O6HU+EI0+w==",
       "dependencies": {
         "@ai-sdk/provider": "1.1.3",
-        "@ai-sdk/provider-utils": "2.2.7",
+        "@ai-sdk/provider-utils": "2.2.8",
         "zod-to-json-schema": "^3.24.1"
       },
       "engines": {
@@ -134,6 +150,22 @@
         "zod": "^3.23.8"
       }
     },
+    "node_modules/@ai-sdk/ui-utils/node_modules/@ai-sdk/provider-utils": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.2.8.tgz",
+      "integrity": "sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA==",
+      "dependencies": {
+        "@ai-sdk/provider": "1.1.3",
+        "nanoid": "^3.3.8",
+        "secure-json-parse": "^2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.23.8"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -1765,10 +1797,9 @@
       "license": "MIT"
     },
     "node_modules/@modelcontextprotocol/sdk": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.10.2.tgz",
-      "integrity": "sha512-rb6AMp2DR4SN+kc6L1ta2NCpApyA9WYNx3CrTSZvGxq9wH71bRur+zRqPfg0vQ9mjywR7qZdX2RGHOPq3ss+tA==",
-      "license": "MIT",
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.11.2.tgz",
+      "integrity": "sha512-H9vwztj5OAqHg9GockCQC06k1natgcxWQSRpQcPJf6i5+MWBzfKkRtxGbjQf0X2ihii0ffLZCRGbYV2f2bjNCQ==",
       "dependencies": {
         "content-type": "^1.0.5",
         "cors": "^2.8.5",
@@ -1919,6 +1950,153 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.13.tgz",
+      "integrity": "sha512-ARFmqUyhIVS3+riWzwGTe7JLjqwqgnODBUZdqpWar/z1WFs9z76fuOs/2BOWCR+YboRn4/WN9aoaGVwqNRr8VA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.9",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.6",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.8",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-slot": "1.2.2",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.9.tgz",
+      "integrity": "sha512-way197PiTvNp+WBP7svMJasHl+vibhWGQDb6Mgf5mhEWJkgb85z7Lfl9TUdkqpWsf8GRNmoopx9ZxCyDzmgRMQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.6.tgz",
+      "integrity": "sha512-r9zpYNUQY+2jWHWZGyddQLL9YHkM/XvSFHVcWs7bdVuxMAnCwTAuy6Pf47Z4nw7dYcUou1vg/VgjjrrH03VeBw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.8.tgz",
+      "integrity": "sha512-hQsTUIn7p7fxCPvao/q6wpbxmCwgLrlz+nOrJgC+RwfZqWY/WN+UMqkXzrtKbPrF82P43eCTl3ekeKuyAQbFeg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.2.tgz",
+      "integrity": "sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.2.tgz",
+      "integrity": "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -3339,7 +3517,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
       "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
-      "license": "MIT",
       "dependencies": {
         "mime-types": "^3.0.0",
         "negotiator": "^1.0.0"
@@ -3352,7 +3529,6 @@
       "version": "1.54.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
       "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -3361,7 +3537,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
       "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
-      "license": "MIT",
       "dependencies": {
         "mime-db": "^1.54.0"
       },
@@ -3393,18 +3568,17 @@
       }
     },
     "node_modules/agents": {
-      "version": "0.0.77",
-      "resolved": "https://registry.npmjs.org/agents/-/agents-0.0.77.tgz",
-      "integrity": "sha512-Sg/lY15c7Qfk07gJsdtPEIgQbgflSSQQnbqOQW28VYGpvrL8v9Ly50BWDoTtvIOOVRjZ7lvcVw6mv3MnLgHaEw==",
-      "license": "MIT",
+      "version": "0.0.80",
+      "resolved": "https://registry.npmjs.org/agents/-/agents-0.0.80.tgz",
+      "integrity": "sha512-Nlk9ihz3ejhndYSteml0qKh0yj0GMNMewHcHngLrJR470qruacpeLkdldAhWIC6ezF8H2lwtaHTPveAG6jfO9A==",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.10.2",
-        "ai": "^4.3.12",
+        "@modelcontextprotocol/sdk": "^1.11.0",
+        "ai": "^4.3.14",
         "cron-schedule": "^5.0.4",
         "nanoid": "^5.1.5",
-        "partyserver": "^0.0.68",
+        "partyserver": "^0.0.70",
         "partysocket": "1.1.3",
-        "zod": "^3.24.3"
+        "zod": "^3.24.4"
       },
       "peerDependencies": {
         "react": "*"
@@ -3429,15 +3603,14 @@
       }
     },
     "node_modules/ai": {
-      "version": "4.3.13",
-      "resolved": "https://registry.npmjs.org/ai/-/ai-4.3.13.tgz",
-      "integrity": "sha512-cC5HXItuOwGykSMacCPzNp6+NMTxeuTjOenztVgSJhdC9Z4OrzBxwkyeDAf4h1QP938ZFi7IBdq3u4lxVoVmvw==",
-      "license": "Apache-2.0",
+      "version": "4.3.15",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-4.3.15.tgz",
+      "integrity": "sha512-TYKRzbWg6mx/pmTadlAEIhuQtzfHUV0BbLY72+zkovXwq/9xhcH24IlQmkyBpElK6/4ArS0dHdOOtR1jOPVwtg==",
       "dependencies": {
         "@ai-sdk/provider": "1.1.3",
-        "@ai-sdk/provider-utils": "2.2.7",
-        "@ai-sdk/react": "1.2.11",
-        "@ai-sdk/ui-utils": "1.2.10",
+        "@ai-sdk/provider-utils": "2.2.8",
+        "@ai-sdk/react": "1.2.12",
+        "@ai-sdk/ui-utils": "1.2.11",
         "@opentelemetry/api": "1.9.0",
         "jsondiffpatch": "0.6.0"
       },
@@ -3454,6 +3627,22 @@
         }
       }
     },
+    "node_modules/ai/node_modules/@ai-sdk/provider-utils": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.2.8.tgz",
+      "integrity": "sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA==",
+      "dependencies": {
+        "@ai-sdk/provider": "1.1.3",
+        "nanoid": "^3.3.8",
+        "secure-json-parse": "^2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.23.8"
+      }
+    },
     "node_modules/aria-hidden": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
@@ -3516,7 +3705,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
       "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
-      "license": "MIT",
       "dependencies": {
         "bytes": "^3.1.2",
         "content-type": "^1.0.5",
@@ -3581,7 +3769,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
       "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -3600,7 +3787,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2"
@@ -3613,7 +3799,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
       "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
         "get-intrinsic": "^1.3.0"
@@ -3820,7 +4005,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.0.tgz",
       "integrity": "sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==",
-      "license": "MIT",
       "dependencies": {
         "safe-buffer": "5.2.1"
       },
@@ -3832,7 +4016,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
       "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -3857,7 +4040,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
       "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
-      "license": "MIT",
       "engines": {
         "node": ">=6.6.0"
       }
@@ -3866,7 +4048,6 @@
       "version": "2.8.5",
       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
       "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
-      "license": "MIT",
       "dependencies": {
         "object-assign": "^4",
         "vary": "^1"
@@ -3888,7 +4069,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -3961,7 +4141,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -4020,7 +4199,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
         "es-errors": "^1.3.0",
@@ -4033,8 +4211,7 @@
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "license": "MIT"
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
       "version": "1.5.102",
@@ -4047,7 +4224,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
       "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -4070,7 +4246,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
@@ -4079,7 +4254,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
@@ -4095,7 +4269,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
       },
@@ -4157,8 +4330,7 @@
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "license": "MIT"
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "node_modules/escape-string-regexp": {
       "version": "5.0.0",
@@ -4194,7 +4366,6 @@
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -4206,10 +4377,9 @@
       "license": "MIT"
     },
     "node_modules/eventsource": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.6.tgz",
-      "integrity": "sha512-l19WpE2m9hSuyP06+FbuUUf1G+R0SFLrtQfbRb9PRr+oimOfxQhgGCbVaXg5IvZyyTThJsxh6L/srkMiCeBPDA==",
-      "license": "MIT",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
+      "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
       "dependencies": {
         "eventsource-parser": "^3.0.1"
       },
@@ -4221,7 +4391,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.1.tgz",
       "integrity": "sha512-VARTJ9CYeuQYb0pZEPbzi740OWFgpHe7AYJ2WFZVnUDUQp5Dk2yJUgF36YsZ81cOyxT0QxmXD2EQpapAouzWVA==",
-      "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
       }
@@ -4253,7 +4422,6 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/express/-/express-5.1.0.tgz",
       "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
-      "license": "MIT",
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.0",
@@ -4295,7 +4463,6 @@
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.5.0.tgz",
       "integrity": "sha512-eB5zbQh5h+VenMPM3fh+nw1YExi5nMr6HUCR62ELSP11huvxm/Uir1H1QEyTkk5QX6A58pX6NmaTMceKZ0Eodg==",
-      "license": "MIT",
       "engines": {
         "node": ">= 16"
       },
@@ -4310,7 +4477,6 @@
       "version": "1.54.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
       "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -4319,7 +4485,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
       "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
-      "license": "MIT",
       "dependencies": {
         "mime-db": "^1.54.0"
       },
@@ -4375,7 +4540,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.0.tgz",
       "integrity": "sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==",
-      "license": "MIT",
       "dependencies": {
         "debug": "^4.4.0",
         "encodeurl": "^2.0.0",
@@ -4392,7 +4556,6 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -4401,7 +4564,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
       "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -4425,7 +4587,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4444,7 +4605,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
@@ -4490,7 +4650,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
         "es-object-atoms": "^1.0.0"
@@ -4531,7 +4690,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -4550,7 +4708,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -4562,7 +4719,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -4621,7 +4777,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
       "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "license": "MIT",
       "dependencies": {
         "depd": "2.0.0",
         "inherits": "2.0.4",
@@ -4637,7 +4792,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -4648,8 +4802,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/inline-style-parser": {
       "version": "0.2.4",
@@ -4660,7 +4813,6 @@
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.10"
       }
@@ -4727,14 +4879,12 @@
     "node_modules/is-promise": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
-      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
-      "license": "MIT"
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ=="
     },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "license": "ISC"
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/jiti": {
       "version": "2.4.2",
@@ -5067,6 +5217,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.510.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.510.0.tgz",
+      "integrity": "sha512-p8SQRAMVh7NhsAIETokSqDrc5CHnDLbV29mMnzaXx+Vc/hnqQzwI2r0FMWCcoTXnbw2KEjy48xwpGdEL+ck06Q==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -5102,7 +5260,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
@@ -5366,7 +5523,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
       "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -5375,7 +5531,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
       "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
-      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
@@ -6028,7 +6183,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
       "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -6051,7 +6205,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6060,7 +6213,6 @@
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
       "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -6079,7 +6231,6 @@
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
       "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "license": "MIT",
       "dependencies": {
         "ee-first": "1.1.1"
       },
@@ -6091,7 +6242,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "license": "ISC",
       "dependencies": {
         "wrappy": "1"
       }
@@ -6123,16 +6273,14 @@
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/partyserver": {
-      "version": "0.0.68",
-      "resolved": "https://registry.npmjs.org/partyserver/-/partyserver-0.0.68.tgz",
-      "integrity": "sha512-LdYuxyhFmu8M5Mx7+rTAAo9lfk22LUfbjXnaKUCXhwSABpgM66LNIjW8F1i2x/CSra1fzF3tIZFD5ojr3KeSQg==",
-      "license": "ISC",
+      "version": "0.0.70",
+      "resolved": "https://registry.npmjs.org/partyserver/-/partyserver-0.0.70.tgz",
+      "integrity": "sha512-v6hfcNFdSS+5pLBHXGXnuRH6m3luc2veWhd3klY2iOx3HXG17egHBP4oZ/Is1Qk5CmuNce8xXMqHp52+cxCAyw==",
       "dependencies": {
         "nanoid": "^5.1.5"
       },
@@ -6150,7 +6298,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.js"
       },
@@ -6171,7 +6318,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -6180,7 +6326,6 @@
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.2.0.tgz",
       "integrity": "sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==",
-      "license": "MIT",
       "engines": {
         "node": ">=16"
       }
@@ -6226,7 +6371,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.0.tgz",
       "integrity": "sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==",
-      "license": "MIT",
       "engines": {
         "node": ">=16.20.0"
       }
@@ -6296,7 +6440,6 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
       "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "license": "MIT",
       "dependencies": {
         "forwarded": "0.2.0",
         "ipaddr.js": "1.9.1"
@@ -6309,7 +6452,6 @@
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
       "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
-      "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"
       },
@@ -6324,7 +6466,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -6333,7 +6474,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.0.tgz",
       "integrity": "sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==",
-      "license": "MIT",
       "dependencies": {
         "bytes": "3.1.2",
         "http-errors": "2.0.0",
@@ -6577,7 +6717,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
       "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
-      "license": "MIT",
       "dependencies": {
         "debug": "^4.4.0",
         "depd": "^2.0.0",
@@ -6606,14 +6745,12 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ],
-      "license": "MIT"
+      ]
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT"
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/scheduler": {
       "version": "0.26.0",
@@ -6641,7 +6778,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/send/-/send-1.2.0.tgz",
       "integrity": "sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==",
-      "license": "MIT",
       "dependencies": {
         "debug": "^4.3.5",
         "encodeurl": "^2.0.0",
@@ -6663,7 +6799,6 @@
       "version": "1.54.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
       "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -6672,7 +6807,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
       "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
-      "license": "MIT",
       "dependencies": {
         "mime-db": "^1.54.0"
       },
@@ -6684,7 +6818,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.0.tgz",
       "integrity": "sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==",
-      "license": "MIT",
       "dependencies": {
         "encodeurl": "^2.0.0",
         "escape-html": "^1.0.3",
@@ -6698,8 +6831,7 @@
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "license": "ISC"
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
     "node_modules/sharp": {
       "version": "0.33.5",
@@ -6760,7 +6892,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -6772,7 +6903,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -6781,7 +6911,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
       "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
         "object-inspect": "^1.13.3",
@@ -6800,7 +6929,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
       "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
         "object-inspect": "^1.13.3"
@@ -6816,7 +6944,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
       "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
@@ -6834,7 +6961,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
       "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
@@ -6918,7 +7044,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -7096,7 +7221,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "license": "MIT",
       "engines": {
         "node": ">=0.6"
       }
@@ -7129,7 +7253,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
       "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
-      "license": "MIT",
       "dependencies": {
         "content-type": "^1.0.5",
         "media-typer": "^1.1.0",
@@ -7143,7 +7266,6 @@
       "version": "1.54.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
       "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -7152,7 +7274,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
       "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
-      "license": "MIT",
       "dependencies": {
         "mime-db": "^1.54.0"
       },
@@ -7300,7 +7421,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -7399,7 +7519,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -7603,7 +7722,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -7698,8 +7816,7 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "license": "ISC"
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/ws": {
       "version": "8.18.0",
diff --git a/package.json b/package.json
index 06f06c3..36998e4 100644
--- a/package.json
+++ b/package.json
@@ -42,14 +42,16 @@
     "@ai-sdk/ui-utils": "^1.2.10",
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-avatar": "^1.1.7",
+    "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-dropdown-menu": "^2.1.12",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-switch": "^1.2.2",
     "@types/marked": "^6.0.0",
-    "agents": "^0.0.77",
+    "agents": "^0.0.80",
     "ai": "^4.3.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lucide-react": "^0.510.0",
     "marked": "^15.0.11",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
diff --git a/src/app.tsx b/src/app.tsx
index f59128c..270514c 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -3,6 +3,8 @@ import { useAgent } from "agents/react";
 import { useAgentChat } from "agents/ai-react";
 import type { Message } from "@ai-sdk/react";
 import type { tools } from "./tools";
+import { agentFetch } from "agents/client";
+import { nanoid } from "nanoid";
 
 // Component imports
 import { Button } from "@/components/button/Button";
@@ -12,6 +14,7 @@ import { Toggle } from "@/components/toggle/Toggle";
 import { Textarea } from "@/components/textarea/Textarea";
 import { MemoizedMarkdown } from "@/components/memoized-markdown";
 import { ToolInvocationCard } from "@/components/tool-invocation-card/ToolInvocationCard";
+import { AddMcpServerDialog } from "@/components/AddMcpServerDialog";
 
 // Icon imports
 import {
@@ -28,6 +31,12 @@ const toolsRequiringConfirmation: (keyof typeof tools)[] = [
   "getWeatherInformation",
 ];
 
+let sessionId = localStorage.getItem("sessionId");
+if (!sessionId) {
+  sessionId = nanoid(8);
+  localStorage.setItem("sessionId", sessionId);
+}
+
 export default function Chat() {
   const [theme, setTheme] = useState<"dark" | "light">(() => {
     // Check localStorage first, default to dark if not found
@@ -37,6 +46,9 @@ export default function Chat() {
   const [showDebug, setShowDebug] = useState(false);
   const [textareaHeight, setTextareaHeight] = useState("auto");
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [showAddMcpDialog, setShowAddMcpDialog] = useState(false);
+  type McpConnection = { id: string; url: string; connectionState: string; authUrl?: string };
+  const [mcpConnections, setMcpConnections] = useState<McpConnection[]>([]);
 
   const scrollToBottom = useCallback(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -77,6 +89,9 @@ export default function Chat() {
     handleSubmit: handleAgentSubmit,
     addToolResult,
     clearHistory,
+    isLoading,
+    stop,
+    setInput,
   } = useAgentChat({
     agent,
     maxSteps: 5,
@@ -102,9 +117,121 @@ export default function Chat() {
     return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   };
 
+  // Fetch MCP connections
+  const fetchMcpConnections = async () => {
+    const res = await agentFetch(
+      {
+        host: agent.host,
+        agent: "chat",
+        name: sessionId!,
+        path: "get-mcp-connections",
+      },
+      { method: "GET" }
+    );
+    const data = (await res.json()) as { mcpConnections: Record<string, { url: string; connectionState: string; authUrl?: string }> };
+    const connections = Object.entries(data.mcpConnections || {}).map(([id, conn]) => ({
+      id,
+      url: conn.url,
+      connectionState: conn.connectionState,
+      authUrl: conn.authUrl,
+    }));
+    setMcpConnections(connections);
+  };
+
+  useEffect(() => {
+    fetchMcpConnections();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Helper to open auth popup
+  function openPopup(authUrl: string) {
+    window.open(
+      authUrl,
+      "popupWindow",
+      "width=600,height=800,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes"
+    );
+  }
+
+  const handleAddMcpServer = async ({ name, url, localUrl }: { name: string; url: string; localUrl: string }) => {
+    const res = await agentFetch(
+      {
+        host: agent.host,
+        agent: "chat",
+        name: sessionId!,
+        path: "add-mcp",
+      },
+      {
+        method: "POST",
+        body: JSON.stringify({ url, name, localUrl }),
+      }
+    );
+    // Try to get authUrl from response
+    try {
+      const data = (await res.json()) as { id: string; url: string; connectionState: string; authUrl?: string };
+      if (data?.authUrl) {
+        openPopup(data.authUrl);
+      }
+    } catch (e) {
+      // ignore if not JSON or no authUrl
+    }
+    fetchMcpConnections(); // Refresh list after adding
+  };
+
+  const handleRemoveMcpConnection = async (id: string) => {
+    await agentFetch(
+      {
+        host: agent.host,
+        agent: "chat",
+        name: sessionId!,
+        path: "remove-mcp-connection",
+      },
+      {
+        method: "POST",
+        body: JSON.stringify({ id }),
+      }
+    );
+    fetchMcpConnections(); // Refresh list after removal
+  };
+
   return (
-    <div className="h-[100vh] w-full p-4 flex justify-center items-center bg-fixed overflow-hidden">
+    <div className="h-[100vh] w-full p-4 flex flex-col items-center bg-fixed overflow-hidden">
       <HasOpenAIKey />
+      <AddMcpServerDialog
+        open={showAddMcpDialog}
+        onOpenChange={setShowAddMcpDialog}
+        onSubmit={handleAddMcpServer}
+      />
+      {/* MCP Connections List */}
+      {mcpConnections.length > 0 && (
+        <div className="flex gap-3 mb-4 w-full max-w-lg mx-auto">
+          {mcpConnections.map((conn) => (
+            <Card
+              key={conn.id}
+              className="p-3 flex flex-col items-start min-w-[220px] border-2 border-primary rounded-xl shadow-md relative"
+            >
+              <button
+                type="button"
+                className="absolute top-2 right-2 text-red-500 hover:text-red-700 transition-colors"
+                onClick={() => handleRemoveMcpConnection(conn.id)}
+                aria-label="Remove MCP Server"
+              >
+                <Trash size={18} />
+              </button>
+              <span className="font-semibold text-sm break-all">{conn.url}</span>
+              <span className="text-xs text-muted-foreground mt-1">{conn.connectionState}</span>
+              {/* Show Authorize button if authenticating and has authUrl */}
+              {conn.connectionState === "authenticating" && (
+                <Button
+                  className="mt-2 px-3 py-1 rounded"
+                  onClick={() => conn?.authUrl && openPopup(conn.authUrl)}
+                >
+                  Authorize
+                </Button>
+              )}
+            </Card>
+          ))}
+        </div>
+      )}
       <div className="h-[calc(100vh-2rem)] w-full mx-auto max-w-lg flex flex-col shadow-xl rounded-md overflow-hidden relative border border-neutral-300 dark:border-neutral-800">
         <div className="px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 flex items-center gap-3 sticky top-0 z-10">
           <div className="flex items-center justify-center h-8 w-8">
@@ -157,6 +284,17 @@ export default function Chat() {
           >
             <Trash size={20} />
           </Button>
+
+          <Button
+            variant="primary"
+            size="md"
+            shape="square"
+            className="rounded-full h-9 w-9"
+            onClick={() => setShowAddMcpDialog(true)}
+            aria-label="Add MCP Server"
+          >
+            +
+          </Button>
         </div>
 
         {/* Messages */}
diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
new file mode 100644
index 0000000..5d1003a
--- /dev/null
+++ b/src/components/AddMcpServerDialog.tsx
@@ -0,0 +1,103 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+} from "@/components/dialog/dialog";
+import { Button } from "@/components/button/Button";
+import { Input } from "@/components/input/Input";
+
+interface AddMcpServerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: { name: string; url: string; localUrl: string }) => void;
+}
+
+export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServerDialogProps) {
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const [localUrl, setLocalUrl] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleAccept = async () => {
+    setSubmitting(true);
+    await onSubmit({ name, url, localUrl });
+    setSubmitting(false);
+    onOpenChange(false);
+    setName("");
+    setUrl("");
+    setLocalUrl("");
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+    setName("");
+    setUrl("");
+    setLocalUrl("");
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-neutral-100 dark:bg-neutral-900">
+        <DialogHeader>
+          <DialogTitle>Add MCP Server</DialogTitle>
+          <DialogDescription>
+            Enter the details for the new MCP server connection.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div>
+            <label className="block text-sm font-medium mb-1" htmlFor="mcp-name">Name</label>
+            <Input
+              id="mcp-name"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder="Server Name"
+              required
+              size="base"
+              onValueChange={undefined}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1" htmlFor="mcp-url">URL</label>
+            <Input
+              id="mcp-url"
+              value={url}
+              onChange={e => setUrl(e.target.value)}
+              placeholder="https://example.com"
+              required
+              size="base"
+              onValueChange={undefined}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1" htmlFor="mcp-local-url">Local URL</label>
+            <Input
+              id="mcp-local-url"
+              value={localUrl}
+              onChange={e => setLocalUrl(e.target.value)}
+              placeholder="http://localhost:1234"
+              required
+              size="base"
+              onValueChange={undefined}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" onClick={handleCancel} disabled={submitting}>
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button type="button" variant="primary" onClick={handleAccept} disabled={submitting || !name || !url || !localUrl}>
+            {submitting ? "Adding..." : "Add MCP Server"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
new file mode 100644
index 0000000..cfde7c1
--- /dev/null
+++ b/src/components/dialog/dialog.tsx
@@ -0,0 +1,132 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/src/server.ts b/src/server.ts
index 175a4b7..cde97d9 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -26,18 +26,32 @@ const model = openai("gpt-4o-2024-11-20");
  * Chat Agent implementation that handles real-time AI chat interactions
  */
 export class Chat extends AIChatAgent<Env> {
+  async addMcpServerFromChat(name: string, url: string, localUrl: string) {
+    const mcpConnection = await this.addMcpServer(name, url, localUrl);
+    console.log("mcpConnection", mcpConnection);
+    return mcpConnection;
+  }
+
+  async removeMcpServerFromChat(id: string) {
+    await this.removeMcpServer(id);
+  }
+
+  async getMcpConnections() {
+    return this.mcp.mcpConnections;
+  }
+
+  async closeMcpConnection(id: string) {
+    await this.closeMcpConnection(id);
+  }
+
   /**
    * Handles incoming chat messages and manages the response stream
    * @param onFinish - Callback function executed when streaming completes
    */
-
   async onChatMessage(
     onFinish: StreamTextOnFinishCallback<ToolSet>,
     options?: { abortSignal?: AbortSignal }
   ) {
-    // const mcpConnection = await this.mcp.connect(
-    //   "https://path-to-mcp-server/sse"
-    // );
 
     // Collect all tools, including MCP tools
     const allTools = {
@@ -45,6 +59,8 @@ export class Chat extends AIChatAgent<Env> {
       ...this.mcp.unstable_getAITools(),
     };
 
+    console.log("allTools", allTools);
+
     // Create a streaming response that handles both text and tool outputs
     const dataStreamResponse = createDataStreamResponse({
       execute: async (dataStream) => {
@@ -72,7 +88,6 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
             onFinish(
               args as Parameters<StreamTextOnFinishCallback<ToolSet>>[0]
             );
-            // await this.mcp.closeConnection(mcpConnection.id);
           },
           onError: (error) => {
             console.error("Error while streaming:", error);
@@ -98,6 +113,41 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
       },
     ]);
   }
+
+  async onRequest(request: Request): Promise<Response> {
+    const reqUrl = new URL(request.url);
+    if (reqUrl.pathname.endsWith("add-mcp") && request.method === "POST") {
+      const mcpServer = (await request.json()) as { url: string; name: string; localUrl?: string };
+      const mcpConnection = await this.addMcpServerFromChat(mcpServer.name, mcpServer.url, mcpServer.localUrl || "");
+      return new Response(JSON.stringify(mcpConnection), { status: 200, headers: { "Content-Type": "application/json" } });
+    }
+    if (reqUrl.pathname.endsWith("get-mcp-connections") && request.method === "GET") {
+      const mcpConnections = await this.getMcpConnections();
+      console.log("mcpConnections", mcpConnections);
+      return new Response(JSON.stringify({ mcpConnections }), {
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    if (reqUrl.pathname.endsWith("get-mcp-servers") && request.method === "GET") {
+      const mcpServers = await this.getConnections();
+      console.log("mcpServers", mcpServers);
+      return new Response(JSON.stringify({ mcpServers }), {
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    if (reqUrl.pathname.endsWith("get-messages") && request.method === "GET") {
+      // Return an empty array or your actual chat history
+      return new Response(JSON.stringify(this.messages), {
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    if (reqUrl.pathname.endsWith("remove-mcp-connection") && request.method === "POST") {
+      const { id } = (await request.json()) as { id: string };
+      await this.removeMcpServerFromChat(id);
+      return new Response("Ok", { status: 200 });
+    }
+    return new Response("Not found", { status: 404 });
+  }
 }
 
 /**

From cf79d62fc2c2c22d11f854a6bb833087adb03d29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 11:05:39 +0200
Subject: [PATCH 02/40] chore: update agents package version and add session ID
 to agent configuration

- Updated the agents package from version 0.0.83 to 0.0.88 in package.json and package-lock.json.
- Added session ID retrieval from localStorage to the agent configuration in the Chat component.
---
 package-lock.json | 11 +++++------
 package.json      |  2 +-
 src/app.tsx       |  6 +++---
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 19e4ab0..7cf5fa0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,13 +13,13 @@
         "@ai-sdk/react": "^1.2.12",
         "@ai-sdk/ui-utils": "^1.2.11",
         "@phosphor-icons/react": "^2.1.7",
-        "@radix-ui/react-dialog": "^1.1.13",
         "@radix-ui/react-avatar": "^1.1.9",
+        "@radix-ui/react-dialog": "^1.1.13",
         "@radix-ui/react-dropdown-menu": "^2.1.14",
         "@radix-ui/react-slot": "^1.2.2",
         "@radix-ui/react-switch": "^1.2.4",
         "@types/marked": "^6.0.0",
-        "agents": "^0.0.83",
+        "agents": "^0.0.88",
         "ai": "^4.3.15",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -3635,10 +3635,9 @@
       }
     },
     "node_modules/agents": {
-      "version": "0.0.83",
-      "resolved": "https://registry.npmjs.org/agents/-/agents-0.0.83.tgz",
-      "integrity": "sha512-oG99DihdX3cwEzAh3tvg1s79nGMO7xiXBLcFabrQsuoyody6IJjMZX3SZOXOHpqqxzLXD8UDHv6I+rMsLSJNcw==",
-      "license": "MIT",
+      "version": "0.0.88",
+      "resolved": "https://registry.npmjs.org/agents/-/agents-0.0.88.tgz",
+      "integrity": "sha512-ysQ3LMONALxx1VL0X/Tq49EzfuuLj1SHfztCCIfAX8hVtYw2Jr9rytnM94lZQ29yFFqmcIKWR+D13j/l7Cyf8A==",
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.11.2",
         "ai": "^4.3.15",
diff --git a/package.json b/package.json
index 352f336..9fc72a1 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-switch": "^1.2.4",
     "@types/marked": "^6.0.0",
-    "agents": "^0.0.83",
+    "agents": "^0.0.88",
     "ai": "^4.3.15",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/src/app.tsx b/src/app.tsx
index ef02eb1..5c78027 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -81,6 +81,7 @@ export default function Chat() {
 
   const agent = useAgent({
     agent: "chat",
+    name: localStorage.getItem("sessionId") ?? undefined
   });
 
   const {
@@ -91,11 +92,10 @@ export default function Chat() {
     addToolResult,
     clearHistory,
     isLoading,
-    stop,
-    setInput
+    stop
   } = useAgentChat({
     agent,
-    maxSteps: 5,
+    maxSteps: 5
   });
 
   // Scroll to bottom when messages change

From 1d973013eea079f01f48c2fd455f5837b71ab6ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 11:29:46 +0200
Subject: [PATCH 03/40] feat: integrate DropdownMenu for control panel in Chat
 component

- Added DropdownMenu component to the Chat interface, providing a control panel with placeholder actions.
- Refactored fetchMcpConnections to use useCallback for better performance.
- Adjusted layout and styling for improved UI consistency.
---
 src/app.tsx | 60 +++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 5c78027..856d692 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -15,6 +15,7 @@ import { Textarea } from "@/components/textarea/Textarea";
 import { MemoizedMarkdown } from "@/components/memoized-markdown";
 import { ToolInvocationCard } from "@/components/tool-invocation-card/ToolInvocationCard";
 import { AddMcpServerDialog } from "@/components/AddMcpServerDialog";
+import { DropdownMenu } from "@/components/dropdown/DropdownMenu";
 
 // Icon imports
 import {
@@ -25,6 +26,7 @@ import {
   Trash,
   PaperPlaneTilt,
   Stop,
+  Sliders
 } from "@phosphor-icons/react";
 
 // List of tools that require human confirmation
@@ -118,8 +120,7 @@ export default function Chat() {
     return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   };
 
-  // Fetch MCP connections
-  const fetchMcpConnections = async () => {
+  const fetchMcpConnections = useCallback(async () => {
     const res = await agentFetch(
       {
         host: agent.host,
@@ -137,12 +138,11 @@ export default function Chat() {
       authUrl: conn.authUrl,
     }));
     setMcpConnections(connections);
-  };
+  }, [agent.host]);
 
   useEffect(() => {
     fetchMcpConnections();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [fetchMcpConnections]);
 
   // Helper to open auth popup
   function openPopup(authUrl: string) {
@@ -446,9 +446,10 @@ export default function Chat() {
             });
             setTextareaHeight("auto"); // Reset height after submission
           }}
-          className="p-3 bg-neutral-50 absolute bottom-0 left-0 right-0 z-10 border-t border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900"
+          className="p-3 bg-neutral-50 absolute bottom-0 left-0 right-0 border-t border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900"
         >
           <div className="flex items-center gap-2">
+            {/* Settings Icon Button */}
             <div className="flex-1 relative">
               <Textarea
                 disabled={pendingToolCallConfirmation}
@@ -480,7 +481,7 @@ export default function Chat() {
                 rows={2}
                 style={{ height: textareaHeight }}
               />
-              <div className="absolute bottom-0 right-0 p-2 w-fit flex flex-row justify-end">
+              <div className="absolute bottom-0 left-0 p-2 w-fit flex flex-row justify-between">
                 {isLoading ? (
                   <button
                     type="button"
@@ -491,14 +492,51 @@ export default function Chat() {
                     <Stop size={16} />
                   </button>
                 ) : (
+                  <div className="flex justify-between w-full">
+                    {/* Control Panel DropdownMenu (Sliders icon as trigger) */}
+                    <DropdownMenu
+                      align="start"
+                      side="top"
+                      MenuItems={[
+                        { type: "title", titleContent: "Control Panel" },
+                        { type: "button", label: "Placeholder Action 1", onClick: () => {}, icon: null },
+                        { type: "button", label: "Placeholder Action 2", onClick: () => {}, icon: null },
+                        { type: "divider" },
+                        { type: "button", label: "Another Action", onClick: () => {}, icon: null },
+                      ]}
+                    >
+                      <button
+                        type="button"
+                        className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
+                        aria-label="Control Panel"
+                      >
+                        <Sliders size={16} />
+                      </button>
+                    </DropdownMenu>
+                  </div>
+                )}
+              </div>
+              <div className="absolute bottom-0 right-0 p-2 w-fit flex flex-row justify-between">
+                {isLoading ? (
                   <button
-                    type="submit"
+                    type="button"
+                    onClick={stop}
                     className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
-                    disabled={pendingToolCallConfirmation || !agentInput.trim()}
-                    aria-label="Send message"
+                    aria-label="Stop generation"
                   >
-                    <PaperPlaneTilt size={16} />
+                    <Stop size={16} />
                   </button>
+                ) : (
+                  <div className="flex justify-between w-full">
+                      <button
+                      type="submit"
+                      className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
+                      disabled={pendingToolCallConfirmation || !agentInput.trim()}
+                      aria-label="Send message"
+                    >
+                      <PaperPlaneTilt size={16} />
+                    </button>
+                  </div>
                 )}
               </div>
             </div>

From f7c9b741a600344ec6a27c2501802354ed85c2ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 11:43:01 +0200
Subject: [PATCH 04/40] feat: enhance DropdownMenu in Chat component with
 dynamic MCP connection items

- Replaced static menu items in the DropdownMenu with dynamic items generated from mcpConnections.
- Improved UI to display connection URLs and placeholder tool counts for better user experience.
---
 src/app.tsx | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 856d692..ee122f8 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -497,13 +497,27 @@ export default function Chat() {
                     <DropdownMenu
                       align="start"
                       side="top"
-                      MenuItems={[
-                        { type: "title", titleContent: "Control Panel" },
-                        { type: "button", label: "Placeholder Action 1", onClick: () => {}, icon: null },
-                        { type: "button", label: "Placeholder Action 2", onClick: () => {}, icon: null },
-                        { type: "divider" },
-                        { type: "button", label: "Another Action", onClick: () => {}, icon: null },
-                      ]}
+                      MenuItems={
+                        mcpConnections.map((conn, idx) => ({
+                          type: "button",
+                          label: (
+                            <div className="flex items-center w-full justify-between">
+                              <div className="flex items-center gap-2">
+                                <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
+                                  {conn.url.charAt(0).toUpperCase()}
+                                </span>
+                                <span className="text-base text-neutral-900">{conn.url}</span>
+                              </div>
+                              <span className="ml-2 flex items-center justify-center text-xs font-semibold text-blue-600 bg-blue-50 rounded-full px-2 py-0.5 border border-blue-100">
+                                {/* Placeholder tool count, replace with real value if available */}
+                                {idx === 0 ? 36 : idx === 1 ? 89 : 23}
+                              </span>
+                            </div>
+                          ),
+                          onClick: () => {},
+                          icon: null
+                        }))
+                      }
                     >
                       <button
                         type="button"

From 8ee35925efa05bcc726c013ea8823befa61717ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 11:59:05 +0200
Subject: [PATCH 05/40] feat: extend MCP connection type and update tool count
 display in Chat component

- Enhanced the McpConnection type to include an optional tools property for better data handling.
- Updated the fetching logic to accommodate the new tools property from the API response.
- Modified the DropdownMenu to dynamically display the count of tools associated with each MCP connection.
---
 src/app.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index ee122f8..a576365 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -50,7 +50,7 @@ export default function Chat() {
   const [textareaHeight, setTextareaHeight] = useState("auto");
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const [showAddMcpDialog, setShowAddMcpDialog] = useState(false);
-  type McpConnection = { id: string; url: string; connectionState: string; authUrl?: string };
+  type McpConnection = { id: string; url: string; connectionState: string; authUrl?: string; tools?: unknown[] };
   const [mcpConnections, setMcpConnections] = useState<McpConnection[]>([]);
 
   const scrollToBottom = useCallback(() => {
@@ -130,12 +130,13 @@ export default function Chat() {
       },
       { method: "GET" }
     );
-    const data = (await res.json()) as { mcpConnections: Record<string, { url: string; connectionState: string; authUrl?: string }> };
+    const data = (await res.json()) as { mcpConnections: Record<string, { url: string; connectionState: string; authUrl?: string; tools?: unknown[] }> };
     const connections = Object.entries(data.mcpConnections || {}).map(([id, conn]) => ({
       id,
       url: conn.url,
       connectionState: conn.connectionState,
       authUrl: conn.authUrl,
+      tools: conn.tools,
     }));
     setMcpConnections(connections);
   }, [agent.host]);
@@ -498,7 +499,7 @@ export default function Chat() {
                       align="start"
                       side="top"
                       MenuItems={
-                        mcpConnections.map((conn, idx) => ({
+                        mcpConnections.map((conn) => ({
                           type: "button",
                           label: (
                             <div className="flex items-center w-full justify-between">
@@ -509,8 +510,7 @@ export default function Chat() {
                                 <span className="text-base text-neutral-900">{conn.url}</span>
                               </div>
                               <span className="ml-2 flex items-center justify-center text-xs font-semibold text-blue-600 bg-blue-50 rounded-full px-2 py-0.5 border border-blue-100">
-                                {/* Placeholder tool count, replace with real value if available */}
-                                {idx === 0 ? 36 : idx === 1 ? 89 : 23}
+                                {Array.isArray(conn.tools) ? conn.tools.length : 0}
                               </span>
                             </div>
                           ),

From d238b85868f99dc19cdf9cdd2cd8e24decc58e9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 12:30:35 +0200
Subject: [PATCH 06/40] chore: update Tailwind CSS configuration and
 dependencies

- Changed the CSS file reference from styles.css to index.css in components.json and client.tsx.
- Updated Tailwind CSS and related packages to version 4.1.7 in package.json and package-lock.json.
- Removed the deprecated styles.css file, consolidating styles into index.css for better organization.
- Adjusted README.md to reflect the new CSS file structure.
---
 README.md                        |   4 +-
 components.json                  |   2 +-
 package-lock.json                | 268 +++++++++++++------------------
 package.json                     |   6 +-
 src/app.tsx                      |  81 ++++++----
 src/client.tsx                   |   2 +-
 src/components/dropdown-menu.tsx | 254 +++++++++++++++++++++++++++++
 src/{styles.css => index.css}    |   0
 8 files changed, 427 insertions(+), 190 deletions(-)
 create mode 100644 src/components/dropdown-menu.tsx
 rename src/{styles.css => index.css} (100%)

diff --git a/README.md b/README.md
index f67b3a0..efb4e88 100644
--- a/README.md
+++ b/README.md
@@ -63,7 +63,7 @@ npm run deploy
 │   ├── server.ts      # Chat agent logic
 │   ├── tools.ts       # Tool definitions
 │   ├── utils.ts       # Helper functions
-│   └── styles.css     # UI styling
+│   └── index.css     # UI styling
 ```
 
 ## Customization Guide
@@ -176,7 +176,7 @@ Commit your changes and then run the `agents-starter` as per the rest of this RE
 
 The chat interface is built with React and can be customized in `app.tsx`:
 
-- Modify the theme colors in `styles.css`
+- Modify the theme colors in `index.css`
 - Add new UI components in the chat container
 - Customize message rendering and tool confirmation dialogs
 - Add new controls to the header
diff --git a/components.json b/components.json
index ed8b698..4b1fafb 100644
--- a/components.json
+++ b/components.json
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "src/styles.css",
+    "css": "src/index.css",
     "baseColor": "zinc",
     "cssVariables": true,
     "prefix": ""
diff --git a/package-lock.json b/package-lock.json
index 7cf5fa0..9d13c15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,13 +37,13 @@
         "@cloudflare/vite-plugin": "1.1.1",
         "@cloudflare/vitest-pool-workers": "^0.8.27",
         "@cloudflare/workers-types": "^4.20250510.0",
-        "@tailwindcss/vite": "^4.1.6",
+        "@tailwindcss/vite": "^4.1.7",
         "@types/node": "^22.15.17",
         "@types/react": "^19.1.3",
         "@types/react-dom": "^19.1.4",
         "@vitejs/plugin-react": "^4.4.1",
         "prettier": "^3.5.3",
-        "tailwindcss": "^4.1.6",
+        "tailwindcss": "^4.1.7",
         "typescript": "^5.8.3",
         "vite": "^6.3.5",
         "vitest": "3.1.3",
@@ -1786,7 +1786,6 @@
       "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
       "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "minipass": "^7.0.4"
       },
@@ -2202,7 +2201,6 @@
       "version": "2.1.14",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.14.tgz",
       "integrity": "sha512-lzuyNjoWOoaMFE/VC5FnAAYM16JmQA8ZmucOXtlhm2kKR5TSU95YLAueQ4JYuRmUJmBvSqXaVFGIfuukybwZJQ==",
-      "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
@@ -2999,28 +2997,26 @@
       ]
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.6.tgz",
-      "integrity": "sha512-ed6zQbgmKsjsVvodAS1q1Ld2BolEuxJOSyyNc+vhkjdmfNUDCmQnlXBfQkHrlzNmslxHsQU/bFmzcEbv4xXsLg==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.7.tgz",
+      "integrity": "sha512-9rsOpdY9idRI2NH6CL4wORFY0+Q6fnx9XP9Ju+iq/0wJwGD5IByIgFmwVbyy4ymuyprj8Qh4ErxMKTUL4uNh3g==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
         "enhanced-resolve": "^5.18.1",
         "jiti": "^2.4.2",
-        "lightningcss": "1.29.2",
+        "lightningcss": "1.30.1",
         "magic-string": "^0.30.17",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.6"
+        "tailwindcss": "4.1.7"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.6.tgz",
-      "integrity": "sha512-0bpEBQiGx+227fW4G0fLQ8vuvyy5rsB1YIYNapTq3aRsJ9taF3f5cCaovDjN5pUGKKzcpMrZst/mhNaKAPOHOA==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.7.tgz",
+      "integrity": "sha512-5SF95Ctm9DFiUyjUPnDGkoKItPX/k+xifcQhcqX5RA85m50jw1pT/KzjdvlqxRja45Y52nR4MR9fD1JYd7f8NQ==",
       "dev": true,
       "hasInstallScript": true,
-      "license": "MIT",
       "dependencies": {
         "detect-libc": "^2.0.4",
         "tar": "^7.4.3"
@@ -3029,29 +3025,28 @@
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.6",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.6",
-        "@tailwindcss/oxide-darwin-x64": "4.1.6",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.6",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.6",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.6",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.6",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.6",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.6",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.6",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.6",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.6"
+        "@tailwindcss/oxide-android-arm64": "4.1.7",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.7",
+        "@tailwindcss/oxide-darwin-x64": "4.1.7",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.7",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.7",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.7",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.7",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.7",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.7",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.7",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.7",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.7"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.6.tgz",
-      "integrity": "sha512-VHwwPiwXtdIvOvqT/0/FLH/pizTVu78FOnI9jQo64kSAikFSZT7K4pjyzoDpSMaveJTGyAKvDjuhxJxKfmvjiQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.7.tgz",
+      "integrity": "sha512-IWA410JZ8fF7kACus6BrUwY2Z1t1hm0+ZWNEzykKmMNM09wQooOcN/VXr0p/WJdtHZ90PvJf2AIBS/Ceqx1emg==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -3061,14 +3056,13 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.6.tgz",
-      "integrity": "sha512-weINOCcqv1HVBIGptNrk7c6lWgSFFiQMcCpKM4tnVi5x8OY2v1FrV76jwLukfT6pL1hyajc06tyVmZFYXoxvhQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.7.tgz",
+      "integrity": "sha512-81jUw9To7fimGGkuJ2W5h3/oGonTOZKZ8C2ghm/TTxbwvfSiFSDPd6/A/KE2N7Jp4mv3Ps9OFqg2fEKgZFfsvg==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -3078,14 +3072,13 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.6.tgz",
-      "integrity": "sha512-3FzekhHG0ww1zQjQ1lPoq0wPrAIVXAbUkWdWM8u5BnYFZgb9ja5ejBqyTgjpo5mfy0hFOoMnMuVDI+7CXhXZaQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.7.tgz",
+      "integrity": "sha512-q77rWjEyGHV4PdDBtrzO0tgBBPlQWKY7wZK0cUok/HaGgbNKecegNxCGikuPJn5wFAlIywC3v+WMBt0PEBtwGw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -3095,14 +3088,13 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.6.tgz",
-      "integrity": "sha512-4m5F5lpkBZhVQJq53oe5XgJ+aFYWdrgkMwViHjRsES3KEu2m1udR21B1I77RUqie0ZYNscFzY1v9aDssMBZ/1w==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.7.tgz",
+      "integrity": "sha512-RfmdbbK6G6ptgF4qqbzoxmH+PKfP4KSVs7SRlTwcbRgBwezJkAO3Qta/7gDy10Q2DcUVkKxFLXUQO6J3CRvBGw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
@@ -3112,14 +3104,13 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.6.tgz",
-      "integrity": "sha512-qU0rHnA9P/ZoaDKouU1oGPxPWzDKtIfX7eOGi5jOWJKdxieUJdVV+CxWZOpDWlYTd4N3sFQvcnVLJWJ1cLP5TA==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.7.tgz",
+      "integrity": "sha512-OZqsGvpwOa13lVd1z6JVwQXadEobmesxQ4AxhrwRiPuE04quvZHWn/LnihMg7/XkN+dTioXp/VMu/p6A5eZP3g==",
       "cpu": [
         "arm"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -3129,14 +3120,13 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.6.tgz",
-      "integrity": "sha512-jXy3TSTrbfgyd3UxPQeXC3wm8DAgmigzar99Km9Sf6L2OFfn/k+u3VqmpgHQw5QNfCpPe43em6Q7V76Wx7ogIQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.7.tgz",
+      "integrity": "sha512-voMvBTnJSfKecJxGkoeAyW/2XRToLZ227LxswLAwKY7YslG/Xkw9/tJNH+3IVh5bdYzYE7DfiaPbRkSHFxY1xA==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -3146,14 +3136,13 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.6.tgz",
-      "integrity": "sha512-8kjivE5xW0qAQ9HX9reVFmZj3t+VmljDLVRJpVBEoTR+3bKMnvC7iLcoSGNIUJGOZy1mLVq7x/gerVg0T+IsYw==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.7.tgz",
+      "integrity": "sha512-PjGuNNmJeKHnP58M7XyjJyla8LPo+RmwHQpBI+W/OxqrwojyuCQ+GUtygu7jUqTEexejZHr/z3nBc/gTiXBj4A==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -3163,14 +3152,13 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.6.tgz",
-      "integrity": "sha512-A4spQhwnWVpjWDLXnOW9PSinO2PTKJQNRmL/aIl2U/O+RARls8doDfs6R41+DAXK0ccacvRyDpR46aVQJJCoCg==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.7.tgz",
+      "integrity": "sha512-HMs+Va+ZR3gC3mLZE00gXxtBo3JoSQxtu9lobbZd+DmfkIxR54NO7Z+UQNPsa0P/ITn1TevtFxXTpsRU7qEvWg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -3180,14 +3168,13 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.6.tgz",
-      "integrity": "sha512-YRee+6ZqdzgiQAHVSLfl3RYmqeeaWVCk796MhXhLQu2kJu2COHBkqlqsqKYx3p8Hmk5pGCQd2jTAoMWWFeyG2A==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.7.tgz",
+      "integrity": "sha512-MHZ6jyNlutdHH8rd+YTdr3QbXrHXqwIhHw9e7yXEBcQdluGwhpQY2Eku8UZK6ReLaWtQ4gijIv5QoM5eE+qlsA==",
       "cpu": [
         "x64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -3197,9 +3184,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.6.tgz",
-      "integrity": "sha512-qAp4ooTYrBQ5pk5jgg54/U1rCJ/9FLYOkkQ/nTE+bVMseMfB6O7J8zb19YTpWuu4UdfRf5zzOrNKfl6T64MNrQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.7.tgz",
+      "integrity": "sha512-ANaSKt74ZRzE2TvJmUcbFQ8zS201cIPxUDm5qez5rLEwWkie2SkGtA4P+GPTj+u8N6JbPrC8MtY8RmJA35Oo+A==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -3212,7 +3199,6 @@
         "wasm32"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "dependencies": {
         "@emnapi/core": "^1.4.3",
@@ -3227,14 +3213,13 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.6.tgz",
-      "integrity": "sha512-nqpDWk0Xr8ELO/nfRUDjk1pc9wDJ3ObeDdNMHLaymc4PJBWj11gdPCWZFKSK2AVKjJQC7J2EfmSmf47GN7OuLg==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.7.tgz",
+      "integrity": "sha512-HUiSiXQ9gLJBAPCMVRk2RT1ZrBjto7WvqsPBwUrNK2BcdSxMnk19h4pjZjI7zgPhDxlAbJSumTC4ljeA9y0tEw==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -3244,14 +3229,13 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.6.tgz",
-      "integrity": "sha512-5k9xF33xkfKpo9wCvYcegQ21VwIBU1/qEbYlVukfEIyQbEA47uK8AAwS7NVjNE3vHzcmxMYwd0l6L4pPjjm1rQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.7.tgz",
+      "integrity": "sha512-rYHGmvoHiLJ8hWucSfSOEmdCBIGZIq7SpkPRSqLsH2Ab2YUNgKeAPT1Fi2cx3+hnYOrAb0jp9cRyode3bBW4mQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -3261,15 +3245,14 @@
       }
     },
     "node_modules/@tailwindcss/vite": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.6.tgz",
-      "integrity": "sha512-zjtqjDeY1w3g2beYQtrMAf51n5G7o+UwmyOjtsDMP7t6XyoRMOidcoKP32ps7AkNOHIXEOK0bhIC05dj8oJp4w==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.7.tgz",
+      "integrity": "sha512-tYa2fO3zDe41I7WqijyVbRd8oWT0aEID1Eokz5hMT6wShLIHj3yvwj9XbfuloHP9glZ6H+aG2AN/+ZrxJ1Y5RQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@tailwindcss/node": "4.1.6",
-        "@tailwindcss/oxide": "4.1.6",
-        "tailwindcss": "4.1.6"
+        "@tailwindcss/node": "4.1.7",
+        "@tailwindcss/oxide": "4.1.7",
+        "tailwindcss": "4.1.7"
       },
       "peerDependencies": {
         "vite": "^5.2.0 || ^6"
@@ -3988,7 +3971,6 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
       "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
       "engines": {
         "node": ">=18"
       }
@@ -4311,7 +4293,6 @@
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
       "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -4780,8 +4761,7 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "license": "ISC"
+      "dev": true
     },
     "node_modules/has-symbols": {
       "version": "1.1.0",
@@ -5032,11 +5012,10 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
-      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
       "dev": true,
-      "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
       },
@@ -5048,27 +5027,26 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.29.2",
-        "lightningcss-darwin-x64": "1.29.2",
-        "lightningcss-freebsd-x64": "1.29.2",
-        "lightningcss-linux-arm-gnueabihf": "1.29.2",
-        "lightningcss-linux-arm64-gnu": "1.29.2",
-        "lightningcss-linux-arm64-musl": "1.29.2",
-        "lightningcss-linux-x64-gnu": "1.29.2",
-        "lightningcss-linux-x64-musl": "1.29.2",
-        "lightningcss-win32-arm64-msvc": "1.29.2",
-        "lightningcss-win32-x64-msvc": "1.29.2"
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
-      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "darwin"
@@ -5082,14 +5060,13 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
-      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
       "cpu": [
         "x64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "darwin"
@@ -5103,14 +5080,13 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
-      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
       "cpu": [
         "x64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "freebsd"
@@ -5124,14 +5100,13 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
-      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
       "cpu": [
         "arm"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -5145,14 +5120,13 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
-      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -5166,14 +5140,13 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
-      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -5187,14 +5160,13 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
-      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -5208,14 +5180,13 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
-      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -5229,14 +5200,13 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
-      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "win32"
@@ -5250,14 +5220,13 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
-      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "win32"
@@ -6229,7 +6198,6 @@
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
       "dev": true,
-      "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -6239,7 +6207,6 @@
       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
       "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "minipass": "^7.1.2"
       },
@@ -6252,7 +6219,6 @@
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
       "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
       "dev": true,
-      "license": "MIT",
       "bin": {
         "mkdirp": "dist/cjs/src/bin.js"
       },
@@ -7247,18 +7213,16 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.6.tgz",
-      "integrity": "sha512-j0cGLTreM6u4OWzBeLBpycK0WIh8w7kSwcUsQZoGLHZ7xDTdM69lN64AgoIEEwFi0tnhs4wSykUa5YWxAzgFYg==",
-      "dev": true,
-      "license": "MIT"
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.7.tgz",
+      "integrity": "sha512-kr1o/ErIdNhTz8uzAYL7TpaUuzKIE6QPQ4qmSdxnoX/lo+5wmUHQA6h3L5yIqEImSRnAAURDirLu/BgiXGPAhg==",
+      "dev": true
     },
     "node_modules/tapable": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
+      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -7268,7 +7232,6 @@
       "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
       "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
         "chownr": "^3.0.0",
@@ -7286,7 +7249,6 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
       "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
       "dev": true,
-      "license": "BlueOak-1.0.0",
       "engines": {
         "node": ">=18"
       }
diff --git a/package.json b/package.json
index 9fc72a1..241e591 100644
--- a/package.json
+++ b/package.json
@@ -24,13 +24,13 @@
     "@cloudflare/vite-plugin": "1.1.1",
     "@cloudflare/vitest-pool-workers": "^0.8.27",
     "@cloudflare/workers-types": "^4.20250510.0",
-    "@tailwindcss/vite": "^4.1.6",
+    "@tailwindcss/vite": "^4.1.7",
     "@types/node": "^22.15.17",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.4",
     "@vitejs/plugin-react": "^4.4.1",
     "prettier": "^3.5.3",
-    "tailwindcss": "^4.1.6",
+    "tailwindcss": "^4.1.7",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vitest": "3.1.3",
@@ -41,8 +41,8 @@
     "@ai-sdk/react": "^1.2.12",
     "@ai-sdk/ui-utils": "^1.2.11",
     "@phosphor-icons/react": "^2.1.7",
-    "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-avatar": "^1.1.9",
+    "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-dropdown-menu": "^2.1.14",
     "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-switch": "^1.2.4",
diff --git a/src/app.tsx b/src/app.tsx
index a576365..b1b9d0b 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -15,7 +15,17 @@ import { Textarea } from "@/components/textarea/Textarea";
 import { MemoizedMarkdown } from "@/components/memoized-markdown";
 import { ToolInvocationCard } from "@/components/tool-invocation-card/ToolInvocationCard";
 import { AddMcpServerDialog } from "@/components/AddMcpServerDialog";
-import { DropdownMenu } from "@/components/dropdown/DropdownMenu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/dropdown-menu";
 
 // Icon imports
 import {
@@ -495,37 +505,48 @@ export default function Chat() {
                 ) : (
                   <div className="flex justify-between w-full">
                     {/* Control Panel DropdownMenu (Sliders icon as trigger) */}
-                    <DropdownMenu
-                      align="start"
-                      side="top"
-                      MenuItems={
-                        mcpConnections.map((conn) => ({
-                          type: "button",
-                          label: (
-                            <div className="flex items-center w-full justify-between">
-                              <div className="flex items-center gap-2">
-                                <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
-                                  {conn.url.charAt(0).toUpperCase()}
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <button
+                          type="button"
+                          className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
+                          aria-label="Control Panel"
+                        >
+                          <Sliders size={16} />
+                        </button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" side="top">
+                        <DropdownMenuLabel>MCP Connections</DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        {mcpConnections.map((conn) => (
+                          <DropdownMenuSub key={conn.id}>
+                            <DropdownMenuSubTrigger>
+                              <div className="flex items-center w-full justify-between">
+                                <div className="flex items-center gap-2">
+                                  <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
+                                    {conn.url.charAt(0).toUpperCase()}
+                                  </span>
+                                  <span className="text-base text-neutral-900">{conn.url}</span>
+                                </div>
+                                <span className="ml-2 flex items-center justify-center text-xs font-semibold text-blue-600 bg-blue-50 rounded-full px-2 py-0.5 border border-blue-100">
+                                  {Array.isArray(conn.tools) ? conn.tools.length : 0}
                                 </span>
-                                <span className="text-base text-neutral-900">{conn.url}</span>
                               </div>
-                              <span className="ml-2 flex items-center justify-center text-xs font-semibold text-blue-600 bg-blue-50 rounded-full px-2 py-0.5 border border-blue-100">
-                                {Array.isArray(conn.tools) ? conn.tools.length : 0}
-                              </span>
-                            </div>
-                          ),
-                          onClick: () => {},
-                          icon: null
-                        }))
-                      }
-                    >
-                      <button
-                        type="button"
-                        className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
-                        aria-label="Control Panel"
-                      >
-                        <Sliders size={16} />
-                      </button>
+                            </DropdownMenuSubTrigger>
+                            <DropdownMenuSubContent>
+                              {Array.isArray(conn.tools) && conn.tools.length > 0 ? (
+                                (conn.tools as { name?: string }[]).map((tool, idx) => (
+                                  <DropdownMenuItem key={`${conn.id}-${tool.name || idx}`}>
+                                    {tool.name || "Unnamed Tool"}
+                                  </DropdownMenuItem>
+                                ))
+                              ) : (
+                                <DropdownMenuItem disabled>No tools</DropdownMenuItem>
+                              )}
+                            </DropdownMenuSubContent>
+                          </DropdownMenuSub>
+                        ))}
+                      </DropdownMenuContent>
                     </DropdownMenu>
                   </div>
                 )}
diff --git a/src/client.tsx b/src/client.tsx
index 9dda348..1655fbe 100644
--- a/src/client.tsx
+++ b/src/client.tsx
@@ -1,4 +1,4 @@
-import "./styles.css";
+import "./index.css";
 import { createRoot } from "react-dom/client";
 import App from "./app";
 import { Providers } from "@/providers";
diff --git a/src/components/dropdown-menu.tsx b/src/components/dropdown-menu.tsx
new file mode 100644
index 0000000..af8c77a
--- /dev/null
+++ b/src/components/dropdown-menu.tsx
@@ -0,0 +1,254 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/src/styles.css b/src/index.css
similarity index 100%
rename from src/styles.css
rename to src/index.css

From 0395159ec9926c61e03e5004bf1cb4f959ecd978 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 14:35:14 +0200
Subject: [PATCH 07/40] feat: enhance DropdownMenu styling in Chat component

- Updated DropdownMenuContent and DropdownMenuSubTrigger with new Tailwind CSS classes for improved styling and responsiveness.
- Added hover effects to DropdownMenuSubTrigger and DropdownMenuItem for better user interaction.
- Enhanced DropdownMenuSubContent with border styling for a more polished appearance.
---
 src/app.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index b1b9d0b..6f52413 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -515,12 +515,18 @@ export default function Chat() {
                           <Sliders size={16} />
                         </button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start" side="top">
+                      <DropdownMenuContent
+                        align="start"
+                        side="top"
+                        className="bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 shadow-xl rounded-xl p-1 text-base font-medium text-neutral-900 dark:text-white"
+                      >
                         <DropdownMenuLabel>MCP Connections</DropdownMenuLabel>
                         <DropdownMenuSeparator />
                         {mcpConnections.map((conn) => (
                           <DropdownMenuSub key={conn.id}>
-                            <DropdownMenuSubTrigger>
+                            <DropdownMenuSubTrigger
+                              className="hover:bg-neutral-100 dark:hover:bg-neutral-800"
+                            >
                               <div className="flex items-center w-full justify-between">
                                 <div className="flex items-center gap-2">
                                   <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
@@ -533,10 +539,15 @@ export default function Chat() {
                                 </span>
                               </div>
                             </DropdownMenuSubTrigger>
-                            <DropdownMenuSubContent>
+                            <DropdownMenuSubContent
+                              className="border border-neutral-100 dark:border-neutral-800"
+                            >
                               {Array.isArray(conn.tools) && conn.tools.length > 0 ? (
                                 (conn.tools as { name?: string }[]).map((tool, idx) => (
-                                  <DropdownMenuItem key={`${conn.id}-${tool.name || idx}`}>
+                                  <DropdownMenuItem
+                                    key={`${conn.id}-${tool.name || idx}`}
+                                    className="hover:bg-neutral-100 dark:hover:bg-neutral-800"
+                                  >
                                     {tool.name || "Unnamed Tool"}
                                   </DropdownMenuItem>
                                 ))

From 6f2ce6a71eea630495f92874e0335ccc43c1e166 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 14:44:41 +0200
Subject: [PATCH 08/40] feat: add "Add MCP Server" option to DropdownMenu in
 Chat component

- Introduced a new DropdownMenuItem for adding MCP servers, enhancing user interaction.
- Updated styling for the new menu item to maintain consistency with existing UI elements.
---
 src/app.tsx   | 7 +++++++
 src/server.ts | 5 -----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 6f52413..3255042 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -557,6 +557,13 @@ export default function Chat() {
                             </DropdownMenuSubContent>
                           </DropdownMenuSub>
                         ))}
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          onClick={() => setTimeout(() => setShowAddMcpDialog(true), 0)}
+                          className="bg-primary/5 text-primary rounded-lg font-semibold px-3 py-2 hover:bg-primary/10 transition-colors cursor-pointer"
+                        >
+                          + Add MCP Server
+                        </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </div>
diff --git a/src/server.ts b/src/server.ts
index cde97d9..3ef69c6 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -28,7 +28,6 @@ const model = openai("gpt-4o-2024-11-20");
 export class Chat extends AIChatAgent<Env> {
   async addMcpServerFromChat(name: string, url: string, localUrl: string) {
     const mcpConnection = await this.addMcpServer(name, url, localUrl);
-    console.log("mcpConnection", mcpConnection);
     return mcpConnection;
   }
 
@@ -59,8 +58,6 @@ export class Chat extends AIChatAgent<Env> {
       ...this.mcp.unstable_getAITools(),
     };
 
-    console.log("allTools", allTools);
-
     // Create a streaming response that handles both text and tool outputs
     const dataStreamResponse = createDataStreamResponse({
       execute: async (dataStream) => {
@@ -123,14 +120,12 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
     }
     if (reqUrl.pathname.endsWith("get-mcp-connections") && request.method === "GET") {
       const mcpConnections = await this.getMcpConnections();
-      console.log("mcpConnections", mcpConnections);
       return new Response(JSON.stringify({ mcpConnections }), {
         headers: { "Content-Type": "application/json" },
       });
     }
     if (reqUrl.pathname.endsWith("get-mcp-servers") && request.method === "GET") {
       const mcpServers = await this.getConnections();
-      console.log("mcpServers", mcpServers);
       return new Response(JSON.stringify({ mcpServers }), {
         headers: { "Content-Type": "application/json" },
       });

From ecf4b5f9cb496bf039e603f7c91914b3d135001b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 16:12:53 +0200
Subject: [PATCH 09/40] refactor: streamline MCP connections display and
 interaction in Chat component

- Removed the static MCP connections list and integrated a dynamic display within the DropdownMenu.
- Added a message for when no MCP servers are available, enhancing user feedback.
- Improved the layout and styling of MCP connection items for better usability and visual consistency.
- Updated the remove MCP connection functionality to prevent event propagation issues.
---
 src/app.tsx | 87 +++++++++++++++++++++++------------------------------
 1 file changed, 37 insertions(+), 50 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 3255042..72cffa8 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -213,37 +213,6 @@ export default function Chat() {
         onOpenChange={setShowAddMcpDialog}
         onSubmit={handleAddMcpServer}
       />
-      {/* MCP Connections List */}
-      {mcpConnections.length > 0 && (
-        <div className="flex gap-3 mb-4 w-full max-w-lg mx-auto">
-          {mcpConnections.map((conn) => (
-            <Card
-              key={conn.id}
-              className="p-3 flex flex-col items-start min-w-[220px] border-2 border-primary rounded-xl shadow-md relative"
-            >
-              <button
-                type="button"
-                className="absolute top-2 right-2 text-red-500 hover:text-red-700 transition-colors"
-                onClick={() => handleRemoveMcpConnection(conn.id)}
-                aria-label="Remove MCP Server"
-              >
-                <Trash size={18} />
-              </button>
-              <span className="font-semibold text-sm break-all">{conn.url}</span>
-              <span className="text-xs text-muted-foreground mt-1">{conn.connectionState}</span>
-              {/* Show Authorize button if authenticating and has authUrl */}
-              {conn.connectionState === "authenticating" && (
-                <Button
-                  className="mt-2 px-3 py-1 rounded"
-                  onClick={() => conn?.authUrl && openPopup(conn.authUrl)}
-                >
-                  Authorize
-                </Button>
-              )}
-            </Card>
-          ))}
-        </div>
-      )}
       <div className="h-[calc(100vh-2rem)] w-full mx-auto max-w-lg flex flex-col shadow-xl rounded-md overflow-hidden relative border border-neutral-300 dark:border-neutral-800">
         <div className="px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 flex items-center gap-3 sticky top-0 z-10">
           <div className="flex items-center justify-center h-8 w-8">
@@ -291,22 +260,11 @@ export default function Chat() {
             variant="ghost"
             size="md"
             shape="square"
-            className="rounded-full h-9 w-9"
+            className="rounded-full h-9 w-9 cursor-pointer"
             onClick={clearHistory}
           >
             <Trash size={20} />
           </Button>
-
-          <Button
-            variant="primary"
-            size="md"
-            shape="square"
-            className="rounded-full h-9 w-9"
-            onClick={() => setShowAddMcpDialog(true)}
-            aria-label="Add MCP Server"
-          >
-            +
-          </Button>
         </div>
 
         {/* Messages */}
@@ -522,18 +480,47 @@ export default function Chat() {
                       >
                         <DropdownMenuLabel>MCP Connections</DropdownMenuLabel>
                         <DropdownMenuSeparator />
+                        {mcpConnections.length === 0 && (
+                            <span className="p-3 text-neutral-500 dark:text-neutral-400 text-sm select-none text-center w-full">No MCP servers available.</span>
+                        )}
                         {mcpConnections.map((conn) => (
                           <DropdownMenuSub key={conn.id}>
-                            <DropdownMenuSubTrigger
-                              className="hover:bg-neutral-100 dark:hover:bg-neutral-800"
-                            >
+                            <DropdownMenuSubTrigger className="hover:bg-neutral-100 dark:hover:bg-neutral-800">
                               <div className="flex items-center w-full justify-between">
-                                <div className="flex items-center gap-2">
-                                  <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
-                                    {conn.url.charAt(0).toUpperCase()}
+                                <div className="flex flex-col gap-0.5">
+                                  <div className="flex items-center">
+                                    <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
+                                      {conn.url.charAt(0).toUpperCase()}
+                                    </span>
+                                    <span className="text-base text-neutral-900">{conn.url}</span>
+                                    <button
+                                      type="button"
+                                      className="ml-2 text-red-500 hover:text-red-700 transition-colors cursor-pointer"
+                                      onClick={e => {
+                                        e.stopPropagation();
+                                        e.preventDefault();
+                                        handleRemoveMcpConnection(conn.id);
+                                      }}
+                                      aria-label="Remove MCP Server"
+                                    >
+                                      <Trash size={16} />
+                                    </button>
+                                  </div>
+                                  <span
+                                    className={`ml-8 text-xs font-medium lowercase tracking-wide align-middle
+                                      ${conn.connectionState === "connected"
+                                        ? "text-green-600"
+                                        : conn.connectionState === "authenticating"
+                                        ? "text-yellow-700"
+                                        : "text-red-600"}
+                                    `}
+                                  >
+                                    {conn.connectionState === "connected"
+                                      ? <span className="text-green-600">ready</span>
+                                      : conn.connectionState}
                                   </span>
-                                  <span className="text-base text-neutral-900">{conn.url}</span>
                                 </div>
+                                {/* Tool count badge */}
                                 <span className="ml-2 flex items-center justify-center text-xs font-semibold text-blue-600 bg-blue-50 rounded-full px-2 py-0.5 border border-blue-100">
                                   {Array.isArray(conn.tools) ? conn.tools.length : 0}
                                 </span>

From a0c5317a862e9f76fee6bbfcecfca631c4cade08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 18:00:07 +0200
Subject: [PATCH 10/40] feat: implement real-time MCP connection updates in
 Chat component

- Added onMcpUpdate handler to dynamically update MCP connections based on server state changes.
- Removed the fetchMcpConnections function and its associated calls, as real-time updates now handle connection management.
- Enhanced tools extraction logic from MCP server data for improved connection details.
- Updated connection state display to reflect real-time statuses.
---
 src/app.tsx | 76 +++++++++++++++++++++++------------------------------
 1 file changed, 33 insertions(+), 43 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 72cffa8..e0372a0 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -93,7 +93,34 @@ export default function Chat() {
 
   const agent = useAgent({
     agent: "chat",
-    name: localStorage.getItem("sessionId") ?? undefined
+    name: localStorage.getItem("sessionId") ?? undefined,
+    onMcpUpdate: (mcpServersState) => {
+      // Use the same mapping logic as fetchMcpConnections
+      const connections = Object.entries(mcpServersState.servers || {}).map(([id, conn]) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const c = conn ;
+        let tools: { name?: string }[] = [];
+        if (Array.isArray(c.tools)) {
+          tools = c.tools as { name?: string }[];
+        } else if (c.tools && typeof c.tools === 'object') {
+          tools = Object.values(c.tools) as { name?: string }[];
+        } else if (c.capabilities) {
+          if (Array.isArray(c.capabilities.tools)) {
+            tools = c.capabilities.tools as { name?: string }[];
+          } else if (c.capabilities.tools && typeof c.capabilities.tools === 'object') {
+            tools = Object.values(c.capabilities.tools) as { name?: string }[];
+          }
+        }
+        return {
+          id,
+          url: c.server_url,
+          connectionState: c.state,
+          authUrl: c.auth_url ?? undefined,
+          tools,
+        };
+      });
+      setMcpConnections(connections);
+    },
   });
 
   const {
@@ -130,31 +157,6 @@ export default function Chat() {
     return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   };
 
-  const fetchMcpConnections = useCallback(async () => {
-    const res = await agentFetch(
-      {
-        host: agent.host,
-        agent: "chat",
-        name: sessionId!,
-        path: "get-mcp-connections",
-      },
-      { method: "GET" }
-    );
-    const data = (await res.json()) as { mcpConnections: Record<string, { url: string; connectionState: string; authUrl?: string; tools?: unknown[] }> };
-    const connections = Object.entries(data.mcpConnections || {}).map(([id, conn]) => ({
-      id,
-      url: conn.url,
-      connectionState: conn.connectionState,
-      authUrl: conn.authUrl,
-      tools: conn.tools,
-    }));
-    setMcpConnections(connections);
-  }, [agent.host]);
-
-  useEffect(() => {
-    fetchMcpConnections();
-  }, [fetchMcpConnections]);
-
   // Helper to open auth popup
   function openPopup(authUrl: string) {
     window.open(
@@ -186,7 +188,7 @@ export default function Chat() {
     } catch (e) {
       // ignore if not JSON or no authUrl
     }
-    fetchMcpConnections(); // Refresh list after adding
+    // No need to fetch, real-time updates will handle it
   };
 
   const handleRemoveMcpConnection = async (id: string) => {
@@ -202,7 +204,7 @@ export default function Chat() {
         body: JSON.stringify({ id }),
       }
     );
-    fetchMcpConnections(); // Refresh list after removal
+    // No need to fetch, real-time updates will handle it
   };
 
   return (
@@ -451,16 +453,7 @@ export default function Chat() {
                 style={{ height: textareaHeight }}
               />
               <div className="absolute bottom-0 left-0 p-2 w-fit flex flex-row justify-between">
-                {isLoading ? (
-                  <button
-                    type="button"
-                    onClick={stop}
-                    className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
-                    aria-label="Stop generation"
-                  >
-                    <Stop size={16} />
-                  </button>
-                ) : (
+              
                   <div className="flex justify-between w-full">
                     {/* Control Panel DropdownMenu (Sliders icon as trigger) */}
                     <DropdownMenu>
@@ -508,16 +501,14 @@ export default function Chat() {
                                   </div>
                                   <span
                                     className={`ml-8 text-xs font-medium lowercase tracking-wide align-middle
-                                      ${conn.connectionState === "connected"
+                                      ${conn.connectionState === "ready"
                                         ? "text-green-600"
                                         : conn.connectionState === "authenticating"
                                         ? "text-yellow-700"
                                         : "text-red-600"}
                                     `}
                                   >
-                                    {conn.connectionState === "connected"
-                                      ? <span className="text-green-600">ready</span>
-                                      : conn.connectionState}
+                                    {conn.connectionState}
                                   </span>
                                 </div>
                                 {/* Tool count badge */}
@@ -554,7 +545,6 @@ export default function Chat() {
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </div>
-                )}
               </div>
               <div className="absolute bottom-0 right-0 p-2 w-fit flex flex-row justify-between">
                 {isLoading ? (

From 96f95e377d8abddae0c99ceec99d3bbc412b5141 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 18:14:28 +0200
Subject: [PATCH 11/40] refactor: simplify AddMcpServerDialog component by
 removing localUrl field

- Removed the localUrl state and its associated input field from the AddMcpServerDialog component.
- Updated the onSubmit function to only require name and url parameters.
- Cleaned up the component's state management and UI for a more streamlined user experience.
---
 src/components/AddMcpServerDialog.tsx | 19 ++--------
 worker-configuration.d.ts             | 51 +++++++++++++++++----------
 2 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index 5d1003a..28e052c 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -14,30 +14,27 @@ import { Input } from "@/components/input/Input";
 interface AddMcpServerDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onSubmit: (data: { name: string; url: string; localUrl: string }) => void;
+  onSubmit: (data: { name: string; url: string; }) => void;
 }
 
 export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServerDialogProps) {
   const [name, setName] = useState("");
   const [url, setUrl] = useState("");
-  const [localUrl, setLocalUrl] = useState("");
   const [submitting, setSubmitting] = useState(false);
 
   const handleAccept = async () => {
     setSubmitting(true);
-    await onSubmit({ name, url, localUrl });
+    await onSubmit({ name, url });
     setSubmitting(false);
     onOpenChange(false);
     setName("");
     setUrl("");
-    setLocalUrl("");
   };
 
   const handleCancel = () => {
     onOpenChange(false);
     setName("");
     setUrl("");
-    setLocalUrl("");
   };
 
   return (
@@ -74,18 +71,6 @@ export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServe
               onValueChange={undefined}
             />
           </div>
-          <div>
-            <label className="block text-sm font-medium mb-1" htmlFor="mcp-local-url">Local URL</label>
-            <Input
-              id="mcp-local-url"
-              value={localUrl}
-              onChange={e => setLocalUrl(e.target.value)}
-              placeholder="http://localhost:1234"
-              required
-              size="base"
-              onValueChange={undefined}
-            />
-          </div>
         </div>
         <DialogFooter>
           <DialogClose asChild>
diff --git a/worker-configuration.d.ts b/worker-configuration.d.ts
index 5e86705..d6515c4 100644
--- a/worker-configuration.d.ts
+++ b/worker-configuration.d.ts
@@ -1,9 +1,11 @@
 /* eslint-disable */
-// Generated by Wrangler by running `wrangler types` (hash: 3ccdf084f5f0ee5a0721055a8d3236be)
-// Runtime types generated with workerd@1.20250428.0 2025-02-04 nodejs_compat,nodejs_compat_populate_process_env
+// Generated by Wrangler by running `wrangler types` (hash: 31678af497821f4050f2e6623ab11226)
+// Runtime types generated with workerd@1.20250507.0 2025-02-04 nodejs_compat,nodejs_compat_populate_process_env
 declare namespace Cloudflare {
 	interface Env {
+		APP_URL: string;
 		OPENAI_API_KEY: string;
+		ANTHROPIC_API_KEY: string;
 		Chat: DurableObjectNamespace<import("./src/server").Chat>;
 	}
 }
@@ -12,7 +14,7 @@ type StringifyValues<EnvType extends Record<string, unknown>> = {
 	[Binding in keyof EnvType]: EnvType[Binding] extends string ? EnvType[Binding] : string;
 };
 declare namespace NodeJS {
-	interface ProcessEnv extends StringifyValues<Pick<Cloudflare.Env, "OPENAI_API_KEY">> {}
+	interface ProcessEnv extends StringifyValues<Pick<Cloudflare.Env, "APP_URL" | "OPENAI_API_KEY" | "ANTHROPIC_API_KEY">> {}
 }
 
 // Begin runtime types
@@ -95,7 +97,7 @@ interface Console {
     clear(): void;
     /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/count_static) */
     count(label?: string): void;
-    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/countreset_static) */
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/countReset_static) */
     countReset(label?: string): void;
     /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/debug_static) */
     debug(...data: any[]): void;
@@ -107,9 +109,9 @@ interface Console {
     error(...data: any[]): void;
     /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/group_static) */
     group(...data: any[]): void;
-    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/groupcollapsed_static) */
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/groupCollapsed_static) */
     groupCollapsed(...data: any[]): void;
-    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/groupend_static) */
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/groupEnd_static) */
     groupEnd(): void;
     /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/info_static) */
     info(...data: any[]): void;
@@ -119,9 +121,9 @@ interface Console {
     table(tabularData?: any, properties?: string[]): void;
     /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/time_static) */
     time(label?: string): void;
-    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/timeend_static) */
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/timeEnd_static) */
     timeEnd(label?: string): void;
-    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/timelog_static) */
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/timeLog_static) */
     timeLog(label?: string, ...data: any[]): void;
     timeStamp(label?: string): void;
     /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/console/trace_static) */
@@ -296,25 +298,25 @@ declare function dispatchEvent(event: WorkerGlobalScopeEventMap[keyof WorkerGlob
 declare function btoa(data: string): string;
 /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/atob) */
 declare function atob(data: string): string;
-/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/setTimeout) */
+/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/setTimeout) */
 declare function setTimeout(callback: (...args: any[]) => void, msDelay?: number): number;
-/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/setTimeout) */
+/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/setTimeout) */
 declare function setTimeout<Args extends any[]>(callback: (...args: Args) => void, msDelay?: number, ...args: Args): number;
-/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/clearTimeout) */
+/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/clearTimeout) */
 declare function clearTimeout(timeoutId: number | null): void;
-/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/setInterval) */
+/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/setInterval) */
 declare function setInterval(callback: (...args: any[]) => void, msDelay?: number): number;
-/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/setInterval) */
+/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/setInterval) */
 declare function setInterval<Args extends any[]>(callback: (...args: Args) => void, msDelay?: number, ...args: Args): number;
-/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/clearInterval) */
+/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/clearInterval) */
 declare function clearInterval(timeoutId: number | null): void;
-/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/queueMicrotask) */
+/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/queueMicrotask) */
 declare function queueMicrotask(task: Function): void;
-/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/structuredClone) */
+/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/structuredClone) */
 declare function structuredClone<T>(value: T, options?: StructuredSerializeOptions): T;
-/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/reportError) */
+/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/reportError) */
 declare function reportError(error: any): void;
-/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/fetch) */
+/* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/fetch) */
 declare function fetch(input: RequestInfo | URL, init?: RequestInit<RequestInitCfProperties>): Promise<Response>;
 declare const self: ServiceWorkerGlobalScope;
 /**
@@ -793,6 +795,7 @@ declare class Blob {
     slice(start?: number, end?: number, type?: string): Blob;
     /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/arrayBuffer) */
     arrayBuffer(): Promise<ArrayBuffer>;
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/bytes) */
     bytes(): Promise<Uint8Array>;
     /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/text) */
     text(): Promise<string>;
@@ -1087,10 +1090,15 @@ interface TextEncoderEncodeIntoResult {
  */
 declare class ErrorEvent extends Event {
     constructor(type: string, init?: ErrorEventErrorEventInit);
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/ErrorEvent/filename) */
     get filename(): string;
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/ErrorEvent/message) */
     get message(): string;
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/ErrorEvent/lineno) */
     get lineno(): number;
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/ErrorEvent/colno) */
     get colno(): number;
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/ErrorEvent/error) */
     get error(): any;
 }
 interface ErrorEventErrorEventInit {
@@ -1264,6 +1272,7 @@ declare abstract class Body {
     get bodyUsed(): boolean;
     /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Request/arrayBuffer) */
     arrayBuffer(): Promise<ArrayBuffer>;
+    /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Request/bytes) */
     bytes(): Promise<Uint8Array>;
     /* [MDN Reference](https://developer.mozilla.org/docs/Web/API/Request/text) */
     text(): Promise<string>;
@@ -1375,7 +1384,11 @@ interface Request<CfHostMetadata = unknown, Cf = CfProperties<CfHostMetadata>> e
      * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Request/integrity)
      */
     integrity: string;
-    /* Returns a boolean indicating whether or not request can outlive the global in which it was created. */
+    /**
+     * Returns a boolean indicating whether or not request can outlive the global in which it was created.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Request/keepalive)
+     */
     keepalive: boolean;
     /**
      * Returns the cache mode associated with request, which is a string indicating how the request will interact with the browser's cache when fetching.

From 835fd3a41a9eb07fbf55a3a341e7ba32c0bbb80d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 18:23:03 +0200
Subject: [PATCH 12/40] feat: integrate react-hook-form for improved form
 handling in AddMcpServerDialog

- Added react-hook-form to manage form state and validation for the AddMcpServerDialog component.
- Replaced local state management for name and url with form registration and validation.
- Enhanced user feedback by displaying error messages for required fields.
- Streamlined the form submission process and reset functionality for better user experience.
---
 src/components/AddMcpServerDialog.tsx | 65 ++++++++++++++++-----------
 1 file changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index 28e052c..1e3d6c0 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -10,6 +10,7 @@ import {
 } from "@/components/dialog/dialog";
 import { Button } from "@/components/button/Button";
 import { Input } from "@/components/input/Input";
+import { useForm } from "react-hook-form";
 
 interface AddMcpServerDialogProps {
   open: boolean;
@@ -17,24 +18,28 @@ interface AddMcpServerDialogProps {
   onSubmit: (data: { name: string; url: string; }) => void;
 }
 
+type FormValues = {
+  name: string;
+  url: string;
+};
+
 export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServerDialogProps) {
-  const [name, setName] = useState("");
-  const [url, setUrl] = useState("");
   const [submitting, setSubmitting] = useState(false);
+  const { register, handleSubmit, formState: { errors }, reset } = useForm<FormValues>({
+    defaultValues: { name: "", url: "" },
+  });
 
-  const handleAccept = async () => {
+  const handleAccept = async (data: FormValues) => {
     setSubmitting(true);
-    await onSubmit({ name, url });
+    await onSubmit(data);
     setSubmitting(false);
     onOpenChange(false);
-    setName("");
-    setUrl("");
+    reset();
   };
 
   const handleCancel = () => {
     onOpenChange(false);
-    setName("");
-    setUrl("");
+    reset();
   };
 
   return (
@@ -46,42 +51,52 @@ export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServe
             Enter the details for the new MCP server connection.
           </DialogDescription>
         </DialogHeader>
-        <div className="space-y-4 py-2">
+        <form className="space-y-4 py-2" onSubmit={handleSubmit(handleAccept)}>
           <div>
             <label className="block text-sm font-medium mb-1" htmlFor="mcp-name">Name</label>
             <Input
               id="mcp-name"
-              value={name}
-              onChange={e => setName(e.target.value)}
+              className="w-full"
               placeholder="Server Name"
-              required
               size="base"
+              {...register("name", { required: "Name is required" })}
               onValueChange={undefined}
             />
+            {errors.name && (
+              <span className="text-red-500 text-xs mt-1 block">{errors.name.message}</span>
+            )}
           </div>
           <div>
             <label className="block text-sm font-medium mb-1" htmlFor="mcp-url">URL</label>
             <Input
               id="mcp-url"
-              value={url}
-              onChange={e => setUrl(e.target.value)}
+              className="w-full"
               placeholder="https://example.com"
-              required
               size="base"
+              {...register("url", {
+                required: "URL is required",
+                pattern: {
+                  value: /^https?:\/\/.+$/,
+                  message: "Enter a valid URL (must start with http(s)://)"
+                }
+              })}
               onValueChange={undefined}
             />
+            {errors.url && (
+              <span className="text-red-500 text-xs mt-1 block">{errors.url.message}</span>
+            )}
           </div>
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button type="button" variant="secondary" onClick={handleCancel} disabled={submitting}>
-              Cancel
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="secondary" onClick={handleCancel} disabled={submitting}>
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button type="submit" variant="primary" disabled={submitting}>
+              {submitting ? "Adding..." : "Add MCP Server"}
             </Button>
-          </DialogClose>
-          <Button type="button" variant="primary" onClick={handleAccept} disabled={submitting || !name || !url || !localUrl}>
-            {submitting ? "Adding..." : "Add MCP Server"}
-          </Button>
-        </DialogFooter>
+          </DialogFooter>
+        </form>
       </DialogContent>
     </Dialog>
   );

From a36cda2f8596d2f446fc077532b57d2132642239 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 18:25:27 +0200
Subject: [PATCH 13/40] refactor: update MCP connection display in Chat
 component

- Replaced DropdownMenuSub with DropdownMenuItem for a more streamlined layout of MCP connections.
- Improved the styling and structure of connection items for better usability.
- Maintained functionality for removing MCP connections while enhancing the overall user experience.
---
 src/app.tsx | 86 +++++++++++++++++++----------------------------------
 1 file changed, 30 insertions(+), 56 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index e0372a0..2dd76b8 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -477,63 +477,37 @@ export default function Chat() {
                             <span className="p-3 text-neutral-500 dark:text-neutral-400 text-sm select-none text-center w-full">No MCP servers available.</span>
                         )}
                         {mcpConnections.map((conn) => (
-                          <DropdownMenuSub key={conn.id}>
-                            <DropdownMenuSubTrigger className="hover:bg-neutral-100 dark:hover:bg-neutral-800">
-                              <div className="flex items-center w-full justify-between">
-                                <div className="flex flex-col gap-0.5">
-                                  <div className="flex items-center">
-                                    <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
-                                      {conn.url.charAt(0).toUpperCase()}
-                                    </span>
-                                    <span className="text-base text-neutral-900">{conn.url}</span>
-                                    <button
-                                      type="button"
-                                      className="ml-2 text-red-500 hover:text-red-700 transition-colors cursor-pointer"
-                                      onClick={e => {
-                                        e.stopPropagation();
-                                        e.preventDefault();
-                                        handleRemoveMcpConnection(conn.id);
-                                      }}
-                                      aria-label="Remove MCP Server"
-                                    >
-                                      <Trash size={16} />
-                                    </button>
-                                  </div>
-                                  <span
-                                    className={`ml-8 text-xs font-medium lowercase tracking-wide align-middle
-                                      ${conn.connectionState === "ready"
-                                        ? "text-green-600"
-                                        : conn.connectionState === "authenticating"
-                                        ? "text-yellow-700"
-                                        : "text-red-600"}
-                                    `}
-                                  >
-                                    {conn.connectionState}
-                                  </span>
-                                </div>
-                                {/* Tool count badge */}
-                                <span className="ml-2 flex items-center justify-center text-xs font-semibold text-blue-600 bg-blue-50 rounded-full px-2 py-0.5 border border-blue-100">
-                                  {Array.isArray(conn.tools) ? conn.tools.length : 0}
-                                </span>
-                              </div>
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuSubContent
-                              className="border border-neutral-100 dark:border-neutral-800"
+                          <DropdownMenuItem key={conn.id} className="flex items-center justify-between w-full">
+                            <div className="flex items-center gap-2">
+                              <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
+                                {conn.url.charAt(0).toUpperCase()}
+                              </span>
+                              <span className="text-base text-neutral-900">{conn.url}</span>
+                              <span
+                                className={`ml-4 text-xs font-medium lowercase tracking-wide align-middle
+                                  ${conn.connectionState === "ready"
+                                    ? "text-green-600"
+                                    : conn.connectionState === "authenticating"
+                                    ? "text-yellow-700"
+                                    : "text-red-600"}
+                                `}
+                              >
+                                {conn.connectionState}
+                              </span>
+                            </div>
+                            <button
+                              type="button"
+                              className="ml-2 text-red-500 hover:text-red-700 transition-colors cursor-pointer"
+                              onClick={e => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                handleRemoveMcpConnection(conn.id);
+                              }}
+                              aria-label="Remove MCP Server"
                             >
-                              {Array.isArray(conn.tools) && conn.tools.length > 0 ? (
-                                (conn.tools as { name?: string }[]).map((tool, idx) => (
-                                  <DropdownMenuItem
-                                    key={`${conn.id}-${tool.name || idx}`}
-                                    className="hover:bg-neutral-100 dark:hover:bg-neutral-800"
-                                  >
-                                    {tool.name || "Unnamed Tool"}
-                                  </DropdownMenuItem>
-                                ))
-                              ) : (
-                                <DropdownMenuItem disabled>No tools</DropdownMenuItem>
-                              )}
-                            </DropdownMenuSubContent>
-                          </DropdownMenuSub>
+                              <Trash size={16} />
+                            </button>
+                          </DropdownMenuItem>
                         ))}
                         <DropdownMenuSeparator />
                         <DropdownMenuItem

From a4bd5bf300dd3aadab4850d9b8bde24e937c2b06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 18:27:08 +0200
Subject: [PATCH 14/40] fix: update connection display to include name in Chat
 component

- Added a name property to the connection object to enhance the display of MCP connections.
- Updated the connection display logic to show the name if available, falling back to the URL otherwise for improved clarity.
---
 src/app.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app.tsx b/src/app.tsx
index 2dd76b8..8194f51 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -114,6 +114,7 @@ export default function Chat() {
         return {
           id,
           url: c.server_url,
+          name: c.name || "",
           connectionState: c.state,
           authUrl: c.auth_url ?? undefined,
           tools,
@@ -482,7 +483,7 @@ export default function Chat() {
                               <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
                                 {conn.url.charAt(0).toUpperCase()}
                               </span>
-                              <span className="text-base text-neutral-900">{conn.url}</span>
+                              <span className="text-base text-neutral-900">{conn.name || conn.url}</span>
                               <span
                                 className={`ml-4 text-xs font-medium lowercase tracking-wide align-middle
                                   ${conn.connectionState === "ready"

From 9d90893b6626fcd4d822389b7f6b5da84a82ce01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Tue, 20 May 2025 20:33:22 +0200
Subject: [PATCH 15/40] fix: update MCP connection handling in Chat component

- Removed the name property from the connection object to simplify the display logic.
- Updated the connection display to show only the URL, enhancing clarity and consistency in the Chat component.
- Adjusted the server-side logic to use the APP_URL as a fallback for localUrl when adding MCP servers.
---
 src/app.tsx   | 3 +--
 src/server.ts | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 8194f51..2dd76b8 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -114,7 +114,6 @@ export default function Chat() {
         return {
           id,
           url: c.server_url,
-          name: c.name || "",
           connectionState: c.state,
           authUrl: c.auth_url ?? undefined,
           tools,
@@ -483,7 +482,7 @@ export default function Chat() {
                               <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
                                 {conn.url.charAt(0).toUpperCase()}
                               </span>
-                              <span className="text-base text-neutral-900">{conn.name || conn.url}</span>
+                              <span className="text-base text-neutral-900">{conn.url}</span>
                               <span
                                 className={`ml-4 text-xs font-medium lowercase tracking-wide align-middle
                                   ${conn.connectionState === "ready"
diff --git a/src/server.ts b/src/server.ts
index 3ef69c6..dd90932 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -115,7 +115,7 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
     const reqUrl = new URL(request.url);
     if (reqUrl.pathname.endsWith("add-mcp") && request.method === "POST") {
       const mcpServer = (await request.json()) as { url: string; name: string; localUrl?: string };
-      const mcpConnection = await this.addMcpServerFromChat(mcpServer.name, mcpServer.url, mcpServer.localUrl || "");
+      const mcpConnection = await this.addMcpServerFromChat(mcpServer.name, mcpServer.url, this.env.APP_URL || "");
       return new Response(JSON.stringify(mcpConnection), { status: 200, headers: { "Content-Type": "application/json" } });
     }
     if (reqUrl.pathname.endsWith("get-mcp-connections") && request.method === "GET") {

From a359d92015a65b8464d66771d25e7f3488732478 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 11:47:13 +0200
Subject: [PATCH 16/40] fix: enhance MCP server dialog validation and
 submission handling

- Replaced react-hook-form with custom state management for name and URL inputs in AddMcpServerDialog.
- Implemented validation logic to ensure required fields are filled and URLs are correctly formatted.
- Updated form submission to reset input fields and clear error messages after submission.
- Adjusted the Chat component to handle MCP connections with the new name property for improved display.
---
 src/app.tsx                           |  9 ++--
 src/components/AddMcpServerDialog.tsx | 75 +++++++++++++++++----------
 2 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 2dd76b8..76a32d0 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -60,7 +60,7 @@ export default function Chat() {
   const [textareaHeight, setTextareaHeight] = useState("auto");
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const [showAddMcpDialog, setShowAddMcpDialog] = useState(false);
-  type McpConnection = { id: string; url: string; connectionState: string; authUrl?: string; tools?: unknown[] };
+  type McpConnection = { id: string; url: string; name?: string; connectionState: string; authUrl?: string; tools?: unknown[] };
   const [mcpConnections, setMcpConnections] = useState<McpConnection[]>([]);
 
   const scrollToBottom = useCallback(() => {
@@ -114,6 +114,7 @@ export default function Chat() {
         return {
           id,
           url: c.server_url,
+          name: c.name,
           connectionState: c.state,
           authUrl: c.auth_url ?? undefined,
           tools,
@@ -213,7 +214,7 @@ export default function Chat() {
       <AddMcpServerDialog
         open={showAddMcpDialog}
         onOpenChange={setShowAddMcpDialog}
-        onSubmit={handleAddMcpServer}
+        onSubmit={({ name, url }) => handleAddMcpServer({ name, url, localUrl: '' })}
       />
       <div className="h-[calc(100vh-2rem)] w-full mx-auto max-w-lg flex flex-col shadow-xl rounded-md overflow-hidden relative border border-neutral-300 dark:border-neutral-800">
         <div className="px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 flex items-center gap-3 sticky top-0 z-10">
@@ -480,9 +481,9 @@ export default function Chat() {
                           <DropdownMenuItem key={conn.id} className="flex items-center justify-between w-full">
                             <div className="flex items-center gap-2">
                               <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
-                                {conn.url.charAt(0).toUpperCase()}
+                                {(conn.name || conn.url).charAt(0).toUpperCase()}
                               </span>
-                              <span className="text-base text-neutral-900">{conn.url}</span>
+                              <span className="text-base text-neutral-900">{conn.name || conn.url}</span>
                               <span
                                 className={`ml-4 text-xs font-medium lowercase tracking-wide align-middle
                                   ${conn.connectionState === "ready"
diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index 1e3d6c0..d096e06 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -10,7 +10,6 @@ import {
 } from "@/components/dialog/dialog";
 import { Button } from "@/components/button/Button";
 import { Input } from "@/components/input/Input";
-import { useForm } from "react-hook-form";
 
 interface AddMcpServerDialogProps {
   open: boolean;
@@ -18,28 +17,52 @@ interface AddMcpServerDialogProps {
   onSubmit: (data: { name: string; url: string; }) => void;
 }
 
-type FormValues = {
-  name: string;
-  url: string;
-};
-
 export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServerDialogProps) {
   const [submitting, setSubmitting] = useState(false);
-  const { register, handleSubmit, formState: { errors }, reset } = useForm<FormValues>({
-    defaultValues: { name: "", url: "" },
-  });
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const [nameError, setNameError] = useState<string | null>(null);
+  const [urlError, setUrlError] = useState<string | null>(null);
+
+  const validate = () => {
+    let valid = true;
+    if (!name.trim()) {
+      setNameError("Name is required");
+      valid = false;
+    } else {
+      setNameError(null);
+    }
+    if (!url.trim()) {
+      setUrlError("URL is required");
+      valid = false;
+    } else if (!/^https?:\/\/.+$/.test(url)) {
+      setUrlError("Enter a valid URL (must start with http(s)://)");
+      valid = false;
+    } else {
+      setUrlError(null);
+    }
+    return valid;
+  };
 
-  const handleAccept = async (data: FormValues) => {
+  const handleAccept = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!validate()) return;
     setSubmitting(true);
-    await onSubmit(data);
+    await onSubmit({ name, url });
     setSubmitting(false);
     onOpenChange(false);
-    reset();
+    setName("");
+    setUrl("");
+    setNameError(null);
+    setUrlError(null);
   };
 
   const handleCancel = () => {
     onOpenChange(false);
-    reset();
+    setName("");
+    setUrl("");
+    setNameError(null);
+    setUrlError(null);
   };
 
   return (
@@ -51,7 +74,7 @@ export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServe
             Enter the details for the new MCP server connection.
           </DialogDescription>
         </DialogHeader>
-        <form className="space-y-4 py-2" onSubmit={handleSubmit(handleAccept)}>
+        <form className="space-y-4 py-2" onSubmit={handleAccept}>
           <div>
             <label className="block text-sm font-medium mb-1" htmlFor="mcp-name">Name</label>
             <Input
@@ -59,11 +82,12 @@ export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServe
               className="w-full"
               placeholder="Server Name"
               size="base"
-              {...register("name", { required: "Name is required" })}
-              onValueChange={undefined}
+              value={name}
+              onValueChange={(val) => setName(val)}
+              isValid={!nameError}
             />
-            {errors.name && (
-              <span className="text-red-500 text-xs mt-1 block">{errors.name.message}</span>
+            {nameError && (
+              <span className="text-red-500 text-xs mt-1 block">{nameError}</span>
             )}
           </div>
           <div>
@@ -73,17 +97,12 @@ export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServe
               className="w-full"
               placeholder="https://example.com"
               size="base"
-              {...register("url", {
-                required: "URL is required",
-                pattern: {
-                  value: /^https?:\/\/.+$/,
-                  message: "Enter a valid URL (must start with http(s)://)"
-                }
-              })}
-              onValueChange={undefined}
+              value={url}
+              onValueChange={(val) => setUrl(val)}
+              isValid={!urlError}
             />
-            {errors.url && (
-              <span className="text-red-500 text-xs mt-1 block">{errors.url.message}</span>
+            {urlError && (
+              <span className="text-red-500 text-xs mt-1 block">{urlError}</span>
             )}
           </div>
           <DialogFooter>

From 7940b056d14c6de1d08a3d1af5d03d0f37381366 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 11:55:02 +0200
Subject: [PATCH 17/40] refactor: rename CSS file and update references

- Changed the CSS file name from index.css to styles.css for better clarity and organization.
- Updated all references in components.json, README.md, and client.tsx to reflect the new file name.
- Removed the old index.css file to streamline the project structure.
---
 README.md                     | 4 ++--
 components.json               | 2 +-
 src/client.tsx                | 2 +-
 src/{index.css => styles.css} | 0
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename src/{index.css => styles.css} (100%)

diff --git a/README.md b/README.md
index efb4e88..f67b3a0 100644
--- a/README.md
+++ b/README.md
@@ -63,7 +63,7 @@ npm run deploy
 │   ├── server.ts      # Chat agent logic
 │   ├── tools.ts       # Tool definitions
 │   ├── utils.ts       # Helper functions
-│   └── index.css     # UI styling
+│   └── styles.css     # UI styling
 ```
 
 ## Customization Guide
@@ -176,7 +176,7 @@ Commit your changes and then run the `agents-starter` as per the rest of this RE
 
 The chat interface is built with React and can be customized in `app.tsx`:
 
-- Modify the theme colors in `index.css`
+- Modify the theme colors in `styles.css`
 - Add new UI components in the chat container
 - Customize message rendering and tool confirmation dialogs
 - Add new controls to the header
diff --git a/components.json b/components.json
index 4b1fafb..ed8b698 100644
--- a/components.json
+++ b/components.json
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "src/index.css",
+    "css": "src/styles.css",
     "baseColor": "zinc",
     "cssVariables": true,
     "prefix": ""
diff --git a/src/client.tsx b/src/client.tsx
index 1655fbe..9dda348 100644
--- a/src/client.tsx
+++ b/src/client.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import "./styles.css";
 import { createRoot } from "react-dom/client";
 import App from "./app";
 import { Providers } from "@/providers";
diff --git a/src/index.css b/src/styles.css
similarity index 100%
rename from src/index.css
rename to src/styles.css

From 510c46f8fa21f2927e340d3ba27ca82a607e24a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 11:59:13 +0200
Subject: [PATCH 18/40] refactor: remove redundant comments in Chat component

- Eliminated unnecessary comments regarding fetching MCP connections, as real-time updates are now handling connection management.
- Streamlined the code for better readability and clarity in the Chat component.
---
 src/app.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 76a32d0..b953dc8 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -189,7 +189,6 @@ export default function Chat() {
     } catch (e) {
       // ignore if not JSON or no authUrl
     }
-    // No need to fetch, real-time updates will handle it
   };
 
   const handleRemoveMcpConnection = async (id: string) => {
@@ -205,7 +204,6 @@ export default function Chat() {
         body: JSON.stringify({ id }),
       }
     );
-    // No need to fetch, real-time updates will handle it
   };
 
   return (

From 5ead6a4ed8a4e48e325c6e3c8a3a9129cca7c945 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 12:02:05 +0200
Subject: [PATCH 19/40] refactor: reorganize dropdown menu components

- Moved DropdownMenu components from dropdown-menu.tsx to a new directory structure under dropdown/DropdownMenu.tsx for better organization.
- Updated import paths in app.tsx to reflect the new component location.
- Removed the old dropdown-menu.tsx file to streamline the project structure.
---
 src/app.tsx                              |   5 +-
 src/components/dropdown-menu.tsx         | 254 -------------
 src/components/dropdown/DropdownMenu.tsx | 432 +++++++++++++----------
 3 files changed, 247 insertions(+), 444 deletions(-)
 delete mode 100644 src/components/dropdown-menu.tsx

diff --git a/src/app.tsx b/src/app.tsx
index b953dc8..375d7c9 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -21,11 +21,8 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/components/dropdown-menu";
+} from "@/components/dropdown/DropdownMenu";
 
 // Icon imports
 import {
diff --git a/src/components/dropdown-menu.tsx b/src/components/dropdown-menu.tsx
deleted file mode 100644
index af8c77a..0000000
--- a/src/components/dropdown-menu.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}
diff --git a/src/components/dropdown/DropdownMenu.tsx b/src/components/dropdown/DropdownMenu.tsx
index a3ed06b..af8c77a 100644
--- a/src/components/dropdown/DropdownMenu.tsx
+++ b/src/components/dropdown/DropdownMenu.tsx
@@ -1,194 +1,254 @@
-import { DotsThree, IconContext } from "@phosphor-icons/react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-
-import { cn } from "@/lib/utils";
-import { cva } from "class-variance-authority";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-        outline:
-          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export type MenuItemProps = {
-  destructiveAction?: boolean;
-  href?: string;
-  hrefExternal?: boolean;
-  icon?: React.ReactNode;
-  label?: string | React.ReactNode;
-  checked?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  titleContent?: React.ReactNode;
-  type: "button" | "link" | "divider" | "title" | "checkbox" | string;
-};
-
-export type DropdownMenuProps = {
-  align: "center" | "end" | "start";
-  alignOffset?: number;
-  buttonProps?: React.ComponentProps<typeof buttonVariants>;
-  children?: React.ReactNode;
-  className?: string;
-  disabled?: boolean;
-  MenuItems: Array<MenuItemProps> | null;
-  onCloseRmFocus?: boolean;
-  side: "bottom" | "left" | "right" | "top";
-  sideOffset?: number;
-  size?: "sm" | "base";
-  id?: string;
-};
-
-const DropdownMenu = ({
-  align,
-  alignOffset,
-  buttonProps,
-  children,
-  className,
-  disabled,
-  MenuItems,
-  onCloseRmFocus = true,
-  side,
-  sideOffset,
-  id,
-  size = "base",
-}: DropdownMenuProps) => (
-  <DropdownMenuPrimitive.Root>
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
     <DropdownMenuPrimitive.Trigger
-      id={id}
-      className={cn(
-        children
-          ? "radix-state-open:!text-neutral-950 dark:radix-state-open:!text-white text-neutral-500 focus-visible:opacity-100 dark:text-neutral-400"
-          : buttonVariants(
-              buttonProps ?? {
-                variant: "ghost",
-                size: "default", // 'base',
-                // shape: 'square',
-                // interaction: 'none',
-                class:
-                  "radix-state-open:text-neutral-950 dark:radix-state-open:text-white focus-visible:opacity-100",
-              }
-            ),
-        className
-      )}
-      disabled={disabled}
-    >
-      {children ?? <DotsThree weight="bold" />}
-    </DropdownMenuPrimitive.Trigger>
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
-        align={align ?? "start"}
-        sideOffset={sideOffset ?? 0}
-        alignOffset={alignOffset ?? 0}
-        side={side ?? "bottom"}
-        onCloseAutoFocus={(e) => {
-          onCloseRmFocus ? e.preventDefault() : null;
-        }}
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
         className={cn(
-          "z-modal radix-state-closed:animate-scaleFadeOutSm radix-state-open:animate-scaleFadeInSm overflow-hidden rounded-xl border border-neutral-200 bg-white p-1.5 py-1.5 text-base font-medium text-neutral-900 shadow-lg shadow-black/5 transition-transform duration-100 dark:border-neutral-800 dark:bg-neutral-900 dark:text-white",
-          {
-            "origin-top-right": align === "end" && side === "bottom",
-            "origin-top-left": align === "start" && side === "bottom",
-            "origin-bottom-right": align === "end" && side === "top",
-            "origin-bottom-left": align === "start" && side === "top",
-            "text-sm font-normal": size === "sm",
-          }
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
         )}
-      >
-        {MenuItems?.map((item, index) => {
-          if (item.type === "title") {
-            return (
-              <header
-                className="px-2.5 py-2.5 dark:border-neutral-800"
-                onClick={(e) => e.preventDefault()}
-                onKeyDown={(e) => e.preventDefault()}
-                // biome-ignore lint/suspicious/noArrayIndexKey: TODO
-                key={index}
-              >
-                {item.titleContent}
-              </header>
-            );
-          }
-          if (item.type === "divider") {
-            return (
-              // biome-ignore lint/suspicious/noArrayIndexKey: TODO
-              <div className="my-1.5 w-full px-2.5" key={index}>
-                <div className="h-px w-full bg-neutral-200 dark:bg-neutral-800" />
-              </div>
-            );
-          }
-          if (item.type === "link" || item.type === "button") {
-            return (
-              // biome-ignore lint/suspicious/noArrayIndexKey: TODO
-              <DropdownMenuPrimitive.Item asChild key={index}>
-                {item.type === "link" ? (
-                  <a
-                    className="radix-highlighted:bg-neutral-100 radix-highlighted:text-neutral-950 dark:radix-highlighted:bg-neutral-800 dark:radix-highlighted:text-white flex w-full items-center justify-between gap-5 rounded-md p-2.5 text-neutral-700 focus:outline-none dark:text-neutral-300"
-                    href={item.href || ""}
-                    target={item.hrefExternal ? "_blank" : undefined}
-                  >
-                    {item.label}
-                    <IconContext.Provider
-                      value={{
-                        size: size === "sm" ? 16 : 20,
-                      }}
-                    >
-                      {item.icon}
-                    </IconContext.Provider>
-                  </a>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={item.onClick}
-                    className={cn(
-                      "radix-highlighted:bg-neutral-100 radix-highlighted:text-neutral-950 dark:radix-highlighted:bg-neutral-800 dark:radix-highlighted:text-white flex w-full items-center justify-between gap-5 rounded-md p-2.5 text-neutral-700 focus:outline-none dark:text-neutral-300",
-                      {
-                        "radix-highlighted:bg-red-50 radix-highlighted:text-red-600 dark:radix-highlighted:bg-red-500/10 dark:radix-highlighted:text-red-400 text-red-500 dark:text-red-400/90":
-                          item.destructiveAction,
-                      }
-                    )}
-                  >
-                    {item.label}
-                    <IconContext.Provider
-                      value={{
-                        size: size === "sm" ? 16 : 20,
-                      }}
-                    >
-                      {item.icon}
-                    </IconContext.Provider>
-                  </button>
-                )}
-              </DropdownMenuPrimitive.Item>
-            );
-          }
-        })}
-      </DropdownMenuPrimitive.Content>
+        {...props}
+      />
     </DropdownMenuPrimitive.Portal>
-  </DropdownMenuPrimitive.Root>
-);
+  )
+}
 
-DropdownMenu.displayName = "DropdownMenu";
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-export { DropdownMenu };
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

From 5068753336ab1b90313ba18223a4afc066909327 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 12:04:27 +0200
Subject: [PATCH 20/40] refactor: streamline MCP server management in Chat
 component

- Removed redundant methods for adding, removing, and retrieving MCP connections, simplifying the codebase.
- Updated the logic to directly call the relevant methods from the mcp object, enhancing clarity and reducing complexity.
- Improved response handling for MCP connection requests in the chat message processing logic.
---
 src/server.ts | 24 +++---------------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/src/server.ts b/src/server.ts
index dd90932..f41efdf 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -26,23 +26,6 @@ const model = openai("gpt-4o-2024-11-20");
  * Chat Agent implementation that handles real-time AI chat interactions
  */
 export class Chat extends AIChatAgent<Env> {
-  async addMcpServerFromChat(name: string, url: string, localUrl: string) {
-    const mcpConnection = await this.addMcpServer(name, url, localUrl);
-    return mcpConnection;
-  }
-
-  async removeMcpServerFromChat(id: string) {
-    await this.removeMcpServer(id);
-  }
-
-  async getMcpConnections() {
-    return this.mcp.mcpConnections;
-  }
-
-  async closeMcpConnection(id: string) {
-    await this.closeMcpConnection(id);
-  }
-
   /**
    * Handles incoming chat messages and manages the response stream
    * @param onFinish - Callback function executed when streaming completes
@@ -115,11 +98,11 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
     const reqUrl = new URL(request.url);
     if (reqUrl.pathname.endsWith("add-mcp") && request.method === "POST") {
       const mcpServer = (await request.json()) as { url: string; name: string; localUrl?: string };
-      const mcpConnection = await this.addMcpServerFromChat(mcpServer.name, mcpServer.url, this.env.APP_URL || "");
+      const mcpConnection = await this.addMcpServer(mcpServer.name, mcpServer.url, this.env.APP_URL || "");
       return new Response(JSON.stringify(mcpConnection), { status: 200, headers: { "Content-Type": "application/json" } });
     }
     if (reqUrl.pathname.endsWith("get-mcp-connections") && request.method === "GET") {
-      const mcpConnections = await this.getMcpConnections();
+      const mcpConnections = this.mcp.mcpConnections;
       return new Response(JSON.stringify({ mcpConnections }), {
         headers: { "Content-Type": "application/json" },
       });
@@ -131,14 +114,13 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
       });
     }
     if (reqUrl.pathname.endsWith("get-messages") && request.method === "GET") {
-      // Return an empty array or your actual chat history
       return new Response(JSON.stringify(this.messages), {
         headers: { "Content-Type": "application/json" },
       });
     }
     if (reqUrl.pathname.endsWith("remove-mcp-connection") && request.method === "POST") {
       const { id } = (await request.json()) as { id: string };
-      await this.removeMcpServerFromChat(id);
+      await this.removeMcpServer(id);
       return new Response("Ok", { status: 200 });
     }
     return new Response("Not found", { status: 404 });

From 0193a196d6373e0ad78c6f9c16d6aa4845a18e59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 12:06:00 +0200
Subject: [PATCH 21/40] refactor: optimize MCP server connection retrieval in
 server.ts

- Changed the method call for retrieving MCP servers from an asynchronous to a synchronous call, improving performance and simplifying the code.
- Ensured the response format remains consistent with previous implementations for seamless integration.
---
 src/server.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/server.ts b/src/server.ts
index f41efdf..6142069 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -108,7 +108,7 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
       });
     }
     if (reqUrl.pathname.endsWith("get-mcp-servers") && request.method === "GET") {
-      const mcpServers = await this.getConnections();
+      const mcpServers = this.getConnections();
       return new Response(JSON.stringify({ mcpServers }), {
         headers: { "Content-Type": "application/json" },
       });

From b26b935c5394a25e82da1fbb23f688a6c10f19d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 12:22:40 +0200
Subject: [PATCH 22/40] feat: integrate react-hook-form for AddMcpServerDialog

- Added react-hook-form to manage form state and validation for the AddMcpServerDialog component.
- Replaced local state management for name and URL inputs with form registration and validation.
- Improved error handling by displaying messages for required fields and invalid URLs.
- Streamlined form submission and reset functionality for enhanced user experience.
- Updated Input component to simplify its structure and improve usability.
---
 package-lock.json                     |  16 ++++
 package.json                          |   1 +
 src/components/AddMcpServerDialog.tsx |  90 +++++++-------------
 src/components/input/Input.tsx        | 118 +++-----------------------
 4 files changed, 59 insertions(+), 166 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9d13c15..a64d2bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "marked": "^15.0.11",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-hook-form": "^7.56.4",
         "react-markdown": "^10.1.0",
         "remark-gfm": "^4.0.1",
         "tailwind-merge": "^3.3.0",
@@ -6590,6 +6591,21 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.56.4",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.4.tgz",
+      "integrity": "sha512-Rob7Ftz2vyZ/ZGsQZPaRdIefkgOSrQSPXfqBdvOPwJfoGnjwRJUs7EM7Kc1mcoDv3NOtqBzPGbcMB8CGn9CKgw==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-markdown": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
diff --git a/package.json b/package.json
index 241e591..be6a724 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "marked": "^15.0.11",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.56.4",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.0",
diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index d096e06..483c52b 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useForm } from "react-hook-form";
 import {
   Dialog,
   DialogContent,
@@ -10,7 +10,6 @@ import {
 } from "@/components/dialog/dialog";
 import { Button } from "@/components/button/Button";
 import { Input } from "@/components/input/Input";
-
 interface AddMcpServerDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -18,51 +17,24 @@ interface AddMcpServerDialogProps {
 }
 
 export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServerDialogProps) {
-  const [submitting, setSubmitting] = useState(false);
-  const [name, setName] = useState("");
-  const [url, setUrl] = useState("");
-  const [nameError, setNameError] = useState<string | null>(null);
-  const [urlError, setUrlError] = useState<string | null>(null);
-
-  const validate = () => {
-    let valid = true;
-    if (!name.trim()) {
-      setNameError("Name is required");
-      valid = false;
-    } else {
-      setNameError(null);
-    }
-    if (!url.trim()) {
-      setUrlError("URL is required");
-      valid = false;
-    } else if (!/^https?:\/\/.+$/.test(url)) {
-      setUrlError("Enter a valid URL (must start with http(s)://)");
-      valid = false;
-    } else {
-      setUrlError(null);
-    }
-    return valid;
-  };
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm<{ name: string; url: string }>({
+    defaultValues: { name: "", url: "" },
+  });
 
-  const handleAccept = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!validate()) return;
-    setSubmitting(true);
-    await onSubmit({ name, url });
-    setSubmitting(false);
+  const onFormSubmit = async (data: { name: string; url: string }) => {
+    await onSubmit(data);
     onOpenChange(false);
-    setName("");
-    setUrl("");
-    setNameError(null);
-    setUrlError(null);
+    reset();
   };
 
   const handleCancel = () => {
     onOpenChange(false);
-    setName("");
-    setUrl("");
-    setNameError(null);
-    setUrlError(null);
+    reset();
   };
 
   return (
@@ -74,45 +46,45 @@ export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServe
             Enter the details for the new MCP server connection.
           </DialogDescription>
         </DialogHeader>
-        <form className="space-y-4 py-2" onSubmit={handleAccept}>
+        <form className="space-y-4 py-2" onSubmit={handleSubmit(onFormSubmit)}>
           <div>
             <label className="block text-sm font-medium mb-1" htmlFor="mcp-name">Name</label>
             <Input
               id="mcp-name"
-              className="w-full"
               placeholder="Server Name"
-              size="base"
-              value={name}
-              onValueChange={(val) => setName(val)}
-              isValid={!nameError}
+              aria-invalid={!!errors.name}
+              {...register("name", { required: "Name is required" })}
             />
-            {nameError && (
-              <span className="text-red-500 text-xs mt-1 block">{nameError}</span>
+            {errors.name && (
+              <span className="text-red-500 text-xs mt-1 block">{errors.name.message}</span>
             )}
           </div>
           <div>
             <label className="block text-sm font-medium mb-1" htmlFor="mcp-url">URL</label>
             <Input
               id="mcp-url"
-              className="w-full"
               placeholder="https://example.com"
-              size="base"
-              value={url}
-              onValueChange={(val) => setUrl(val)}
-              isValid={!urlError}
+              aria-invalid={!!errors.url}
+              {...register("url", {
+                required: "URL is required",
+                pattern: {
+                  value: /^https?:\/\/.+$/,
+                  message: "Enter a valid URL (must start with http(s)://)",
+                },
+              })}
             />
-            {urlError && (
-              <span className="text-red-500 text-xs mt-1 block">{urlError}</span>
+            {errors.url && (
+              <span className="text-red-500 text-xs mt-1 block">{errors.url.message}</span>
             )}
           </div>
           <DialogFooter>
             <DialogClose asChild>
-              <Button type="button" variant="secondary" onClick={handleCancel} disabled={submitting}>
+              <Button type="button" variant="secondary" onClick={handleCancel} disabled={isSubmitting}>
                 Cancel
               </Button>
             </DialogClose>
-            <Button type="submit" variant="primary" disabled={submitting}>
-              {submitting ? "Adding..." : "Add MCP Server"}
+            <Button type="submit" variant="primary" disabled={isSubmitting}>
+              {isSubmitting ? "Adding..." : "Add MCP Server"}
             </Button>
           </DialogFooter>
         </form>
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index f298ade..be963ed 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -1,114 +1,18 @@
-import { cn } from "@/lib/utils";
-import { useMemo, useRef, useState } from "react";
+import { cn } from "@/lib/utils"
 
-export const inputClasses = cn(
-  "bg-ob-btn-secondary-bg text-ob-base-300 border-ob-border focus:border-ob-border-active placeholder:text-ob-base-100 add-disable border border-1 transition-colors focus:outline-none"
-);
-
-export type InputProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "size"
-> & {
-  children?: React.ReactNode;
-  className?: string;
-  displayContent?: "items-first" | "items-last"; // used for children of component
-  initialValue?: string;
-  isValid?: boolean;
-  onValueChange: ((value: string, isValid: boolean) => void) | undefined;
-  preText?: string[] | React.ReactNode[] | React.ReactNode;
-  postText?: string[] | React.ReactNode[] | React.ReactNode;
-  size?: "sm" | "md" | "base";
-};
-
-export const Input = ({
-  children,
-  className,
-  displayContent,
-  initialValue,
-  isValid = true,
-  onValueChange,
-  preText,
-  postText,
-  size = "base",
-  ...props
-}: InputProps) => {
-  const [currentValue, setCurrentValue] = useState(initialValue ?? "");
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  useMemo(() => {
-    setCurrentValue(initialValue ?? "");
-  }, [initialValue]);
-
-  const updateCurrentValue = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = event.target.value;
-    setCurrentValue(newValue);
-
-    if (onValueChange) {
-      if (!props.min) {
-        onValueChange(newValue, isValid);
-      } else if (typeof props.min === "number") {
-        onValueChange(newValue.slice(0, props.min), isValid);
-      }
-    }
-  };
-
-  const handlePreTextInputClick = () => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  };
-
-  return preText ? (
-    // biome-ignore lint/a11y/useKeyWithClickEvents: todo
-    <div
-      className={cn(
-        "has-[:disabled]:ob-disable has-[:enabled]:active:border-ob-border-active has-[:focus]:border-ob-border-active flex cursor-text",
-        inputClasses,
-        {
-          "add-size-sm": size === "sm",
-          "add-size-md": size === "md",
-          "add-size-base": size === "base",
-        },
-        className
-      )}
-      onClick={handlePreTextInputClick}
-    >
-      <span className="text-ob-base-200 pointer-events-none mr-0.5 flex items-center gap-2 transition-colors select-none">
-        {preText}
-      </span>
-
-      <input
-        className={cn(
-          "placeholder:text-ob-base-100 w-full bg-transparent focus:outline-none",
-          {
-            "text-ob-destructive": !isValid,
-          }
-        )}
-        onChange={updateCurrentValue}
-        ref={inputRef}
-        value={currentValue}
-        {...props}
-      />
-
-      <span className="text-ob-base-200 mr-0.5 flex items-center gap-2 transition-colors select-none">
-        {postText}
-      </span>
-    </div>
-  ) : (
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
     <input
+      type={type}
+      data-slot="input"
       className={cn(
-        inputClasses,
-        {
-          "text-ob-destructive transition-colors": !isValid,
-          "add-size-sm": size === "sm",
-          "add-size-md": size === "md",
-          "add-size-base": size === "base",
-        },
+        "file:text-neutral-900 dark:file:text-neutral-100 placeholder:text-neutral-500 selection:bg-neutral-800 selection:text-neutral-100 dark:bg-neutral-900 flex h-9 w-full min-w-0 rounded-md border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900 px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm ring-offset-neutral-100 dark:ring-offset-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300 dark:focus-visible:ring-neutral-700 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-neutral-900",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
-      onChange={updateCurrentValue}
-      value={currentValue}
       {...props}
     />
-  );
-};
+  )
+}
+
+export { Input }

From 22eb64f71a255713f895b674a55ea6e5fe2a9caa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 14:29:22 +0200
Subject: [PATCH 23/40] refactor: simplify MCP server connection mapping in
 Chat component

- Replaced inline mapping logic for MCP server connections with a dedicated function, improving code readability and maintainability.
- Updated the name property assignment to use sessionId directly, enhancing clarity.
- Streamlined the handling of tools within the connection mapping for better performance and consistency.
---
 src/app.tsx | 48 +++++++++++++++++++++---------------------------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 375d7c9..c143d40 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -90,34 +90,9 @@ export default function Chat() {
 
   const agent = useAgent({
     agent: "chat",
-    name: localStorage.getItem("sessionId") ?? undefined,
+    name: sessionId ?? undefined,
     onMcpUpdate: (mcpServersState) => {
-      // Use the same mapping logic as fetchMcpConnections
-      const connections = Object.entries(mcpServersState.servers || {}).map(([id, conn]) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const c = conn ;
-        let tools: { name?: string }[] = [];
-        if (Array.isArray(c.tools)) {
-          tools = c.tools as { name?: string }[];
-        } else if (c.tools && typeof c.tools === 'object') {
-          tools = Object.values(c.tools) as { name?: string }[];
-        } else if (c.capabilities) {
-          if (Array.isArray(c.capabilities.tools)) {
-            tools = c.capabilities.tools as { name?: string }[];
-          } else if (c.capabilities.tools && typeof c.capabilities.tools === 'object') {
-            tools = Object.values(c.capabilities.tools) as { name?: string }[];
-          }
-        }
-        return {
-          id,
-          url: c.server_url,
-          name: c.name,
-          connectionState: c.state,
-          authUrl: c.auth_url ?? undefined,
-          tools,
-        };
-      });
-      setMcpConnections(connections);
+      setMcpConnections(mapMcpServersToConnections(mcpServersState));
     },
   });
 
@@ -620,3 +595,22 @@ function HasOpenAIKey() {
   }
   return null;
 }
+
+function mapMcpServersToConnections(mcpServersState: any): McpConnection[] {
+  return Object.entries(mcpServersState.servers || {}).map(([id, c]: [string, any]) => ({
+    id,
+    url: c.server_url,
+    name: c.name,
+    connectionState: c.state,
+    authUrl: c.auth_url ?? undefined,
+    tools: Array.isArray(c.tools)
+      ? c.tools
+      : c.tools && typeof c.tools === "object"
+      ? Object.values(c.tools)
+      : c.capabilities && Array.isArray(c.capabilities.tools)
+      ? c.capabilities.tools
+      : c.capabilities && typeof c.capabilities.tools === "object"
+      ? Object.values(c.capabilities.tools)
+      : [],
+  }));
+}

From 7dc233d3e3152e7281b0a4bea5009e5032fe6b91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 16:31:19 +0200
Subject: [PATCH 24/40] feat: update MCP server management and enhance UI
 components

- Updated package dependencies, including the addition of @tailwindcss/vite for improved styling capabilities.
- Refactored the Chat component to enhance MCP connection handling, including clearer type definitions and improved state management.
- Streamlined the AddMcpServerDialog component with better form handling and validation using react-hook-form.
- Improved the DropdownMenu and dialog components for better organization and usability.
- Enhanced the Input component structure for improved clarity and maintainability.
---
 package-lock.json                        |   3 +-
 src/app.tsx                              | 220 ++++++++++++++---------
 src/components/AddMcpServerDialog.tsx    |  38 +++-
 src/components/dialog/dialog.tsx         |  28 +--
 src/components/dropdown/DropdownMenu.tsx |  46 ++---
 src/components/input/Input.tsx           |   6 +-
 src/server.ts                            |  33 +++-
 7 files changed, 229 insertions(+), 145 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e705b67..8a3af88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,7 +37,8 @@
         "@biomejs/biome": "^1.9.4",
         "@cloudflare/vite-plugin": "1.1.1",
         "@cloudflare/vitest-pool-workers": "^0.8.27",
-        "@cloudflare/workers-types": "^4.20250513.0",
+        "@cloudflare/workers-types": "^4.20250510.0",
+        "@tailwindcss/vite": "^4.1.7",
         "@types/node": "^22.15.17",
         "@types/react": "^19.1.4",
         "@types/react-dom": "^19.1.5",
diff --git a/src/app.tsx b/src/app.tsx
index c143d40..09b5f87 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -33,7 +33,7 @@ import {
   Trash,
   PaperPlaneTilt,
   Stop,
-  Sliders
+  Sliders,
 } from "@phosphor-icons/react";
 
 // List of tools that require human confirmation
@@ -47,6 +47,15 @@ if (!sessionId) {
   localStorage.setItem("sessionId", sessionId);
 }
 
+type McpConnection = {
+  id: string;
+  url: string;
+  name?: string;
+  connectionState: string;
+  authUrl?: string;
+  tools?: unknown[];
+};
+
 export default function Chat() {
   const [theme, setTheme] = useState<"dark" | "light">(() => {
     // Check localStorage first, default to dark if not found
@@ -57,7 +66,6 @@ export default function Chat() {
   const [textareaHeight, setTextareaHeight] = useState("auto");
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const [showAddMcpDialog, setShowAddMcpDialog] = useState(false);
-  type McpConnection = { id: string; url: string; name?: string; connectionState: string; authUrl?: string; tools?: unknown[] };
   const [mcpConnections, setMcpConnections] = useState<McpConnection[]>([]);
 
   const scrollToBottom = useCallback(() => {
@@ -104,10 +112,10 @@ export default function Chat() {
     addToolResult,
     clearHistory,
     isLoading,
-    stop
+    stop,
   } = useAgentChat({
     agent,
-    maxSteps: 5
+    maxSteps: 5,
   });
 
   // Scroll to bottom when messages change
@@ -139,7 +147,15 @@ export default function Chat() {
     );
   }
 
-  const handleAddMcpServer = async ({ name, url, localUrl }: { name: string; url: string; localUrl: string }) => {
+  const handleAddMcpServer = async ({
+    name,
+    url,
+    localUrl,
+  }: {
+    name: string;
+    url: string;
+    localUrl: string;
+  }) => {
     const res = await agentFetch(
       {
         host: agent.host,
@@ -154,7 +170,12 @@ export default function Chat() {
     );
     // Try to get authUrl from response
     try {
-      const data = (await res.json()) as { id: string; url: string; connectionState: string; authUrl?: string };
+      const data = (await res.json()) as {
+        id: string;
+        url: string;
+        connectionState: string;
+        authUrl?: string;
+      };
       if (data?.authUrl) {
         openPopup(data.authUrl);
       }
@@ -184,7 +205,9 @@ export default function Chat() {
       <AddMcpServerDialog
         open={showAddMcpDialog}
         onOpenChange={setShowAddMcpDialog}
-        onSubmit={({ name, url }) => handleAddMcpServer({ name, url, localUrl: '' })}
+        onSubmit={({ name, url }) =>
+          handleAddMcpServer({ name, url, localUrl: "" })
+        }
       />
       <div className="h-[calc(100vh-2rem)] w-full mx-auto max-w-lg flex flex-col shadow-xl rounded-md overflow-hidden relative border border-neutral-300 dark:border-neutral-800">
         <div className="px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 flex items-center gap-3 sticky top-0 z-10">
@@ -424,72 +447,83 @@ export default function Chat() {
                 style={{ height: textareaHeight }}
               />
               <div className="absolute bottom-0 left-0 p-2 w-fit flex flex-row justify-between">
-              
-                  <div className="flex justify-between w-full">
-                    {/* Control Panel DropdownMenu (Sliders icon as trigger) */}
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <button
-                          type="button"
-                          className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
-                          aria-label="Control Panel"
-                        >
-                          <Sliders size={16} />
-                        </button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent
-                        align="start"
-                        side="top"
-                        className="bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 shadow-xl rounded-xl p-1 text-base font-medium text-neutral-900 dark:text-white"
+                <div className="flex justify-between w-full">
+                  {/* Control Panel DropdownMenu (Sliders icon as trigger) */}
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        type="button"
+                        className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
+                        aria-label="Control Panel"
                       >
-                        <DropdownMenuLabel>MCP Connections</DropdownMenuLabel>
-                        <DropdownMenuSeparator />
-                        {mcpConnections.length === 0 && (
-                            <span className="p-3 text-neutral-500 dark:text-neutral-400 text-sm select-none text-center w-full">No MCP servers available.</span>
-                        )}
-                        {mcpConnections.map((conn) => (
-                          <DropdownMenuItem key={conn.id} className="flex items-center justify-between w-full">
-                            <div className="flex items-center gap-2">
-                              <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
-                                {(conn.name || conn.url).charAt(0).toUpperCase()}
-                              </span>
-                              <span className="text-base text-neutral-900">{conn.name || conn.url}</span>
-                              <span
-                                className={`ml-4 text-xs font-medium lowercase tracking-wide align-middle
-                                  ${conn.connectionState === "ready"
-                                    ? "text-green-600"
-                                    : conn.connectionState === "authenticating"
-                                    ? "text-yellow-700"
-                                    : "text-red-600"}
-                                `}
-                              >
-                                {conn.connectionState}
-                              </span>
-                            </div>
-                            <button
-                              type="button"
-                              className="ml-2 text-red-500 hover:text-red-700 transition-colors cursor-pointer"
-                              onClick={e => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                handleRemoveMcpConnection(conn.id);
-                              }}
-                              aria-label="Remove MCP Server"
-                            >
-                              <Trash size={16} />
-                            </button>
-                          </DropdownMenuItem>
-                        ))}
-                        <DropdownMenuSeparator />
+                        <Sliders size={16} />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      align="start"
+                      side="top"
+                      className="bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 shadow-xl rounded-xl p-1 text-base font-medium text-neutral-900 dark:text-white"
+                    >
+                      <DropdownMenuLabel>MCP Connections</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      {mcpConnections.length === 0 && (
+                        <span className="p-3 text-neutral-500 dark:text-neutral-400 text-sm select-none text-center w-full">
+                          No MCP servers available.
+                        </span>
+                      )}
+                      {mcpConnections.map((conn) => (
                         <DropdownMenuItem
-                          onClick={() => setTimeout(() => setShowAddMcpDialog(true), 0)}
-                          className="bg-primary/5 text-primary rounded-lg font-semibold px-3 py-2 hover:bg-primary/10 transition-colors cursor-pointer"
+                          key={conn.id}
+                          className="flex items-center justify-between w-full"
                         >
-                          + Add MCP Server
+                          <div className="flex items-center gap-2">
+                            <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
+                              {(conn.name || conn.url).charAt(0).toUpperCase()}
+                            </span>
+                            <span className="text-base text-neutral-900">
+                              {conn.name || conn.url}
+                            </span>
+                            <span
+                              className={`ml-4 text-xs font-medium lowercase tracking-wide align-middle
+                                  ${
+                                    conn.connectionState === "ready"
+                                      ? "text-green-600"
+                                      : conn.connectionState ===
+                                          "authenticating"
+                                        ? "text-yellow-700"
+                                        : "text-red-600"
+                                  }
+                                `}
+                            >
+                              {conn.connectionState}
+                            </span>
+                          </div>
+                          <button
+                            type="button"
+                            className="ml-2 text-red-500 hover:text-red-700 transition-colors cursor-pointer"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              e.preventDefault();
+                              handleRemoveMcpConnection(conn.id);
+                            }}
+                            aria-label="Remove MCP Server"
+                          >
+                            <Trash size={16} />
+                          </button>
                         </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
+                      ))}
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        onClick={() =>
+                          setTimeout(() => setShowAddMcpDialog(true), 0)
+                        }
+                        className="bg-primary/5 text-primary rounded-lg font-semibold px-3 py-2 hover:bg-primary/10 transition-colors cursor-pointer"
+                      >
+                        + Add MCP Server
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
               </div>
               <div className="absolute bottom-0 right-0 p-2 w-fit flex flex-row justify-between">
                 {isLoading ? (
@@ -503,10 +537,12 @@ export default function Chat() {
                   </button>
                 ) : (
                   <div className="flex justify-between w-full">
-                      <button
+                    <button
                       type="submit"
                       className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
-                      disabled={pendingToolCallConfirmation || !agentInput.trim()}
+                      disabled={
+                        pendingToolCallConfirmation || !agentInput.trim()
+                      }
                       aria-label="Send message"
                     >
                       <PaperPlaneTilt size={16} />
@@ -596,21 +632,29 @@ function HasOpenAIKey() {
   return null;
 }
 
-function mapMcpServersToConnections(mcpServersState: any): McpConnection[] {
-  return Object.entries(mcpServersState.servers || {}).map(([id, c]: [string, any]) => ({
-    id,
-    url: c.server_url,
-    name: c.name,
-    connectionState: c.state,
-    authUrl: c.auth_url ?? undefined,
-    tools: Array.isArray(c.tools)
-      ? c.tools
-      : c.tools && typeof c.tools === "object"
-      ? Object.values(c.tools)
-      : c.capabilities && Array.isArray(c.capabilities.tools)
-      ? c.capabilities.tools
-      : c.capabilities && typeof c.capabilities.tools === "object"
-      ? Object.values(c.capabilities.tools)
-      : [],
-  }));
+function mapMcpServersToConnections(
+  mcpServersState: Record<string, unknown>
+): McpConnection[] {
+  return Object.entries((mcpServersState as { servers?: Record<string, unknown> }).servers || {}).map(
+    ([id, c]) => {
+      const server = c as Record<string, unknown>;
+      const capabilities = (server.capabilities as { tools?: unknown }) ?? {};
+      return {
+        id,
+        url: server.server_url as string,
+        name: server.name as string,
+        connectionState: server.state as string,
+        authUrl: (server.auth_url as string) ?? undefined,
+        tools: Array.isArray(server.tools)
+          ? server.tools
+          : server.tools && typeof server.tools === "object"
+            ? Object.values(server.tools)
+            : capabilities && Array.isArray(capabilities.tools)
+              ? capabilities.tools
+              : capabilities && typeof capabilities.tools === "object"
+                ? Object.values(capabilities.tools as object)
+                : [],
+      };
+    }
+  );
 }
diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index 483c52b..ef66759 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -9,14 +9,18 @@ import {
   DialogClose,
 } from "@/components/dialog/dialog";
 import { Button } from "@/components/button/Button";
-import { Input } from "@/components/input/Input";
+import { Input } from "@/components/input/input";
 interface AddMcpServerDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onSubmit: (data: { name: string; url: string; }) => void;
+  onSubmit: (data: { name: string; url: string }) => void;
 }
 
-export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServerDialogProps) {
+export function AddMcpServerDialog({
+  open,
+  onOpenChange,
+  onSubmit,
+}: AddMcpServerDialogProps) {
   const {
     register,
     handleSubmit,
@@ -48,7 +52,12 @@ export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServe
         </DialogHeader>
         <form className="space-y-4 py-2" onSubmit={handleSubmit(onFormSubmit)}>
           <div>
-            <label className="block text-sm font-medium mb-1" htmlFor="mcp-name">Name</label>
+            <label
+              className="block text-sm font-medium mb-1"
+              htmlFor="mcp-name"
+            >
+              Name
+            </label>
             <Input
               id="mcp-name"
               placeholder="Server Name"
@@ -56,11 +65,15 @@ export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServe
               {...register("name", { required: "Name is required" })}
             />
             {errors.name && (
-              <span className="text-red-500 text-xs mt-1 block">{errors.name.message}</span>
+              <span className="text-red-500 text-xs mt-1 block">
+                {errors.name.message}
+              </span>
             )}
           </div>
           <div>
-            <label className="block text-sm font-medium mb-1" htmlFor="mcp-url">URL</label>
+            <label className="block text-sm font-medium mb-1" htmlFor="mcp-url">
+              URL
+            </label>
             <Input
               id="mcp-url"
               placeholder="https://example.com"
@@ -74,12 +87,19 @@ export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServe
               })}
             />
             {errors.url && (
-              <span className="text-red-500 text-xs mt-1 block">{errors.url.message}</span>
+              <span className="text-red-500 text-xs mt-1 block">
+                {errors.url.message}
+              </span>
             )}
           </div>
           <DialogFooter>
             <DialogClose asChild>
-              <Button type="button" variant="secondary" onClick={handleCancel} disabled={isSubmitting}>
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={handleCancel}
+                disabled={isSubmitting}
+              >
                 Cancel
               </Button>
             </DialogClose>
@@ -91,4 +111,4 @@ export function AddMcpServerDialog({ open, onOpenChange, onSubmit }: AddMcpServe
       </DialogContent>
     </Dialog>
   );
-} 
\ No newline at end of file
+}
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index cfde7c1..9acb3f8 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -1,30 +1,30 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -40,7 +40,7 @@ function DialogOverlay({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -66,7 +66,7 @@ function DialogContent({
         </DialogPrimitive.Close>
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  );
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -76,7 +76,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -89,7 +89,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogTitle({
@@ -102,7 +102,7 @@ function DialogTitle({
       className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogDescription({
@@ -115,7 +115,7 @@ function DialogDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -129,4 +129,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};
diff --git a/src/components/dropdown/DropdownMenu.tsx b/src/components/dropdown/DropdownMenu.tsx
index af8c77a..0ed70b5 100644
--- a/src/components/dropdown/DropdownMenu.tsx
+++ b/src/components/dropdown/DropdownMenu.tsx
@@ -1,12 +1,12 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuPortal({
@@ -14,7 +14,7 @@ function DropdownMenuPortal({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return (
     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+  );
 }
 
 function DropdownMenuTrigger({
@@ -25,7 +25,7 @@ function DropdownMenuTrigger({
       data-slot="dropdown-menu-trigger"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuContent({
@@ -45,7 +45,7 @@ function DropdownMenuContent({
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  )
+  );
 }
 
 function DropdownMenuGroup({
@@ -53,7 +53,7 @@ function DropdownMenuGroup({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
   return (
     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+  );
 }
 
 function DropdownMenuItem({
@@ -62,8 +62,8 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -76,7 +76,7 @@ function DropdownMenuItem({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({
@@ -102,7 +102,7 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function DropdownMenuRadioGroup({
@@ -113,7 +113,7 @@ function DropdownMenuRadioGroup({
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuRadioItem({
@@ -137,7 +137,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function DropdownMenuLabel({
@@ -145,7 +145,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Label
@@ -157,7 +157,7 @@ function DropdownMenuLabel({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSeparator({
@@ -170,7 +170,7 @@ function DropdownMenuSeparator({
       className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuShortcut({
@@ -186,13 +186,13 @@ function DropdownMenuShortcut({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSub({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -201,7 +201,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
@@ -216,7 +216,7 @@ function DropdownMenuSubTrigger({
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function DropdownMenuSubContent({
@@ -232,7 +232,7 @@ function DropdownMenuSubContent({
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -251,4 +251,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index be963ed..677bc34 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -12,7 +12,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };
diff --git a/src/server.ts b/src/server.ts
index 6142069..66a2509 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -34,7 +34,6 @@ export class Chat extends AIChatAgent<Env> {
     onFinish: StreamTextOnFinishCallback<ToolSet>,
     options?: { abortSignal?: AbortSignal }
   ) {
-
     // Collect all tools, including MCP tools
     const allTools = {
       ...tools,
@@ -97,17 +96,34 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
   async onRequest(request: Request): Promise<Response> {
     const reqUrl = new URL(request.url);
     if (reqUrl.pathname.endsWith("add-mcp") && request.method === "POST") {
-      const mcpServer = (await request.json()) as { url: string; name: string; localUrl?: string };
-      const mcpConnection = await this.addMcpServer(mcpServer.name, mcpServer.url, this.env.APP_URL || "");
-      return new Response(JSON.stringify(mcpConnection), { status: 200, headers: { "Content-Type": "application/json" } });
+      const mcpServer = (await request.json()) as {
+        url: string;
+        name: string;
+        localUrl?: string;
+      };
+      const mcpConnection = await this.addMcpServer(
+        mcpServer.name,
+        mcpServer.url,
+        this.env.APP_URL || ""
+      );
+      return new Response(JSON.stringify(mcpConnection), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
     }
-    if (reqUrl.pathname.endsWith("get-mcp-connections") && request.method === "GET") {
+    if (
+      reqUrl.pathname.endsWith("get-mcp-connections") &&
+      request.method === "GET"
+    ) {
       const mcpConnections = this.mcp.mcpConnections;
       return new Response(JSON.stringify({ mcpConnections }), {
         headers: { "Content-Type": "application/json" },
       });
     }
-    if (reqUrl.pathname.endsWith("get-mcp-servers") && request.method === "GET") {
+    if (
+      reqUrl.pathname.endsWith("get-mcp-servers") &&
+      request.method === "GET"
+    ) {
       const mcpServers = this.getConnections();
       return new Response(JSON.stringify({ mcpServers }), {
         headers: { "Content-Type": "application/json" },
@@ -118,7 +134,10 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
         headers: { "Content-Type": "application/json" },
       });
     }
-    if (reqUrl.pathname.endsWith("remove-mcp-connection") && request.method === "POST") {
+    if (
+      reqUrl.pathname.endsWith("remove-mcp-connection") &&
+      request.method === "POST"
+    ) {
       const { id } = (await request.json()) as { id: string };
       await this.removeMcpServer(id);
       return new Response("Ok", { status: 200 });

From 6aba4c2621bebd3a2006656c5f6d0239877a65d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 16:33:10 +0200
Subject: [PATCH 25/40] refactor: improve MCP server connection mapping for
 clarity

- Enhanced the formatting of the mapMcpServersToConnections function for better readability.
- Maintained existing functionality while improving code structure and organization.
---
 src/app.tsx | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 09b5f87..4e48d49 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -635,26 +635,26 @@ function HasOpenAIKey() {
 function mapMcpServersToConnections(
   mcpServersState: Record<string, unknown>
 ): McpConnection[] {
-  return Object.entries((mcpServersState as { servers?: Record<string, unknown> }).servers || {}).map(
-    ([id, c]) => {
-      const server = c as Record<string, unknown>;
-      const capabilities = (server.capabilities as { tools?: unknown }) ?? {};
-      return {
-        id,
-        url: server.server_url as string,
-        name: server.name as string,
-        connectionState: server.state as string,
-        authUrl: (server.auth_url as string) ?? undefined,
-        tools: Array.isArray(server.tools)
-          ? server.tools
-          : server.tools && typeof server.tools === "object"
-            ? Object.values(server.tools)
-            : capabilities && Array.isArray(capabilities.tools)
-              ? capabilities.tools
-              : capabilities && typeof capabilities.tools === "object"
-                ? Object.values(capabilities.tools as object)
-                : [],
-      };
-    }
-  );
+  return Object.entries(
+    (mcpServersState as { servers?: Record<string, unknown> }).servers || {}
+  ).map(([id, c]) => {
+    const server = c as Record<string, unknown>;
+    const capabilities = (server.capabilities as { tools?: unknown }) ?? {};
+    return {
+      id,
+      url: server.server_url as string,
+      name: server.name as string,
+      connectionState: server.state as string,
+      authUrl: (server.auth_url as string) ?? undefined,
+      tools: Array.isArray(server.tools)
+        ? server.tools
+        : server.tools && typeof server.tools === "object"
+          ? Object.values(server.tools)
+          : capabilities && Array.isArray(capabilities.tools)
+            ? capabilities.tools
+            : capabilities && typeof capabilities.tools === "object"
+              ? Object.values(capabilities.tools as object)
+              : [],
+    };
+  });
 }

From 80dbbefa943a20892faa5e171a957ed807a923c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 16:37:13 +0200
Subject: [PATCH 26/40] refactor: update Input import in AddMcpServerDialog for
 clarity

- Changed the import statement for the Input component to use a type import for better clarity and maintainability.
- Ensured consistency in component imports within the AddMcpServerDialog file.
---
 src/components/AddMcpServerDialog.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index ef66759..f0f710c 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -9,7 +9,8 @@ import {
   DialogClose,
 } from "@/components/dialog/dialog";
 import { Button } from "@/components/button/Button";
-import { Input } from "@/components/input/input";
+import type { Input } from "./input/input";
+
 interface AddMcpServerDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;

From f6cad97a63cd39896a05d1115145908f257f343f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 16:39:49 +0200
Subject: [PATCH 27/40] refactor: update Input import path in
 AddMcpServerDialog for consistency

- Changed the import statement for the Input component to ensure it aligns with the project's component structure.
- Improved clarity and maintainability of the AddMcpServerDialog file by using the correct import path.
---
 src/components/AddMcpServerDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index f0f710c..3688bc0 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -9,7 +9,7 @@ import {
   DialogClose,
 } from "@/components/dialog/dialog";
 import { Button } from "@/components/button/Button";
-import type { Input } from "./input/input";
+import { Input } from "@/components/input/input";
 
 interface AddMcpServerDialogProps {
   open: boolean;

From b260b26d36f3cebfca3a28dfd8f8893424b2f3c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 16:43:47 +0200
Subject: [PATCH 28/40] refactor: correct Input import path in
 AddMcpServerDialog for consistency

- Updated the import statement for the Input component to match the correct casing in the file path.
- Ensured alignment with the project's component structure for improved maintainability.

From 4c97c08b7c457d082b52b4cfbef4163952ba55eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 16:46:05 +0200
Subject: [PATCH 29/40] refactor: correct Input import path in
 AddMcpServerDialog for consistency

- Updated the import statement for the Input component to match the correct casing in the file path.
- Ensured alignment with the project's component structure for improved maintainability.
---
 src/components/AddMcpServerDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index 3688bc0..5cdafee 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -9,7 +9,7 @@ import {
   DialogClose,
 } from "@/components/dialog/dialog";
 import { Button } from "@/components/button/Button";
-import { Input } from "@/components/input/input";
+import { Input } from "@/components/input/Input";
 
 interface AddMcpServerDialogProps {
   open: boolean;

From f7e8627161a374af0c8095be7c1319c6e92f6203 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 16:53:46 +0200
Subject: [PATCH 30/40] refactor: remove commented-out code in Chat component
 for clarity

- Eliminated unnecessary comments related to the Settings Icon Button and Control Panel DropdownMenu to enhance code readability.
- Improved overall cleanliness of the Chat component by removing outdated or redundant comments.
---
 src/app.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 4e48d49..6321a48 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -414,7 +414,6 @@ export default function Chat() {
           className="p-3 bg-neutral-50 absolute bottom-0 left-0 right-0 border-t border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900"
         >
           <div className="flex items-center gap-2">
-            {/* Settings Icon Button */}
             <div className="flex-1 relative">
               <Textarea
                 disabled={pendingToolCallConfirmation}
@@ -448,7 +447,6 @@ export default function Chat() {
               />
               <div className="absolute bottom-0 left-0 p-2 w-fit flex flex-row justify-between">
                 <div className="flex justify-between w-full">
-                  {/* Control Panel DropdownMenu (Sliders icon as trigger) */}
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <button

From 1607d0de6432252ab5f38d9d96c19cfcaeac8817 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 16:55:49 +0200
Subject: [PATCH 31/40] refactor: modularize MCP connection handling in Chat
 component

- Removed the inline mapMcpServersToConnections function from the Chat component for better organization.
- Imported the function from the mcp types module to enhance code clarity and maintainability.
- Updated type definitions for MCP connections to streamline the connection handling process.
---
 src/app.tsx      | 37 ++-----------------------------------
 src/lib/mcp.ts   | 28 ++++++++++++++++++++++++++++
 src/types/mcp.ts |  8 ++++++++
 3 files changed, 38 insertions(+), 35 deletions(-)
 create mode 100644 src/lib/mcp.ts
 create mode 100644 src/types/mcp.ts

diff --git a/src/app.tsx b/src/app.tsx
index 6321a48..836a9ea 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -47,14 +47,8 @@ if (!sessionId) {
   localStorage.setItem("sessionId", sessionId);
 }
 
-type McpConnection = {
-  id: string;
-  url: string;
-  name?: string;
-  connectionState: string;
-  authUrl?: string;
-  tools?: unknown[];
-};
+import type { McpConnection } from "./types/mcp";
+import { mapMcpServersToConnections } from "./lib/mcp";
 
 export default function Chat() {
   const [theme, setTheme] = useState<"dark" | "light">(() => {
@@ -629,30 +623,3 @@ function HasOpenAIKey() {
   }
   return null;
 }
-
-function mapMcpServersToConnections(
-  mcpServersState: Record<string, unknown>
-): McpConnection[] {
-  return Object.entries(
-    (mcpServersState as { servers?: Record<string, unknown> }).servers || {}
-  ).map(([id, c]) => {
-    const server = c as Record<string, unknown>;
-    const capabilities = (server.capabilities as { tools?: unknown }) ?? {};
-    return {
-      id,
-      url: server.server_url as string,
-      name: server.name as string,
-      connectionState: server.state as string,
-      authUrl: (server.auth_url as string) ?? undefined,
-      tools: Array.isArray(server.tools)
-        ? server.tools
-        : server.tools && typeof server.tools === "object"
-          ? Object.values(server.tools)
-          : capabilities && Array.isArray(capabilities.tools)
-            ? capabilities.tools
-            : capabilities && typeof capabilities.tools === "object"
-              ? Object.values(capabilities.tools as object)
-              : [],
-    };
-  });
-}
diff --git a/src/lib/mcp.ts b/src/lib/mcp.ts
new file mode 100644
index 0000000..84c16fe
--- /dev/null
+++ b/src/lib/mcp.ts
@@ -0,0 +1,28 @@
+import type { McpConnection } from "../types/mcp";
+
+export function mapMcpServersToConnections(
+  mcpServersState: Record<string, unknown>
+): McpConnection[] {
+  return Object.entries(
+    (mcpServersState as { servers?: Record<string, unknown> }).servers || {}
+  ).map(([id, c]) => {
+    const server = c as Record<string, unknown>;
+    const capabilities = (server.capabilities as { tools?: unknown }) ?? {};
+    return {
+      id,
+      url: server.server_url as string,
+      name: server.name as string,
+      connectionState: server.state as string,
+      authUrl: (server.auth_url as string) ?? undefined,
+      tools: Array.isArray(server.tools)
+        ? server.tools
+        : server.tools && typeof server.tools === "object"
+          ? Object.values(server.tools)
+          : capabilities && Array.isArray(capabilities.tools)
+            ? capabilities.tools
+            : capabilities && typeof capabilities.tools === "object"
+              ? Object.values(capabilities.tools as object)
+              : [],
+    };
+  });
+}
diff --git a/src/types/mcp.ts b/src/types/mcp.ts
new file mode 100644
index 0000000..17739ea
--- /dev/null
+++ b/src/types/mcp.ts
@@ -0,0 +1,8 @@
+export type McpConnection = {
+  id: string;
+  url: string;
+  name?: string;
+  connectionState: string;
+  authUrl?: string;
+  tools?: unknown[];
+};

From 710bd736967c99efb915b141e93ed15841632118 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 22:44:36 +0200
Subject: [PATCH 32/40] refactor: enhance layout of connection display in Chat
 component

- Adjusted the structure of the connection display to use a flex column layout for better organization.
- Improved styling by ensuring the connection name and state are clearly presented within a dedicated container.
- Enhanced readability and maintainability of the Chat component's UI.
---
 src/app.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 836a9ea..faf37b5 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -468,15 +468,16 @@ export default function Chat() {
                           key={conn.id}
                           className="flex items-center justify-between w-full"
                         >
-                          <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2 w-full">
                             <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
                               {(conn.name || conn.url).charAt(0).toUpperCase()}
                             </span>
-                            <span className="text-base text-neutral-900">
-                              {conn.name || conn.url}
-                            </span>
-                            <span
-                              className={`ml-4 text-xs font-medium lowercase tracking-wide align-middle
+                            <div className="flex flex-col">
+                              <span className="text-base text-neutral-900">
+                                {conn.name || conn.url}
+                              </span>
+                              <span
+                                className={`text-xs font-medium lowercase tracking-wide align-middle mt-0.5
                                   ${
                                     conn.connectionState === "ready"
                                       ? "text-green-600"
@@ -486,9 +487,10 @@ export default function Chat() {
                                         : "text-red-600"
                                   }
                                 `}
-                            >
-                              {conn.connectionState}
-                            </span>
+                              >
+                                {conn.connectionState}
+                              </span>
+                            </div>
                           </div>
                           <button
                             type="button"

From 135ec8f63a5db81812f2d5fe22928cb320cbbe17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 21 May 2025 22:59:10 +0200
Subject: [PATCH 33/40] feat: enhance UI and configuration for MCP server
 management

- Added new environment variables for application configuration, including APP_URL and ANTHROPIC_API_KEY.
- Improved styling in the Chat component for better visual feedback and accessibility in dark mode.
- Updated AddMcpServerDialog to enhance text visibility and consistency in dark mode.
- Refined Input component styles for improved user experience across themes.
---
 .dev.vars.example                     |  2 ++
 src/app.tsx                           | 14 +++++++-------
 src/components/AddMcpServerDialog.tsx | 16 ++++++++++------
 src/components/input/Input.tsx        |  2 +-
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/.dev.vars.example b/.dev.vars.example
index 238312e..fbe7dff 100644
--- a/.dev.vars.example
+++ b/.dev.vars.example
@@ -1,3 +1,5 @@
+APP_URL=https://wwww.example.com
 OPENAI_API_KEY=sk-proj-1234567890
+ANTHROPIC_API_KEY=your_api_key
 # Optional - Cloudflare AI Gateway https://developers.cloudflare.com/ai-gateway/
 # GATEWAY_BASE_URL=https://gateway.ai.cloudflare.com/v1/..
\ No newline at end of file
diff --git a/src/app.tsx b/src/app.tsx
index faf37b5..d47d47d 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -466,25 +466,25 @@ export default function Chat() {
                       {mcpConnections.map((conn) => (
                         <DropdownMenuItem
                           key={conn.id}
-                          className="flex items-center justify-between w-full"
+                          className="flex items-center justify-between w-full hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
                         >
                           <div className="flex items-center gap-2 w-full">
-                            <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 text-neutral-600 font-semibold text-xs border border-neutral-200 mr-2">
+                            <span className="flex items-center justify-center w-6 h-6 rounded bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300 font-semibold text-xs border border-neutral-200 dark:border-neutral-700 mr-2">
                               {(conn.name || conn.url).charAt(0).toUpperCase()}
                             </span>
                             <div className="flex flex-col">
-                              <span className="text-base text-neutral-900">
+                              <span className="text-base text-neutral-900 dark:text-neutral-50">
                                 {conn.name || conn.url}
                               </span>
                               <span
                                 className={`text-xs font-medium lowercase tracking-wide align-middle mt-0.5
                                   ${
                                     conn.connectionState === "ready"
-                                      ? "text-green-600"
+                                      ? "text-green-600 dark:text-green-400"
                                       : conn.connectionState ===
                                           "authenticating"
-                                        ? "text-yellow-700"
-                                        : "text-red-600"
+                                        ? "text-yellow-700 dark:text-yellow-400"
+                                        : "text-red-600 dark:text-red-400"
                                   }
                                 `}
                               >
@@ -494,7 +494,7 @@ export default function Chat() {
                           </div>
                           <button
                             type="button"
-                            className="ml-2 text-red-500 hover:text-red-700 transition-colors cursor-pointer"
+                            className="ml-2 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors cursor-pointer"
                             onClick={(e) => {
                               e.stopPropagation();
                               e.preventDefault();
diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index 5cdafee..964c8ec 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -46,15 +46,15 @@ export function AddMcpServerDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="bg-neutral-100 dark:bg-neutral-900">
         <DialogHeader>
-          <DialogTitle>Add MCP Server</DialogTitle>
-          <DialogDescription>
+          <DialogTitle className="dark:text-white">Add MCP Server</DialogTitle>
+          <DialogDescription className="dark:text-neutral-300">
             Enter the details for the new MCP server connection.
           </DialogDescription>
         </DialogHeader>
         <form className="space-y-4 py-2" onSubmit={handleSubmit(onFormSubmit)}>
           <div>
             <label
-              className="block text-sm font-medium mb-1"
+              className="block text-sm font-medium mb-1 text-neutral-900 dark:text-neutral-100"
               htmlFor="mcp-name"
             >
               Name
@@ -66,13 +66,16 @@ export function AddMcpServerDialog({
               {...register("name", { required: "Name is required" })}
             />
             {errors.name && (
-              <span className="text-red-500 text-xs mt-1 block">
+              <span className="text-red-500 dark:text-red-400 text-xs mt-1 block">
                 {errors.name.message}
               </span>
             )}
           </div>
           <div>
-            <label className="block text-sm font-medium mb-1" htmlFor="mcp-url">
+            <label
+              className="block text-sm font-medium mb-1 text-neutral-900 dark:text-neutral-100"
+              htmlFor="mcp-url"
+            >
               URL
             </label>
             <Input
@@ -88,7 +91,7 @@ export function AddMcpServerDialog({
               })}
             />
             {errors.url && (
-              <span className="text-red-500 text-xs mt-1 block">
+              <span className="text-red-500 dark:text-red-400 text-xs mt-1 block">
                 {errors.url.message}
               </span>
             )}
@@ -98,6 +101,7 @@ export function AddMcpServerDialog({
               <Button
                 type="button"
                 variant="secondary"
+                className="dark:bg-neutral-800 dark:border dark:border-neutral-600 dark:text-neutral-100"
                 onClick={handleCancel}
                 disabled={isSubmitting}
               >
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index 677bc34..cd590c7 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -6,7 +6,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-neutral-900 dark:file:text-neutral-100 placeholder:text-neutral-500 selection:bg-neutral-800 selection:text-neutral-100 dark:bg-neutral-900 flex h-9 w-full min-w-0 rounded-md border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900 px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm ring-offset-neutral-100 dark:ring-offset-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300 dark:focus-visible:ring-neutral-700 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-neutral-900",
+        "file:text-neutral-900 dark:file:text-neutral-100 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 selection:bg-neutral-800 selection:text-neutral-100 bg-neutral-50 dark:bg-neutral-800 flex h-9 w-full min-w-0 rounded-md border border-neutral-200 dark:border-neutral-600 px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm ring-offset-neutral-100 dark:ring-offset-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300 dark:focus-visible:ring-neutral-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-neutral-900 text-neutral-900 dark:text-neutral-100",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}

From 0c6e402762c27df77338b49b51d187690b8a1206 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Fri, 23 May 2025 10:09:53 +0200
Subject: [PATCH 34/40] chore: update @radix-ui/react-slot dependency and
 refactor button components in Chat

- Updated @radix-ui/react-slot from version 1.2.2 to 1.2.3 in package.json and package-lock.json.
- Refactored button elements in the Chat component to use a custom Button component for improved styling and consistency.
---
 package-lock.json | 60 +++++++++++++++++++++++++++++++++++++++++++----
 package.json      |  2 +-
 src/app.tsx       | 38 +++++++++++++++++-------------
 3 files changed, 78 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8a3af88..384390a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@radix-ui/react-avatar": "^1.1.9",
         "@radix-ui/react-dialog": "^1.1.13",
         "@radix-ui/react-dropdown-menu": "^2.1.14",
-        "@radix-ui/react-slot": "^1.2.2",
+        "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.4",
         "@types/marked": "^6.0.0",
         "agents": "^0.0.88",
@@ -1979,6 +1979,23 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.2.tgz",
+      "integrity": "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -2324,6 +2341,23 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.2.tgz",
+      "integrity": "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.6.tgz",
@@ -2427,6 +2461,23 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.2.tgz",
+      "integrity": "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.9.tgz",
@@ -2459,10 +2510,9 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.2.tgz",
-      "integrity": "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==",
-      "license": "MIT",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2"
       },
diff --git a/package.json b/package.json
index 1f321b4..a503b1d 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-dropdown-menu": "^2.1.14",
-    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.4",
     "@types/marked": "^6.0.0",
     "agents": "^0.0.88",
diff --git a/src/app.tsx b/src/app.tsx
index d47d47d..7d783d0 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -443,13 +443,14 @@ export default function Chat() {
                 <div className="flex justify-between w-full">
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <button
-                        type="button"
-                        className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
+                      <Button
+                        size="sm"
+                        shape="circular"
+                        className="border border-neutral-200 dark:border-neutral-800"
                         aria-label="Control Panel"
                       >
                         <Sliders size={16} />
-                      </button>
+                      </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="start"
@@ -492,9 +493,11 @@ export default function Chat() {
                               </span>
                             </div>
                           </div>
-                          <button
-                            type="button"
-                            className="ml-2 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors cursor-pointer"
+                          <Button
+                            variant="destructive"
+                            size="sm"
+                            shape="circular"
+                            className="ml-2"
                             onClick={(e) => {
                               e.stopPropagation();
                               e.preventDefault();
@@ -503,7 +506,7 @@ export default function Chat() {
                             aria-label="Remove MCP Server"
                           >
                             <Trash size={16} />
-                          </button>
+                          </Button>
                         </DropdownMenuItem>
                       ))}
                       <DropdownMenuSeparator />
@@ -521,26 +524,29 @@ export default function Chat() {
               </div>
               <div className="absolute bottom-0 right-0 p-2 w-fit flex flex-row justify-between">
                 {isLoading ? (
-                  <button
-                    type="button"
+                  <Button
+                    size="sm"
+                    shape="circular"
+                    className="border border-neutral-200 dark:border-neutral-800"
                     onClick={stop}
-                    className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
                     aria-label="Stop generation"
                   >
                     <Stop size={16} />
-                  </button>
+                  </Button>
                 ) : (
                   <div className="flex justify-between w-full">
-                    <button
-                      type="submit"
-                      className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
+                    <Button
+                      size="sm"
+                      shape="circular"
+                      className="border border-neutral-200 dark:border-neutral-800"
                       disabled={
                         pendingToolCallConfirmation || !agentInput.trim()
                       }
                       aria-label="Send message"
+                      type="submit"
                     >
                       <PaperPlaneTilt size={16} />
-                    </button>
+                    </Button>
                   </div>
                 )}
               </div>

From 1b82630753889069687cb3606888c69b8b7f4d3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Fri, 23 May 2025 10:46:55 +0200
Subject: [PATCH 35/40] refactor: replace label elements with custom Label
 component in AddMcpServerDialog

- Updated the AddMcpServerDialog to use a custom Label component for form fields, enhancing consistency and maintainability.
- Improved accessibility by ensuring required fields are clearly indicated and validation states are properly managed.
---
 src/components/AddMcpServerDialog.tsx | 75 ++++++++++++++-------------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index 964c8ec..dc0bbe3 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -10,6 +10,7 @@ import {
 } from "@/components/dialog/dialog";
 import { Button } from "@/components/button/Button";
 import { Input } from "@/components/input/Input";
+import { Label } from "@/components/label/Label";
 
 interface AddMcpServerDialogProps {
   open: boolean;
@@ -53,48 +54,50 @@ export function AddMcpServerDialog({
         </DialogHeader>
         <form className="space-y-4 py-2" onSubmit={handleSubmit(onFormSubmit)}>
           <div>
-            <label
-              className="block text-sm font-medium mb-1 text-neutral-900 dark:text-neutral-100"
+            <Label
               htmlFor="mcp-name"
+              title="Name"
+              required
+              isValid={!errors.name}
             >
-              Name
-            </label>
-            <Input
-              id="mcp-name"
-              placeholder="Server Name"
-              aria-invalid={!!errors.name}
-              {...register("name", { required: "Name is required" })}
-            />
-            {errors.name && (
-              <span className="text-red-500 dark:text-red-400 text-xs mt-1 block">
-                {errors.name.message}
-              </span>
-            )}
+              <Input
+                id="mcp-name"
+                placeholder="Server Name"
+                aria-invalid={!!errors.name}
+                {...register("name", { required: "Name is required" })}
+              />
+              {errors.name && (
+                <span className="text-red-500 dark:text-red-400 text-xs mt-1 block">
+                  {errors.name.message}
+                </span>
+              )}
+            </Label>
           </div>
           <div>
-            <label
-              className="block text-sm font-medium mb-1 text-neutral-900 dark:text-neutral-100"
+            <Label
               htmlFor="mcp-url"
+              title="URL"
+              required
+              isValid={!errors.url}
             >
-              URL
-            </label>
-            <Input
-              id="mcp-url"
-              placeholder="https://example.com"
-              aria-invalid={!!errors.url}
-              {...register("url", {
-                required: "URL is required",
-                pattern: {
-                  value: /^https?:\/\/.+$/,
-                  message: "Enter a valid URL (must start with http(s)://)",
-                },
-              })}
-            />
-            {errors.url && (
-              <span className="text-red-500 dark:text-red-400 text-xs mt-1 block">
-                {errors.url.message}
-              </span>
-            )}
+              <Input
+                id="mcp-url"
+                placeholder="https://example.com"
+                aria-invalid={!!errors.url}
+                {...register("url", {
+                  required: "URL is required",
+                  pattern: {
+                    value: /^https?:\/\/.+$/,
+                    message: "Enter a valid URL (must start with http(s)://)",
+                  },
+                })}
+              />
+              {errors.url && (
+                <span className="text-red-500 dark:text-red-400 text-xs mt-1 block">
+                  {errors.url.message}
+                </span>
+              )}
+            </Label>
           </div>
           <DialogFooter>
             <DialogClose asChild>

From 86622775b482c0d7e7a0f642e6e4d0bd28ff2bd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Fri, 23 May 2025 10:48:20 +0200
Subject: [PATCH 36/40] refactor: simplify Label component usage in
 AddMcpServerDialog

- Consolidated the Label component for the MCP URL input by removing unnecessary line breaks, enhancing readability and maintainability of the code.
- Maintained required field indication and validation state management for improved accessibility.
---
 src/components/AddMcpServerDialog.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index dc0bbe3..9320c87 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -74,12 +74,7 @@ export function AddMcpServerDialog({
             </Label>
           </div>
           <div>
-            <Label
-              htmlFor="mcp-url"
-              title="URL"
-              required
-              isValid={!errors.url}
-            >
+            <Label htmlFor="mcp-url" title="URL" required isValid={!errors.url}>
               <Input
                 id="mcp-url"
                 placeholder="https://example.com"

From 2d77e659c56a719569ae258a321edcaf5f854450 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Fri, 23 May 2025 10:51:23 +0200
Subject: [PATCH 37/40] refactor: remove destructive variant from Button in
 Chat component

- Eliminated the 'destructive' variant from the Button component in the Chat to streamline its appearance and functionality.
- Enhanced consistency in button styling across the Chat component.
---
 src/app.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app.tsx b/src/app.tsx
index 7d783d0..2623ad7 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -494,7 +494,6 @@ export default function Chat() {
                             </div>
                           </div>
                           <Button
-                            variant="destructive"
                             size="sm"
                             shape="circular"
                             className="ml-2"

From ac27c75fcd60d11a8f8aec22c16b093c2bec1912 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 27 Aug 2025 14:49:19 +0200
Subject: [PATCH 38/40] Fix formatting issues: unused variable and biome config

---
 biome.json                               |  1 +
 src/app.tsx                              | 30 ++++++++++++------------
 src/components/AddMcpServerDialog.tsx    | 12 +++++-----
 src/components/dialog/dialog.tsx         |  2 +-
 src/components/dropdown/DropdownMenu.tsx |  2 +-
 src/lib/mcp.ts                           |  2 +-
 src/server.ts                            |  8 +++----
 7 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/biome.json b/biome.json
index 88e3a63..fb766dd 100644
--- a/biome.json
+++ b/biome.json
@@ -11,6 +11,7 @@
   "files": {
     "ignoreUnknown": false,
     "includes": [
+      "**",
       "!node_modules",
       "!dist",
       "!./worker-configuration.d.ts",
diff --git a/src/app.tsx b/src/app.tsx
index 2623ad7..17e4198 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -21,7 +21,7 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuTrigger,
+  DropdownMenuTrigger
 } from "@/components/dropdown/DropdownMenu";
 
 // Icon imports
@@ -33,12 +33,12 @@ import {
   Trash,
   PaperPlaneTilt,
   Stop,
-  Sliders,
+  Sliders
 } from "@phosphor-icons/react";
 
 // List of tools that require human confirmation
 const toolsRequiringConfirmation: (keyof typeof tools)[] = [
-  "getWeatherInformation",
+  "getWeatherInformation"
 ];
 
 let sessionId = localStorage.getItem("sessionId");
@@ -95,7 +95,7 @@ export default function Chat() {
     name: sessionId ?? undefined,
     onMcpUpdate: (mcpServersState) => {
       setMcpConnections(mapMcpServersToConnections(mcpServersState));
-    },
+    }
   });
 
   const {
@@ -106,10 +106,10 @@ export default function Chat() {
     addToolResult,
     clearHistory,
     isLoading,
-    stop,
+    stop
   } = useAgentChat({
     agent,
-    maxSteps: 5,
+    maxSteps: 5
   });
 
   // Scroll to bottom when messages change
@@ -144,7 +144,7 @@ export default function Chat() {
   const handleAddMcpServer = async ({
     name,
     url,
-    localUrl,
+    localUrl
   }: {
     name: string;
     url: string;
@@ -155,11 +155,11 @@ export default function Chat() {
         host: agent.host,
         agent: "chat",
         name: sessionId!,
-        path: "add-mcp",
+        path: "add-mcp"
       },
       {
         method: "POST",
-        body: JSON.stringify({ url, name, localUrl }),
+        body: JSON.stringify({ url, name, localUrl })
       }
     );
     // Try to get authUrl from response
@@ -173,7 +173,7 @@ export default function Chat() {
       if (data?.authUrl) {
         openPopup(data.authUrl);
       }
-    } catch (e) {
+    } catch (_e) {
       // ignore if not JSON or no authUrl
     }
   };
@@ -184,11 +184,11 @@ export default function Chat() {
         host: agent.host,
         agent: "chat",
         name: sessionId!,
-        path: "remove-mcp-connection",
+        path: "remove-mcp-connection"
       },
       {
         method: "POST",
-        body: JSON.stringify({ id }),
+        body: JSON.stringify({ id })
       }
     );
   };
@@ -399,9 +399,9 @@ export default function Chat() {
             handleAgentSubmit(e, {
               data: {
                 annotations: {
-                  hello: "world",
-                },
-              },
+                  hello: "world"
+                }
+              }
             });
             setTextareaHeight("auto"); // Reset height after submission
           }}
diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index 9320c87..493530e 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -6,7 +6,7 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-  DialogClose,
+  DialogClose
 } from "@/components/dialog/dialog";
 import { Button } from "@/components/button/Button";
 import { Input } from "@/components/input/Input";
@@ -21,15 +21,15 @@ interface AddMcpServerDialogProps {
 export function AddMcpServerDialog({
   open,
   onOpenChange,
-  onSubmit,
+  onSubmit
 }: AddMcpServerDialogProps) {
   const {
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
-    reset,
+    reset
   } = useForm<{ name: string; url: string }>({
-    defaultValues: { name: "", url: "" },
+    defaultValues: { name: "", url: "" }
   });
 
   const onFormSubmit = async (data: { name: string; url: string }) => {
@@ -83,8 +83,8 @@ export function AddMcpServerDialog({
                   required: "URL is required",
                   pattern: {
                     value: /^https?:\/\/.+$/,
-                    message: "Enter a valid URL (must start with http(s)://)",
-                  },
+                    message: "Enter a valid URL (must start with http(s)://)"
+                  }
                 })}
               />
               {errors.url && (
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index 9acb3f8..ffe9485 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -128,5 +128,5 @@ export {
   DialogOverlay,
   DialogPortal,
   DialogTitle,
-  DialogTrigger,
+  DialogTrigger
 };
diff --git a/src/components/dropdown/DropdownMenu.tsx b/src/components/dropdown/DropdownMenu.tsx
index 0ed70b5..942b81c 100644
--- a/src/components/dropdown/DropdownMenu.tsx
+++ b/src/components/dropdown/DropdownMenu.tsx
@@ -250,5 +250,5 @@ export {
   DropdownMenuShortcut,
   DropdownMenuSub,
   DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
+  DropdownMenuSubContent
 };
diff --git a/src/lib/mcp.ts b/src/lib/mcp.ts
index 84c16fe..5c52438 100644
--- a/src/lib/mcp.ts
+++ b/src/lib/mcp.ts
@@ -22,7 +22,7 @@ export function mapMcpServersToConnections(
             ? capabilities.tools
             : capabilities && typeof capabilities.tools === "object"
               ? Object.values(capabilities.tools as object)
-              : [],
+              : []
     };
   });
 }
diff --git a/src/server.ts b/src/server.ts
index 64366db..d2404a2 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -108,7 +108,7 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
       );
       return new Response(JSON.stringify(mcpConnection), {
         status: 200,
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json" }
       });
     }
     if (
@@ -117,7 +117,7 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
     ) {
       const mcpConnections = this.mcp.mcpConnections;
       return new Response(JSON.stringify({ mcpConnections }), {
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json" }
       });
     }
     if (
@@ -126,12 +126,12 @@ If the user asks to schedule a task, use the schedule tool to schedule the task.
     ) {
       const mcpServers = this.getConnections();
       return new Response(JSON.stringify({ mcpServers }), {
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json" }
       });
     }
     if (reqUrl.pathname.endsWith("get-messages") && request.method === "GET") {
       return new Response(JSON.stringify(this.messages), {
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json" }
       });
     }
     if (

From c51c7d1d05140120994abf04540623a7081d9745 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 27 Aug 2025 14:54:54 +0200
Subject: [PATCH 39/40] Fix npm scripts to use npx for local package resolution

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index a503b1d..c7eaf9f 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,8 @@
     "deploy": "vite build && wrangler deploy",
     "test": "vitest",
     "types": "wrangler types",
-    "format": "prettier --write .",
-    "check": "prettier . --check && biome lint && tsc"
+    "format": "npx prettier --write .",
+    "check": "npx prettier . --check && npx @biomejs/biome lint && npx tsc --noEmit"
   },
   "keywords": [
     "cloudflare",

From 1b6f894ba79a521167777d4614a24cec3c1924df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gy=C3=B6rgy=20M=C3=A1rk=20Varga?=
 <gyorgy.varga@shiwaforce.com>
Date: Wed, 27 Aug 2025 14:58:37 +0200
Subject: [PATCH 40/40] Fix React ID uniqueness issues using useId hook

---
 src/app.tsx                           | 14 +++++++++-----
 src/components/AddMcpServerDialog.tsx | 11 +++++++----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 17e4198..541019e 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, useCallback, use } from "react";
+import { useEffect, useState, useRef, useCallback, use, useId } from "react";
 import { useAgent } from "agents/react";
 import { useAgentChat } from "agents/ai-react";
 import type { Message } from "@ai-sdk/react";
@@ -62,6 +62,9 @@ export default function Chat() {
   const [showAddMcpDialog, setShowAddMcpDialog] = useState(false);
   const [mcpConnections, setMcpConnections] = useState<McpConnection[]>([]);
 
+  // Generate unique IDs for SVG elements
+  const agentsIconId = useId();
+
   const scrollToBottom = useCallback(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, []);
@@ -213,13 +216,13 @@ export default function Chat() {
               data-icon="agents"
             >
               <title>Cloudflare Agents</title>
-              <symbol id="ai:local:agents" viewBox="0 0 80 79">
+              <symbol id={agentsIconId} viewBox="0 0 80 79">
                 <path
                   fill="currentColor"
                   d="M69.3 39.7c-3.1 0-5.8 2.1-6.7 5H48.3V34h4.6l4.5-2.5c1.1.8 2.5 1.2 3.9 1.2 3.8 0 7-3.1 7-7s-3.1-7-7-7-7 3.1-7 7c0 .9.2 1.8.5 2.6L51.9 30h-3.5V18.8h-.1c-1.3-1-2.9-1.6-4.5-1.9h-.2c-1.9-.3-3.9-.1-5.8.6-.4.1-.8.3-1.2.5h-.1c-.1.1-.2.1-.3.2-1.7 1-3 2.4-4 4 0 .1-.1.2-.1.2l-.3.6c0 .1-.1.1-.1.2v.1h-.6c-2.9 0-5.7 1.2-7.7 3.2-2.1 2-3.2 4.8-3.2 7.7 0 .7.1 1.4.2 2.1-1.3.9-2.4 2.1-3.2 3.5s-1.2 2.9-1.4 4.5c-.1 1.6.1 3.2.7 4.7s1.5 2.9 2.6 4c-.8 1.8-1.2 3.7-1.1 5.6 0 1.9.5 3.8 1.4 5.6s2.1 3.2 3.6 4.4c1.3 1 2.7 1.7 4.3 2.2v-.1q2.25.75 4.8.6h.1c0 .1.1.1.1.1.9 1.7 2.3 3 4 4 .1.1.2.1.3.2h.1c.4.2.8.4 1.2.5 1.4.6 3 .8 4.5.7.4 0 .8-.1 1.3-.1h.1c1.6-.3 3.1-.9 4.5-1.9V62.9h3.5l3.1 1.7c-.3.8-.5 1.7-.5 2.6 0 3.8 3.1 7 7 7s7-3.1 7-7-3.1-7-7-7c-1.5 0-2.8.5-3.9 1.2l-4.6-2.5h-4.6V48.7h14.3c.9 2.9 3.5 5 6.7 5 3.8 0 7-3.1 7-7s-3.1-7-7-7m-7.9-16.9c1.6 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.4-3 3-3m0 41.4c1.6 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.4-3 3-3M44.3 72c-.4.2-.7.3-1.1.3-.2 0-.4.1-.5.1h-.2c-.9.1-1.7 0-2.6-.3-1-.3-1.9-.9-2.7-1.7-.7-.8-1.3-1.7-1.6-2.7l-.3-1.5v-.7q0-.75.3-1.5c.1-.2.1-.4.2-.7s.3-.6.5-.9c0-.1.1-.1.1-.2.1-.1.1-.2.2-.3s.1-.2.2-.3c0 0 0-.1.1-.1l.6-.6-2.7-3.5c-1.3 1.1-2.3 2.4-2.9 3.9-.2.4-.4.9-.5 1.3v.1c-.1.2-.1.4-.1.6-.3 1.1-.4 2.3-.3 3.4-.3 0-.7 0-1-.1-2.2-.4-4.2-1.5-5.5-3.2-1.4-1.7-2-3.9-1.8-6.1q.15-1.2.6-2.4l.3-.6c.1-.2.2-.4.3-.5 0 0 0-.1.1-.1.4-.7.9-1.3 1.5-1.9 1.6-1.5 3.8-2.3 6-2.3q1.05 0 2.1.3v-4.5c-.7-.1-1.4-.2-2.1-.2-1.8 0-3.5.4-5.2 1.1-.7.3-1.3.6-1.9 1s-1.1.8-1.7 1.3c-.3.2-.5.5-.8.8-.6-.8-1-1.6-1.3-2.6-.2-1-.2-2 0-2.9.2-1 .6-1.9 1.3-2.6.6-.8 1.4-1.4 2.3-1.8l1.8-.9-.7-1.9c-.4-1-.5-2.1-.4-3.1s.5-2.1 1.1-2.9q.9-1.35 2.4-2.1c.9-.5 2-.8 3-.7.5 0 1 .1 1.5.2 1 .2 1.8.7 2.6 1.3s1.4 1.4 1.8 2.3l4.1-1.5c-.9-2-2.3-3.7-4.2-4.9q-.6-.3-.9-.6c.4-.7 1-1.4 1.6-1.9.8-.7 1.8-1.1 2.9-1.3.9-.2 1.7-.1 2.6 0 .4.1.7.2 1.1.3V72zm25-22.3c-1.6 0-3-1.3-3-3 0-1.6 1.3-3 3-3s3 1.3 3 3c0 1.6-1.3 3-3 3"
                 />
               </symbol>
-              <use href="#ai:local:agents" />
+              <use href={`#${agentsIconId}`} />
             </svg>
           </div>
 
@@ -562,6 +565,7 @@ const hasOpenAiKeyPromise = fetch("/check-open-ai-key").then((res) =>
 );
 
 function HasOpenAIKey() {
+  const warningIconId = useId();
   const hasOpenAiKey = use(hasOpenAiKeyPromise);
 
   if (!hasOpenAiKey.success) {
@@ -580,9 +584,9 @@ function HasOpenAIKey() {
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  aria-labelledby="warningIcon"
+                  aria-labelledby={warningIconId}
                 >
-                  <title id="warningIcon">Warning Icon</title>
+                  <title id={warningIconId}>Warning Icon</title>
                   <circle cx="12" cy="12" r="10" />
                   <line x1="12" y1="8" x2="12" y2="12" />
                   <line x1="12" y1="16" x2="12.01" y2="16" />
diff --git a/src/components/AddMcpServerDialog.tsx b/src/components/AddMcpServerDialog.tsx
index 493530e..72a7506 100644
--- a/src/components/AddMcpServerDialog.tsx
+++ b/src/components/AddMcpServerDialog.tsx
@@ -1,4 +1,5 @@
 import { useForm } from "react-hook-form";
+import { useId } from "react";
 import {
   Dialog,
   DialogContent,
@@ -23,6 +24,8 @@ export function AddMcpServerDialog({
   onOpenChange,
   onSubmit
 }: AddMcpServerDialogProps) {
+  const nameId = useId();
+  const urlId = useId();
   const {
     register,
     handleSubmit,
@@ -55,13 +58,13 @@ export function AddMcpServerDialog({
         <form className="space-y-4 py-2" onSubmit={handleSubmit(onFormSubmit)}>
           <div>
             <Label
-              htmlFor="mcp-name"
+              htmlFor={nameId}
               title="Name"
               required
               isValid={!errors.name}
             >
               <Input
-                id="mcp-name"
+                id={nameId}
                 placeholder="Server Name"
                 aria-invalid={!!errors.name}
                 {...register("name", { required: "Name is required" })}
@@ -74,9 +77,9 @@ export function AddMcpServerDialog({
             </Label>
           </div>
           <div>
-            <Label htmlFor="mcp-url" title="URL" required isValid={!errors.url}>
+            <Label htmlFor={urlId} title="URL" required isValid={!errors.url}>
               <Input
-                id="mcp-url"
+                id={urlId}
                 placeholder="https://example.com"
                 aria-invalid={!!errors.url}
                 {...register("url", {