From c83962e51d1f4ebae96fc87f3ffd251b5ef959c1 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 19 May 2025 17:37:20 +0000
Subject: [PATCH 01/15] Refactor layout

---
 .vscode/settings.json                 |  1 +
 chat/src/app/globals.css              |  4 +-
 chat/src/app/page.tsx                 | 22 +++----
 chat/src/components/ChatInterface.tsx | 94 ++++++++++++++-------------
 chat/src/components/MessageInput.tsx  |  5 +-
 chat/src/components/MessageList.tsx   |  8 +--
 6 files changed, 66 insertions(+), 68 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index ebfde9a..89d1965 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
     "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
\ No newline at end of file
diff --git a/chat/src/app/globals.css b/chat/src/app/globals.css
index 6349363..1b6f9ea 100644
--- a/chat/src/app/globals.css
+++ b/chat/src/app/globals.css
@@ -22,12 +22,12 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans);
 }
 
 /* Ensure the monospace font is loaded with proper spacing for terminal output */
 .font-mono {
-  font-family: 'Menlo', 'DejaVu Sans Mono', 'Consolas', 'Courier New', monospace;
+  font-family: "Menlo", "DejaVu Sans Mono", "Consolas", "Courier New", monospace;
   font-size: 0.9rem;
   letter-spacing: 0;
   line-height: 1.2;
diff --git a/chat/src/app/page.tsx b/chat/src/app/page.tsx
index 230d7c1..c5ce056 100644
--- a/chat/src/app/page.tsx
+++ b/chat/src/app/page.tsx
@@ -1,16 +1,14 @@
-import { Suspense } from 'react';
-import ChatInterface from '@/components/ChatInterface';
+import { Suspense } from "react";
+import ChatInterface from "@/components/ChatInterface";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-4 md:p-12">
-      <div className="w-full max-w-5xl">
-        <h1 className="text-3xl font-bold mb-6 text-center">AgentAPI Chat</h1>
-        {/* Use Suspense boundary for useSearchParams in ChatInterface */}
-        <Suspense fallback={<div className="text-center p-4">Loading chat interface...</div>}>
-          <ChatInterface />
-        </Suspense>
-      </div>
-    </main>
+    <Suspense
+      fallback={
+        <div className="text-center p-4">Loading chat interface...</div>
+      }
+    >
+      <ChatInterface />
+    </Suspense>
   );
-}
\ No newline at end of file
+}
diff --git a/chat/src/components/ChatInterface.tsx b/chat/src/components/ChatInterface.tsx
index 3dd2902..9800213 100644
--- a/chat/src/components/ChatInterface.tsx
+++ b/chat/src/components/ChatInterface.tsx
@@ -217,9 +217,10 @@ export default function ChatInterface() {
   };
 
   return (
-    <div className="flex flex-col h-[80vh] bg-gray-100 rounded-lg overflow-hidden border border-gray-300 shadow-lg w-full max-w-[95vw]">
-      <div className="p-3 bg-gray-800 text-white text-sm flex items-center justify-between">
-        <span>AgentAPI Chat</span>
+    <div className="flex flex-col h-svh">
+      <header className="p-3 dark:text-white text-sm flex items-center justify-between border-b">
+        <span className="font-medium">AgentAPI Chat</span>
+
         <div className="flex items-center space-x-3">
           <div className="flex items-center">
             <span
@@ -232,52 +233,53 @@ export default function ChatInterface() {
             <span>Status: {serverStatus}</span>
           </div>
         </div>
-      </div>
-
-      {(serverStatus === "offline" || serverStatus === "unknown") && (
-        <div className="bg-yellow-100 border-y border-yellow-400 text-yellow-800 px-4 py-3 flex items-center justify-between font-medium">
-          <div className="flex items-center">
-            <svg
-              className="w-5 h-5 mr-2"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
+      </header>
+
+      <main className="flex flex-1 flex-col w-full max-w-4xl mx-auto overflow-auto pb-4">
+        {(serverStatus === "offline" || serverStatus === "unknown") && (
+          <div className="bg-yellow-100 border-y border-yellow-400 text-yellow-800 px-4 py-3 flex items-center justify-between font-medium">
+            <div className="flex items-center">
+              <svg
+                className="w-5 h-5 mr-2"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              <span>
+                API server is offline. Please start the AgentAPI server.
+                Attempting to connect to: {agentAPIUrl || "N/A"}.
+              </span>
+            </div>
+            <button
+              onClick={() => window.location.reload()}
+              className="bg-yellow-200 px-3 py-1 rounded text-xs hover:bg-yellow-300"
             >
-              <path
-                fillRule="evenodd"
-                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                clipRule="evenodd"
-              />
-            </svg>
-            <span>
-              API server is offline. Please start the AgentAPI server.
-              Attempting to connect to: {agentAPIUrl || "N/A"}.
-            </span>
+              Retry Connection
+            </button>
           </div>
-          <button
-            onClick={() => window.location.reload()}
-            className="bg-yellow-200 px-3 py-1 rounded text-xs hover:bg-yellow-300"
-          >
-            Retry Connection
-          </button>
-        </div>
-      )}
-
-      {error && (
-        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-2 text-sm relative">
-          <span className="block sm:inline">{error}</span>
-          <button
-            onClick={() => setError(null)}
-            className="absolute top-0 bottom-0 right-0 px-4 py-2"
-          >
-            ×
-          </button>
-        </div>
-      )}
-
-      <MessageList messages={messages} loading={loading} />
+        )}
+
+        {error && (
+          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-2 text-sm relative">
+            <span className="block sm:inline">{error}</span>
+            <button
+              onClick={() => setError(null)}
+              className="absolute top-0 bottom-0 right-0 px-4 py-2"
+            >
+              ×
+            </button>
+          </div>
+        )}
 
-      <MessageInput onSendMessage={sendMessage} disabled={loading} />
+        <MessageList messages={messages} loading={loading} />
+        <MessageInput onSendMessage={sendMessage} disabled={loading} />
+      </main>
     </div>
   );
 }
diff --git a/chat/src/components/MessageInput.tsx b/chat/src/components/MessageInput.tsx
index 777f952..dbc7993 100644
--- a/chat/src/components/MessageInput.tsx
+++ b/chat/src/components/MessageInput.tsx
@@ -137,10 +137,7 @@ export default function MessageInput({
   }, [inputMode]);
 
   return (
-    <form
-      onSubmit={handleSubmit}
-      className="border-t border-gray-300 p-4 bg-white"
-    >
+    <form onSubmit={handleSubmit} className="bg-gray-900 p-4 rounded-lg border">
       <div className="flex flex-col">
         <div className="mb-2 flex items-center">
           <div className="flex rounded-lg overflow-hidden border border-gray-300">
diff --git a/chat/src/components/MessageList.tsx b/chat/src/components/MessageList.tsx
index 89ccf82..80933e2 100644
--- a/chat/src/components/MessageList.tsx
+++ b/chat/src/components/MessageList.tsx
@@ -94,17 +94,17 @@ export default function MessageList({
   );
 
   return (
-    <div className="flex-1 overflow-y-auto p-4 bg-white">
+    <div className="flex-1 overflow-y-auto py-4">
       {messages.map((message) => (
         <div
           key={message.id}
           className={`mb-4 ${message.role === "user" ? "text-right" : ""}`}
         >
           <div
-            className={`inline-block px-4 py-2 rounded-lg ${
+            className={`inline-block  rounded-lg ${
               message.role === "user"
-                ? "bg-blue-500 text-white rounded-tr-none max-w-[90%]"
-                : "bg-gray-200 text-gray-800 rounded-tl-none max-w-[90%] min-w-[640px]"
+                ? "bg-gray-800 text-white rounded max-w-[90%]"
+                : "max-w-[90%]"
             }`}
           >
             <div className="text-xs mb-1 font-bold text-left">

From cda65df8e757c0a33d3d1a36e456226e8475718b Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 19 May 2025 18:47:19 +0000
Subject: [PATCH 02/15] Refactor messages

---
 chat/bun.lock                         |  51 +++++++-
 chat/components.json                  |  21 +++
 chat/package.json                     |   9 +-
 chat/src/app/globals.css              | 126 +++++++++++++++---
 chat/src/components/ChatInterface.tsx |   2 +-
 chat/src/components/MessageInput.tsx  | 182 ++++++++++++--------------
 chat/src/components/MessageList.tsx   |  49 +++----
 chat/src/components/ui/button.tsx     |  59 +++++++++
 chat/src/components/ui/tabs.tsx       |  66 ++++++++++
 chat/src/lib/utils.ts                 |   6 +
 10 files changed, 417 insertions(+), 154 deletions(-)
 create mode 100644 chat/components.json
 create mode 100644 chat/src/components/ui/button.tsx
 create mode 100644 chat/src/components/ui/tabs.tsx
 create mode 100644 chat/src/lib/utils.ts

diff --git a/chat/bun.lock b/chat/bun.lock
index 69e6c89..e9d6211 100644
--- a/chat/bun.lock
+++ b/chat/bun.lock
@@ -4,9 +4,15 @@
     "": {
       "name": "chat",
       "dependencies": {
+        "@radix-ui/react-slot": "^1.2.2",
+        "@radix-ui/react-tabs": "^1.1.11",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.511.0",
         "next": "15.2.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "tailwind-merge": "^3.3.0",
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -18,6 +24,7 @@
         "eslint-config-next": "15.2.4",
         "gh-pages": "^6.3.0",
         "tailwindcss": "^4",
+        "tw-animate-css": "^1.3.0",
         "typescript": "^5",
       },
     },
@@ -125,6 +132,36 @@
 
     "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],
 
+    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
+
+    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.6", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.2", "@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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-PbhRFK4lIEw9ADonj48tiYWzkllz81TM7KVYyyMMw2cwHO7D5h4XKEblL8NlaRisTK3QTe6tBEhDccFUryxHBQ=="],
+
+    "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
+
+    "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
+
+    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
+
+    "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
+
+    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
+
+    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.2", "", { "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw=="],
+
+    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.9", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.6", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ZzrIFnMYHHCNqSNCsuN6l7wlewBEq0O0BCSBkabJMFXVO51LRUTq71gLP1UxFvmrXElqmPjA5VX7IqC9VpazAQ=="],
+
+    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.2", "", { "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" }, "optionalPeers": ["@types/react"] }, "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ=="],
+
+    "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-roving-focus": "1.1.9", "@radix-ui/react-use-controllable-state": "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-4FiKSVoXqPP/KfzlB7lwwqoFV6EPwkrrqGp9cUYXjwDYHhvpnqq79P+EPHKcdoTE7Rl8w/+6s9rTlsfXHES9GA=="],
+
+    "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
+
+    "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
+
+    "@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.2", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA=="],
+
+    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
+
     "@rtsao/scc": ["@rtsao/scc@1.1.0", "", {}, "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="],
 
     "@rushstack/eslint-patch": ["@rushstack/eslint-patch@1.11.0", "", {}, "sha512-zxnHvoMQVqewTJr/W4pKjF0bMGiKJv1WX7bSrkl46Hg0QjESbzBROWK0Wg4RphzSOS5Jiy7eFimmM3UgMrMZbQ=="],
@@ -283,8 +320,12 @@
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
+    "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
+
     "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
 
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
     "color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
 
     "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
@@ -579,6 +620,8 @@
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": "cli.js" }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
 
+    "lucide-react": ["lucide-react@0.511.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w=="],
+
     "make-dir": ["make-dir@3.1.0", "", { "dependencies": { "semver": "^6.0.0" } }, "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw=="],
 
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
@@ -737,6 +780,8 @@
 
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
 
+    "tailwind-merge": ["tailwind-merge@3.3.0", "", {}, "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ=="],
+
     "tailwindcss": ["tailwindcss@4.1.3", "", {}, "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g=="],
 
     "tapable": ["tapable@2.2.1", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="],
@@ -753,6 +798,8 @@
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "tw-animate-css": ["tw-animate-css@1.3.0", "", {}, "sha512-jrJ0XenzS9KVuDThJDvnhalbl4IYiMQ/XvpA0a2FL8KmlK+6CSMviO7ROY/I7z1NnUs5NnDhlM6fXmF40xPxzw=="],
+
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
 
     "typed-array-buffer": ["typed-array-buffer@1.0.3", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-typed-array": "^1.1.14" } }, "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw=="],
@@ -809,14 +856,10 @@
 
     "eslint-plugin-react/resolve": ["resolve@2.0.0-next.5", "", { "dependencies": { "is-core-module": "^2.13.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": "bin/resolve" }, "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA=="],
 
-    "eslint-plugin-react/semver": ["semver@6.3.1", "", { "bin": "bin/semver.js" }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
-
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "is-bun-module/semver": ["semver@7.7.1", "", { "bin": "bin/semver.js" }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
 
-    "make-dir/semver": ["semver@6.3.1", "", { "bin": "bin/semver.js" }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
-
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
     "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
diff --git a/chat/components.json b/chat/components.json
new file mode 100644
index 0000000..0f21f26
--- /dev/null
+++ b/chat/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/chat/package.json b/chat/package.json
index 4733e83..8548e3f 100644
--- a/chat/package.json
+++ b/chat/package.json
@@ -12,9 +12,15 @@
     "deploy-gh-pages": "GITHUB_PAGES=true next build && gh-pages -d out --nojekyll -e chat -f"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.11",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.511.0",
     "next": "15.2.4",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
@@ -26,6 +32,7 @@
     "eslint-config-next": "15.2.4",
     "gh-pages": "^6.3.0",
     "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.0",
     "typescript": "^5"
   }
 }
\ No newline at end of file
diff --git a/chat/src/app/globals.css b/chat/src/app/globals.css
index 1b6f9ea..9711daf 100644
--- a/chat/src/app/globals.css
+++ b/chat/src/app/globals.css
@@ -1,34 +1,122 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-sans);
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
 }
 
-/* Ensure the monospace font is loaded with proper spacing for terminal output */
-.font-mono {
-  font-family: "Menlo", "DejaVu Sans Mono", "Consolas", "Courier New", monospace;
-  font-size: 0.9rem;
-  letter-spacing: 0;
-  line-height: 1.2;
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
diff --git a/chat/src/components/ChatInterface.tsx b/chat/src/components/ChatInterface.tsx
index 9800213..0c69a26 100644
--- a/chat/src/components/ChatInterface.tsx
+++ b/chat/src/components/ChatInterface.tsx
@@ -235,7 +235,7 @@ export default function ChatInterface() {
         </div>
       </header>
 
-      <main className="flex flex-1 flex-col w-full max-w-4xl mx-auto overflow-auto pb-4">
+      <main className="flex flex-1 flex-col w-full max-w-4xl mx-auto overflow-auto pb-4 px-2">
         {(serverStatus === "offline" || serverStatus === "unknown") && (
           <div className="bg-yellow-100 border-y border-yellow-400 text-yellow-800 px-4 py-3 flex items-center justify-between font-medium">
             <div className="flex items-center">
diff --git a/chat/src/components/MessageInput.tsx b/chat/src/components/MessageInput.tsx
index dbc7993..cd9ff91 100644
--- a/chat/src/components/MessageInput.tsx
+++ b/chat/src/components/MessageInput.tsx
@@ -1,6 +1,9 @@
 "use client";
 
 import { useState, FormEvent, KeyboardEvent, useEffect, useRef } from "react";
+import { Button } from "./ui/button";
+import { SendIcon } from "lucide-react";
+import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
 
 interface MessageInputProps {
   onSendMessage: (message: string, type: "user" | "raw") => void;
@@ -18,7 +21,7 @@ export default function MessageInput({
   disabled = false,
 }: MessageInputProps) {
   const [message, setMessage] = useState("");
-  const [inputMode, setInputMode] = useState<"text" | "control">("text");
+  const [inputMode, setInputMode] = useState("text");
   const [sentChars, setSentChars] = useState<SentChar[]>([]);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const nextCharId = useRef(0);
@@ -126,65 +129,93 @@ export default function MessageInput({
     }
   };
 
-  // Keep focus on the textarea for capturing key events
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.focus();
-      if (inputMode === "control") {
-        setControlAreaFocused(true);
-      }
-    }
-  }, [inputMode]);
-
   return (
-    <form onSubmit={handleSubmit} className="bg-gray-900 p-4 rounded-lg border">
-      <div className="flex flex-col">
-        <div className="mb-2 flex items-center">
-          <div className="flex rounded-lg overflow-hidden border border-gray-300">
-            <button
-              type="button"
-              onClick={() => setInputMode("text")}
-              className={`px-3 py-1 text-sm font-medium ${
-                inputMode === "text"
-                  ? "bg-blue-500 text-white"
-                  : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-              }`}
-            >
-              Text
-            </button>
-            <button
-              type="button"
-              onClick={() => setInputMode("control")}
-              className={`px-3 py-1 text-sm font-medium ${
-                inputMode === "control"
-                  ? "bg-blue-500 text-white"
-                  : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-              }`}
-            >
-              Control
-            </button>
+    <Tabs value={inputMode} onValueChange={setInputMode}>
+      <form
+        onSubmit={handleSubmit}
+        className="rounded-lg border text-base shadow-sm placeholder:text-muted-foreground focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+      >
+        <div className="flex flex-col">
+          <div className="flex">
+            {inputMode === "control" && !disabled ? (
+              <div
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                ref={textareaRef as any}
+                tabIndex={0}
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onKeyDown={handleKeyDown as any}
+                onFocus={() => setControlAreaFocused(true)}
+                onBlur={() => setControlAreaFocused(false)}
+                className="cursor-text p-4 h-20 text-muted-foreground flex items-center justify-center w-full outline-none"
+              >
+                {controlAreaFocused
+                  ? "Press any key to send to terminal (arrows, Ctrl+C, Ctrl+R, etc.)"
+                  : "Click or focus this area to send keystrokes to terminal"}
+              </div>
+            ) : (
+              <textarea
+                autoFocus
+                ref={textareaRef}
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={"Type a message..."}
+                className="resize-none w-full text-sm outline-none p-4 h-20"
+              />
+            )}
           </div>
-          <span className="ml-3 text-xs text-gray-600">
-            Switch to <span className="font-medium">Control</span> mode to send
-            raw keystrokes (↑,↓,Tab,Ctrl+C,Ctrl+R) directly to the terminal
-          </span>
-        </div>
 
-        {inputMode === "control" && !disabled && (
-          <div className="mb-1 text-xs text-blue-600 font-mono flex justify-between">
-            <span>Control mode - keystrokes sent directly to terminal</span>
-            {sentChars.length > 0 && (
-              <div className="flex space-x-1">
+          <div className="flex items-center justify-between p-4">
+            <div className="flex items-center gap-3">
+              <TabsList>
+                <TabsTrigger
+                  value="text"
+                  onClick={() => {
+                    textareaRef.current?.focus();
+                  }}
+                >
+                  Text
+                </TabsTrigger>
+                <TabsTrigger
+                  value="control"
+                  onClick={() => {
+                    textareaRef.current?.focus();
+                  }}
+                >
+                  Control
+                </TabsTrigger>
+              </TabsList>
+
+              <span className="text-xs text-muted-foreground">
+                {inputMode === "text" ? (
+                  <>
+                    Switch to <span className="font-medium">Control</span> mode
+                    to send raw keystrokes (↑,↓,Tab,Ctrl+C,Ctrl+R) directly to
+                    the terminal
+                  </>
+                ) : (
+                  <>Control mode - keystrokes sent directly to terminal</>
+                )}
+              </span>
+            </div>
+
+            {inputMode === "text" && (
+              <Button
+                type="submit"
+                disabled={disabled || !message.trim()}
+                size="icon"
+                className="rounded-full"
+              >
+                <SendIcon />
+              </Button>
+            )}
+
+            {inputMode === "control" && !disabled && (
+              <div className="flex items-center gap-1">
                 {sentChars.map((char) => (
                   <span
                     key={char.id}
-                    className="font-mono px-1 bg-blue-100 rounded text-blue-800 transition-opacity"
-                    style={{
-                      opacity: Math.max(
-                        0,
-                        1 - (Date.now() - char.timestamp) / 2000
-                      ),
-                    }}
+                    className="size-9 rounded border font-mono font-medium text-xs flex items-center justify-center animate-pulse"
                   >
                     {char.char}
                   </span>
@@ -192,47 +223,8 @@ export default function MessageInput({
               </div>
             )}
           </div>
-        )}
-
-        <div className="flex">
-          {inputMode === "control" && !disabled ? (
-            <div
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              ref={textareaRef as any}
-              tabIndex={0}
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              onKeyDown={handleKeyDown as any}
-              onFocus={() => setControlAreaFocused(true)}
-              onBlur={() => setControlAreaFocused(false)}
-              className="flex-1 cursor-text border rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-500 bg-gray-50 border-blue-200 min-h-[3.5rem] flex items-center justify-center"
-            >
-              {controlAreaFocused
-                ? "Press any key to send to terminal (arrows, Ctrl+C, Ctrl+R, etc.)"
-                : "Click or focus this area to send keystrokes to terminal"}
-            </div>
-          ) : (
-            <>
-              <textarea
-                ref={textareaRef}
-                value={message}
-                onChange={(e) => setMessage(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder={"Type a message..."}
-                className="flex-1 resize-none border rounded-l-lg p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
-                rows={2}
-                disabled={disabled}
-              />
-              <button
-                type="submit"
-                disabled={disabled || !message.trim()}
-                className="bg-blue-500 text-white px-4 rounded-r-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Send
-              </button>
-            </>
-          )}
         </div>
-      </div>
-    </form>
+      </form>
+    </Tabs>
   );
 }
diff --git a/chat/src/components/MessageList.tsx b/chat/src/components/MessageList.tsx
index 80933e2..87e6967 100644
--- a/chat/src/components/MessageList.tsx
+++ b/chat/src/components/MessageList.tsx
@@ -70,55 +70,41 @@ export default function MessageList({
   }
 
   // Define a component for the animated dots
-  const LoadingDots = ({ darkMode = false }: { darkMode?: boolean }) => (
+  const LoadingDots = () => (
     <div className="flex space-x-1">
       <div
-        className={`w-2 h-2 rounded-full ${
-          darkMode ? "bg-gray-600" : "bg-white"
-        } animate-pulse`}
-        style={{ animationDelay: "0ms" }}
-      ></div>
+        className={`size-1 rounded-full bg-foreground animate-pulse [animation-delay:0ms]`}
+      />
       <div
-        className={`w-2 h-2 rounded-full ${
-          darkMode ? "bg-gray-600" : "bg-white"
-        } animate-pulse`}
-        style={{ animationDelay: "300ms" }}
-      ></div>
+        className={`size-1 rounded-full bg-foreground animate-pulse [animation-delay:300ms]`}
+      />
       <div
-        className={`w-2 h-2 rounded-full ${
-          darkMode ? "bg-gray-600" : "bg-white"
-        } animate-pulse`}
-        style={{ animationDelay: "600ms" }}
-      ></div>
+        className={`size-1 rounded-full bg-foreground animate-pulse [animation-delay:600ms]`}
+      />
     </div>
   );
 
   return (
-    <div className="flex-1 overflow-y-auto py-4">
+    <div className="flex-1 overflow-y-auto py-4 flex flex-col gap-4">
       {messages.map((message) => (
         <div
           key={message.id}
-          className={`mb-4 ${message.role === "user" ? "text-right" : ""}`}
+          className={`${message.role === "user" ? "text-right" : ""}`}
         >
           <div
-            className={`inline-block  rounded-lg ${
+            className={`inline-block rounded-lg ${
               message.role === "user"
-                ? "bg-gray-800 text-white rounded max-w-[90%]"
+                ? "bg-accent-foreground rounded-lg max-w-[90%] p-4 text-accent"
                 : "max-w-[90%]"
             }`}
           >
-            <div className="text-xs mb-1 font-bold text-left">
-              {message.role === "user" ? "You" : "AgentAPI"}
-            </div>
             <div
-              className={`whitespace-pre-wrap break-words text-left ${
+              className={`whitespace-pre-wrap break-words text-left text-sm ${
                 message.role === "user" ? "" : "font-mono"
               }`}
             >
               {message.role !== "user" && message.content === "" ? (
-                <div className="py-2">
-                  <LoadingDots darkMode={true} />
-                </div>
+                <LoadingDots />
               ) : (
                 message.content
               )}
@@ -129,13 +115,8 @@ export default function MessageList({
 
       {/* Loading indicator for message being sent */}
       {loading && (
-        <div className="mb-4 text-right">
-          <div className="inline-block px-4 py-2 rounded-lg bg-blue-500 text-white rounded-tr-none">
-            <div className="text-xs mb-1 font-bold text-left">You</div>
-            <div className="h-6 flex items-center">
-              <LoadingDots darkMode={false} />
-            </div>
-          </div>
+        <div className="w-fit self-end">
+          <LoadingDots />
         </div>
       )}
 
diff --git a/chat/src/components/ui/button.tsx b/chat/src/components/ui/button.tsx
new file mode 100644
index 0000000..a2df8dc
--- /dev/null
+++ b/chat/src/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all 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 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        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",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/chat/src/components/ui/tabs.tsx b/chat/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..497ba5e
--- /dev/null
+++ b/chat/src/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/chat/src/lib/utils.ts b/chat/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/chat/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

From c9a3077b3c12f76103efc4ec673438fe3a2ecf46 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 19 May 2025 18:54:38 +0000
Subject: [PATCH 03/15] Use sooner for errors

---
 chat/bun.lock                         |  6 ++++++
 chat/package.json                     |  2 ++
 chat/src/app/layout.tsx               |  4 +++-
 chat/src/components/ChatInterface.tsx | 30 +++++++--------------------
 chat/src/components/ui/sonner.tsx     | 25 ++++++++++++++++++++++
 5 files changed, 43 insertions(+), 24 deletions(-)
 create mode 100644 chat/src/components/ui/sonner.tsx

diff --git a/chat/bun.lock b/chat/bun.lock
index e9d6211..3de26a9 100644
--- a/chat/bun.lock
+++ b/chat/bun.lock
@@ -10,8 +10,10 @@
         "clsx": "^2.1.1",
         "lucide-react": "^0.511.0",
         "next": "15.2.4",
+        "next-themes": "^0.4.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "sonner": "^2.0.3",
         "tailwind-merge": "^3.3.0",
       },
       "devDependencies": {
@@ -642,6 +644,8 @@
 
     "next": ["next@15.2.4", "", { "dependencies": { "@next/env": "15.2.4", "@swc/counter": "0.1.3", "@swc/helpers": "0.5.15", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.2.4", "@next/swc-darwin-x64": "15.2.4", "@next/swc-linux-arm64-gnu": "15.2.4", "@next/swc-linux-arm64-musl": "15.2.4", "@next/swc-linux-x64-gnu": "15.2.4", "@next/swc-linux-x64-musl": "15.2.4", "@next/swc-win32-arm64-msvc": "15.2.4", "@next/swc-win32-x64-msvc": "15.2.4", "sharp": "^0.33.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.41.2", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": "dist/bin/next" }, "sha512-VwL+LAaPSxEkd3lU2xWbgEOtrM8oedmyhBqaVNmgKB+GvZlCy9rgaEc+y2on0wv+l0oSFqLtYD6dcC1eAedUaQ=="],
 
+    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
+
     "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
 
     "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="],
@@ -750,6 +754,8 @@
 
     "slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
 
+    "sonner": ["sonner@2.0.3", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-njQ4Hht92m0sMqqHVDL32V2Oun9W1+PHO9NDv9FHfJjT3JT22IG4Jpo3FPQy+mouRKCXFWO+r67v6MrHX2zeIA=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "stable-hash": ["stable-hash@0.0.5", "", {}, "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA=="],
diff --git a/chat/package.json b/chat/package.json
index 8548e3f..a185ce1 100644
--- a/chat/package.json
+++ b/chat/package.json
@@ -18,8 +18,10 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.511.0",
     "next": "15.2.4",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "sonner": "^2.0.3",
     "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {
diff --git a/chat/src/app/layout.tsx b/chat/src/app/layout.tsx
index 982c30e..14fc903 100644
--- a/chat/src/app/layout.tsx
+++ b/chat/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Toaster } from "@/components/ui/sonner";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -28,7 +29,8 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
+        <Toaster richColors />
       </body>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/chat/src/components/ChatInterface.tsx b/chat/src/components/ChatInterface.tsx
index 0c69a26..8ca72db 100644
--- a/chat/src/components/ChatInterface.tsx
+++ b/chat/src/components/ChatInterface.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import MessageList from "./MessageList";
 import MessageInput from "./MessageInput";
 import { useSearchParams } from "next/navigation";
+import { toast } from "sonner";
 
 interface Message {
   role: string;
@@ -149,8 +150,6 @@ export default function ChatInterface() {
     };
   }, [agentAPIUrl]);
 
-  const [error, setError] = useState<string | null>(null);
-
   // Send a new message
   const sendMessage = async (
     content: string,
@@ -159,9 +158,6 @@ export default function ChatInterface() {
     // For user messages, require non-empty content
     if (type === "user" && !content.trim()) return;
 
-    // Clear any previous errors
-    setError(null);
-
     // For raw messages, don't set loading state as it's usually fast
     if (type === "user") {
       setLoading(true);
@@ -190,9 +186,9 @@ export default function ChatInterface() {
             : "";
 
         const fullDetail = `${detail}: ${messages}`;
-        setError(`Failed to send message: ${fullDetail}`);
-        // Auto-clear error after 5 seconds
-        setTimeout(() => setError(null), 5000);
+        toast.error(`Failed to send message`, {
+          description: fullDetail,
+        });
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
@@ -206,9 +202,9 @@ export default function ChatInterface() {
 
       const fullDetail = `${detail}: ${messages}`;
 
-      setError(`Error sending message: ${fullDetail}`);
-      // Auto-clear error after 5 seconds
-      setTimeout(() => setError(null), 5000);
+      toast.error(`Error sending message`, {
+        description: fullDetail,
+      });
     } finally {
       if (type === "user") {
         setLoading(false);
@@ -265,18 +261,6 @@ export default function ChatInterface() {
           </div>
         )}
 
-        {error && (
-          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-2 text-sm relative">
-            <span className="block sm:inline">{error}</span>
-            <button
-              onClick={() => setError(null)}
-              className="absolute top-0 bottom-0 right-0 px-4 py-2"
-            >
-              ×
-            </button>
-          </div>
-        )}
-
         <MessageList messages={messages} loading={loading} />
         <MessageInput onSendMessage={sendMessage} disabled={loading} />
       </main>
diff --git a/chat/src/components/ui/sonner.tsx b/chat/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..957524e
--- /dev/null
+++ b/chat/src/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

From 775537a60b8900d064458aff42b835cd0aac8e89 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 19 May 2025 18:59:35 +0000
Subject: [PATCH 04/15] Better scroll style

---
 chat/src/components/ChatInterface.tsx |   2 +-
 chat/src/components/MessageInput.tsx  | 178 +++++++++++++-------------
 chat/src/components/MessageList.tsx   |  56 ++++----
 3 files changed, 120 insertions(+), 116 deletions(-)

diff --git a/chat/src/components/ChatInterface.tsx b/chat/src/components/ChatInterface.tsx
index 8ca72db..bce2a6b 100644
--- a/chat/src/components/ChatInterface.tsx
+++ b/chat/src/components/ChatInterface.tsx
@@ -231,7 +231,7 @@ export default function ChatInterface() {
         </div>
       </header>
 
-      <main className="flex flex-1 flex-col w-full max-w-4xl mx-auto overflow-auto pb-4 px-2">
+      <main className="flex flex-1 flex-col w-full overflow-auto">
         {(serverStatus === "offline" || serverStatus === "unknown") && (
           <div className="bg-yellow-100 border-y border-yellow-400 text-yellow-800 px-4 py-3 flex items-center justify-between font-medium">
             <div className="flex items-center">
diff --git a/chat/src/components/MessageInput.tsx b/chat/src/components/MessageInput.tsx
index cd9ff91..cd90778 100644
--- a/chat/src/components/MessageInput.tsx
+++ b/chat/src/components/MessageInput.tsx
@@ -131,100 +131,102 @@ export default function MessageInput({
 
   return (
     <Tabs value={inputMode} onValueChange={setInputMode}>
-      <form
-        onSubmit={handleSubmit}
-        className="rounded-lg border text-base shadow-sm placeholder:text-muted-foreground focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
-      >
-        <div className="flex flex-col">
-          <div className="flex">
-            {inputMode === "control" && !disabled ? (
-              <div
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                ref={textareaRef as any}
-                tabIndex={0}
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onKeyDown={handleKeyDown as any}
-                onFocus={() => setControlAreaFocused(true)}
-                onBlur={() => setControlAreaFocused(false)}
-                className="cursor-text p-4 h-20 text-muted-foreground flex items-center justify-center w-full outline-none"
-              >
-                {controlAreaFocused
-                  ? "Press any key to send to terminal (arrows, Ctrl+C, Ctrl+R, etc.)"
-                  : "Click or focus this area to send keystrokes to terminal"}
-              </div>
-            ) : (
-              <textarea
-                autoFocus
-                ref={textareaRef}
-                value={message}
-                onChange={(e) => setMessage(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder={"Type a message..."}
-                className="resize-none w-full text-sm outline-none p-4 h-20"
-              />
-            )}
-          </div>
-
-          <div className="flex items-center justify-between p-4">
-            <div className="flex items-center gap-3">
-              <TabsList>
-                <TabsTrigger
-                  value="text"
-                  onClick={() => {
-                    textareaRef.current?.focus();
-                  }}
-                >
-                  Text
-                </TabsTrigger>
-                <TabsTrigger
-                  value="control"
-                  onClick={() => {
-                    textareaRef.current?.focus();
-                  }}
+      <div className="max-w-4xl mx-auto w-full p-4 pt-0">
+        <form
+          onSubmit={handleSubmit}
+          className="rounded-lg border text-base shadow-sm placeholder:text-muted-foreground focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+        >
+          <div className="flex flex-col">
+            <div className="flex">
+              {inputMode === "control" && !disabled ? (
+                <div
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  ref={textareaRef as any}
+                  tabIndex={0}
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  onKeyDown={handleKeyDown as any}
+                  onFocus={() => setControlAreaFocused(true)}
+                  onBlur={() => setControlAreaFocused(false)}
+                  className="cursor-text p-4 h-20 text-muted-foreground flex items-center justify-center w-full outline-none"
                 >
-                  Control
-                </TabsTrigger>
-              </TabsList>
-
-              <span className="text-xs text-muted-foreground">
-                {inputMode === "text" ? (
-                  <>
-                    Switch to <span className="font-medium">Control</span> mode
-                    to send raw keystrokes (↑,↓,Tab,Ctrl+C,Ctrl+R) directly to
-                    the terminal
-                  </>
-                ) : (
-                  <>Control mode - keystrokes sent directly to terminal</>
-                )}
-              </span>
+                  {controlAreaFocused
+                    ? "Press any key to send to terminal (arrows, Ctrl+C, Ctrl+R, etc.)"
+                    : "Click or focus this area to send keystrokes to terminal"}
+                </div>
+              ) : (
+                <textarea
+                  autoFocus
+                  ref={textareaRef}
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={"Type a message..."}
+                  className="resize-none w-full text-sm outline-none p-4 h-20"
+                />
+              )}
             </div>
 
-            {inputMode === "text" && (
-              <Button
-                type="submit"
-                disabled={disabled || !message.trim()}
-                size="icon"
-                className="rounded-full"
-              >
-                <SendIcon />
-              </Button>
-            )}
-
-            {inputMode === "control" && !disabled && (
-              <div className="flex items-center gap-1">
-                {sentChars.map((char) => (
-                  <span
-                    key={char.id}
-                    className="size-9 rounded border font-mono font-medium text-xs flex items-center justify-center animate-pulse"
+            <div className="flex items-center justify-between p-4">
+              <div className="flex items-center gap-3">
+                <TabsList>
+                  <TabsTrigger
+                    value="text"
+                    onClick={() => {
+                      textareaRef.current?.focus();
+                    }}
                   >
-                    {char.char}
-                  </span>
-                ))}
+                    Text
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="control"
+                    onClick={() => {
+                      textareaRef.current?.focus();
+                    }}
+                  >
+                    Control
+                  </TabsTrigger>
+                </TabsList>
+
+                <span className="text-xs text-muted-foreground">
+                  {inputMode === "text" ? (
+                    <>
+                      Switch to <span className="font-medium">Control</span>{" "}
+                      mode to send raw keystrokes (↑,↓,Tab,Ctrl+C,Ctrl+R)
+                      directly to the terminal
+                    </>
+                  ) : (
+                    <>Control mode - keystrokes sent directly to terminal</>
+                  )}
+                </span>
               </div>
-            )}
+
+              {inputMode === "text" && (
+                <Button
+                  type="submit"
+                  disabled={disabled || !message.trim()}
+                  size="icon"
+                  className="rounded-full"
+                >
+                  <SendIcon />
+                </Button>
+              )}
+
+              {inputMode === "control" && !disabled && (
+                <div className="flex items-center gap-1">
+                  {sentChars.map((char) => (
+                    <span
+                      key={char.id}
+                      className="size-9 rounded border font-mono font-medium text-xs flex items-center justify-center animate-pulse"
+                    >
+                      {char.char}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      </form>
+        </form>
+      </div>
     </Tabs>
   );
 }
diff --git a/chat/src/components/MessageList.tsx b/chat/src/components/MessageList.tsx
index 87e6967..404e63d 100644
--- a/chat/src/components/MessageList.tsx
+++ b/chat/src/components/MessageList.tsx
@@ -85,42 +85,44 @@ export default function MessageList({
   );
 
   return (
-    <div className="flex-1 overflow-y-auto py-4 flex flex-col gap-4">
-      {messages.map((message) => (
-        <div
-          key={message.id}
-          className={`${message.role === "user" ? "text-right" : ""}`}
-        >
+    <div className="overflow-y-auto">
+      <div className="p-4 flex flex-col gap-4 max-w-4xl mx-auto">
+        {messages.map((message) => (
           <div
-            className={`inline-block rounded-lg ${
-              message.role === "user"
-                ? "bg-accent-foreground rounded-lg max-w-[90%] p-4 text-accent"
-                : "max-w-[90%]"
-            }`}
+            key={message.id}
+            className={`${message.role === "user" ? "text-right" : ""}`}
           >
             <div
-              className={`whitespace-pre-wrap break-words text-left text-sm ${
-                message.role === "user" ? "" : "font-mono"
+              className={`inline-block rounded-lg ${
+                message.role === "user"
+                  ? "bg-accent-foreground rounded-lg max-w-[90%] p-4 text-accent"
+                  : "max-w-[90%]"
               }`}
             >
-              {message.role !== "user" && message.content === "" ? (
-                <LoadingDots />
-              ) : (
-                message.content
-              )}
+              <div
+                className={`whitespace-pre-wrap break-words text-left text-sm ${
+                  message.role === "user" ? "" : "font-mono"
+                }`}
+              >
+                {message.role !== "user" && message.content === "" ? (
+                  <LoadingDots />
+                ) : (
+                  message.content
+                )}
+              </div>
             </div>
           </div>
-        </div>
-      ))}
+        ))}
 
-      {/* Loading indicator for message being sent */}
-      {loading && (
-        <div className="w-fit self-end">
-          <LoadingDots />
-        </div>
-      )}
+        {/* Loading indicator for message being sent */}
+        {loading && (
+          <div className="w-fit self-end">
+            <LoadingDots />
+          </div>
+        )}
 
-      <div ref={messagesEndRef} />
+        <div ref={messagesEndRef} />
+      </div>
     </div>
   );
 }

From d40f77897528c8113d8c06aa6627880dd41dbdad Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 19 May 2025 19:01:27 +0000
Subject: [PATCH 05/15] Improve accessibility

---
 chat/src/components/MessageInput.tsx | 1 +
 chat/src/components/MessageList.tsx  | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/chat/src/components/MessageInput.tsx b/chat/src/components/MessageInput.tsx
index cd90778..73ef1e7 100644
--- a/chat/src/components/MessageInput.tsx
+++ b/chat/src/components/MessageInput.tsx
@@ -208,6 +208,7 @@ export default function MessageInput({
                   className="rounded-full"
                 >
                   <SendIcon />
+                  <span className="sr-only">Send</span>
                 </Button>
               )}
 
diff --git a/chat/src/components/MessageList.tsx b/chat/src/components/MessageList.tsx
index 404e63d..49418db 100644
--- a/chat/src/components/MessageList.tsx
+++ b/chat/src/components/MessageList.tsx
@@ -73,14 +73,18 @@ export default function MessageList({
   const LoadingDots = () => (
     <div className="flex space-x-1">
       <div
+        aria-hidden="true"
         className={`size-1 rounded-full bg-foreground animate-pulse [animation-delay:0ms]`}
       />
       <div
+        aria-hidden="true"
         className={`size-1 rounded-full bg-foreground animate-pulse [animation-delay:300ms]`}
       />
       <div
+        aria-hidden="true"
         className={`size-1 rounded-full bg-foreground animate-pulse [animation-delay:600ms]`}
       />
+      <span className="sr-only">Loading...</span>
     </div>
   );
 

From eb38ea84cd965ffbe7f626e6745c8d6b89b692b4 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 19 May 2025 19:09:13 +0000
Subject: [PATCH 06/15] Refactor scroll

---
 chat/src/components/MessageList.tsx | 74 ++++++++++-------------------
 1 file changed, 26 insertions(+), 48 deletions(-)

diff --git a/chat/src/components/MessageList.tsx b/chat/src/components/MessageList.tsx
index 49418db..8503113 100644
--- a/chat/src/components/MessageList.tsx
+++ b/chat/src/components/MessageList.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import { useEffect, useRef } from "react";
-
 interface Message {
   role: string;
   content: string;
@@ -17,49 +15,6 @@ export default function MessageList({
   messages,
   loading = false,
 }: MessageListProps) {
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const prevMessagesLengthRef = useRef<number>(0);
-  const prevLoadingRef = useRef<boolean>(false);
-
-  // Enhanced scrolling behavior to handle:
-  // 1. New messages being added
-  // 2. Loading indicator appearing/disappearing
-  // 3. New user messages (to ensure they're always visible)
-  useEffect(() => {
-    const lastMessage = messages[messages.length - 1];
-    const isNewUserMessage =
-      messages.length > prevMessagesLengthRef.current &&
-      lastMessage?.role === "user";
-
-    const loadingChanged = loading !== prevLoadingRef.current;
-
-    // Store current scroll position and total scroll height
-    const messageContainer = messagesEndRef.current?.parentElement;
-    if (messagesEndRef.current && messageContainer) {
-      // Determine if we should force scroll
-      const shouldForceScroll =
-        isNewUserMessage || // New user message added
-        loading || // Loading indicator is active
-        loadingChanged; // Loading state changed
-
-      // Check if we're already near the bottom
-      const isNearBottom =
-        messageContainer.scrollHeight -
-          messageContainer.scrollTop -
-          messageContainer.clientHeight <
-        100;
-
-      // Scroll if we're forced to or if we're already near the bottom
-      if (shouldForceScroll || isNearBottom) {
-        messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
-      }
-    }
-
-    // Update references for next comparison
-    prevMessagesLengthRef.current = messages.length;
-    prevLoadingRef.current = loading;
-  }, [messages, loading]);
-
   // If no messages, show a placeholder
   if (messages.length === 0) {
     return (
@@ -89,7 +44,32 @@ export default function MessageList({
   );
 
   return (
-    <div className="overflow-y-auto">
+    <div
+      className="overflow-y-auto"
+      ref={(scrollAreaRef) => {
+        if (!scrollAreaRef) {
+          return;
+        }
+
+        scrollAreaRef.scrollTo({
+          top: scrollAreaRef.scrollHeight,
+        });
+
+        const callback: MutationCallback = (mutationsList) => {
+          for (const mutation of mutationsList) {
+            if (mutation.type === "childList") {
+              scrollAreaRef.scrollTo({
+                top: scrollAreaRef.scrollHeight,
+                behavior: "smooth",
+              });
+            }
+          }
+        };
+
+        const observer = new MutationObserver(callback);
+        observer.observe(scrollAreaRef, { childList: true, subtree: false });
+      }}
+    >
       <div className="p-4 flex flex-col gap-4 max-w-4xl mx-auto">
         {messages.map((message) => (
           <div
@@ -124,8 +104,6 @@ export default function MessageList({
             <LoadingDots />
           </div>
         )}
-
-        <div ref={messagesEndRef} />
       </div>
     </div>
   );

From b7a5fa0ec3137e097422131bce619d1fe9a0f28b Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 19 May 2025 20:32:54 +0000
Subject: [PATCH 07/15] Update alert

---
 chat/src/components/ChatInterface.tsx | 68 +++++++++++++--------------
 chat/src/components/ui/alert.tsx      | 66 ++++++++++++++++++++++++++
 2 files changed, 99 insertions(+), 35 deletions(-)
 create mode 100644 chat/src/components/ui/alert.tsx

diff --git a/chat/src/components/ChatInterface.tsx b/chat/src/components/ChatInterface.tsx
index bce2a6b..e67cd73 100644
--- a/chat/src/components/ChatInterface.tsx
+++ b/chat/src/components/ChatInterface.tsx
@@ -5,6 +5,9 @@ import MessageList from "./MessageList";
 import MessageInput from "./MessageInput";
 import { useSearchParams } from "next/navigation";
 import { toast } from "sonner";
+import { Button } from "./ui/button";
+import { TriangleAlertIcon } from "lucide-react";
+import { Alert, AlertTitle, AlertDescription } from "./ui/alert";
 
 interface Message {
   role: string;
@@ -214,50 +217,45 @@ export default function ChatInterface() {
 
   return (
     <div className="flex flex-col h-svh">
-      <header className="p-3 dark:text-white text-sm flex items-center justify-between border-b">
-        <span className="font-medium">AgentAPI Chat</span>
+      <header className="p-3 dark:text-white flex items-center justify-between border-b">
+        <span className="font-bold">AgentAPI Chat</span>
 
-        <div className="flex items-center space-x-3">
-          <div className="flex items-center">
+        {serverStatus !== "unknown" && (
+          <div className="flex items-center gap-2 text-sm font-medium">
             <span
-              className={`w-2 h-2 rounded-full mr-2 ${
+              className={`text-secondary w-2 h-2 rounded-full ${
                 ["offline", "unknown"].includes(serverStatus)
-                  ? "bg-red-500"
-                  : "bg-green-500"
+                  ? "bg-red-500 ring-2 ring-red-500/35"
+                  : "bg-green-500 ring-2 ring-green-500/35"
               }`}
-            ></span>
-            <span>Status: {serverStatus}</span>
+            />
+            <span className="sr-only">Status:</span>
+            <span className="first-letter:uppercase">{serverStatus}</span>
           </div>
-        </div>
+        )}
       </header>
 
       <main className="flex flex-1 flex-col w-full overflow-auto">
-        {(serverStatus === "offline" || serverStatus === "unknown") && (
-          <div className="bg-yellow-100 border-y border-yellow-400 text-yellow-800 px-4 py-3 flex items-center justify-between font-medium">
-            <div className="flex items-center">
-              <svg
-                className="w-5 h-5 mr-2"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
+        {serverStatus === "offline" && (
+          <div className="p-4 w-full max-w-4xl mx-auto">
+            <Alert className="flex border-yellow-500">
+              <TriangleAlertIcon className="h-4 w-4  stroke-yellow-600" />
+              <div>
+                <AlertTitle>API server is offline</AlertTitle>
+                <AlertDescription>
+                  Please start the AgentAPI server. Attempting to connect to:{" "}
+                  {agentAPIUrl || "N/A"}.
+                </AlertDescription>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="ml-auto"
+                onClick={() => window.location.reload()}
               >
-                <path
-                  fillRule="evenodd"
-                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                  clipRule="evenodd"
-                />
-              </svg>
-              <span>
-                API server is offline. Please start the AgentAPI server.
-                Attempting to connect to: {agentAPIUrl || "N/A"}.
-              </span>
-            </div>
-            <button
-              onClick={() => window.location.reload()}
-              className="bg-yellow-200 px-3 py-1 rounded text-xs hover:bg-yellow-300"
-            >
-              Retry Connection
-            </button>
+                Retry
+              </Button>
+            </Alert>
           </div>
         )}
 
diff --git a/chat/src/components/ui/alert.tsx b/chat/src/components/ui/alert.tsx
new file mode 100644
index 0000000..1421354
--- /dev/null
+++ b/chat/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

From f5f35ce7640bd493bf92694f41ab6969b0bfed90 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 19 May 2025 20:37:52 +0000
Subject: [PATCH 08/15] Add theme

---
 chat/bun.lock                            |  49 +++++
 chat/package.json                        |   1 +
 chat/src/app/layout.tsx                  |  14 +-
 chat/src/components/ChatInterface.tsx    |  30 +--
 chat/src/components/mode-toggle.tsx      |  40 ++++
 chat/src/components/theme-provider.tsx   |  11 +
 chat/src/components/ui/dropdown-menu.tsx | 257 +++++++++++++++++++++++
 7 files changed, 386 insertions(+), 16 deletions(-)
 create mode 100644 chat/src/components/mode-toggle.tsx
 create mode 100644 chat/src/components/theme-provider.tsx
 create mode 100644 chat/src/components/ui/dropdown-menu.tsx

diff --git a/chat/bun.lock b/chat/bun.lock
index 3de26a9..679db54 100644
--- a/chat/bun.lock
+++ b/chat/bun.lock
@@ -4,6 +4,7 @@
     "": {
       "name": "chat",
       "dependencies": {
+        "@radix-ui/react-dropdown-menu": "^2.1.14",
         "@radix-ui/react-slot": "^1.2.2",
         "@radix-ui/react-tabs": "^1.1.11",
         "class-variance-authority": "^0.7.1",
@@ -58,6 +59,14 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.2.8", "", { "dependencies": { "@eslint/core": "^0.13.0", "levn": "^0.4.1" } }, "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA=="],
 
+    "@floating-ui/core": ["@floating-ui/core@1.7.0", "", { "dependencies": { "@floating-ui/utils": "^0.2.9" } }, "sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA=="],
+
+    "@floating-ui/dom": ["@floating-ui/dom@1.7.0", "", { "dependencies": { "@floating-ui/core": "^1.7.0", "@floating-ui/utils": "^0.2.9" } }, "sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg=="],
+
+    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.2", "", { "dependencies": { "@floating-ui/dom": "^1.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A=="],
+
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
@@ -136,6 +145,8 @@
 
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
 
+    "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.6", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-2JMfHJf/eVnwq+2dewT3C0acmCWD3XiVA1Da+jTDqo342UlU13WvXtqHhG+yJw5JeQmu4ue2eMy6gcEArLBlcw=="],
+
     "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.6", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.2", "@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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-PbhRFK4lIEw9ADonj48tiYWzkllz81TM7KVYyyMMw2cwHO7D5h4XKEblL8NlaRisTK3QTe6tBEhDccFUryxHBQ=="],
 
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
@@ -144,8 +155,22 @@
 
     "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
 
+    "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.9", "", { "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-way197PiTvNp+WBP7svMJasHl+vibhWGQDb6Mgf5mhEWJkgb85z7Lfl9TUdkqpWsf8GRNmoopx9ZxCyDzmgRMQ=="],
+
+    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.14", "", { "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-id": "1.1.1", "@radix-ui/react-menu": "2.1.14", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-controllable-state": "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-lzuyNjoWOoaMFE/VC5FnAAYM16JmQA8ZmucOXtlhm2kKR5TSU95YLAueQ4JYuRmUJmBvSqXaVFGIfuukybwZJQ=="],
+
+    "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA=="],
+
+    "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.6", "", { "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-r9zpYNUQY+2jWHWZGyddQLL9YHkM/XvSFHVcWs7bdVuxMAnCwTAuy6Pf47Z4nw7dYcUou1vg/VgjjrrH03VeBw=="],
+
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
+    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.14", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.6", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@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-popper": "1.2.6", "@radix-ui/react-portal": "1.1.8", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-roving-focus": "1.1.9", "@radix-ui/react-slot": "1.2.2", "@radix-ui/react-use-callback-ref": "1.1.1", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0zSiBAIFq9GSKoSH5PdEaQeRB3RnEGxC+H2P0egtnKoKKLNBH8VBHyVO6/jskhjAezhOIplyRUj7U2lds9A+Yg=="],
+
+    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.6", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.6", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7iqXaOWIjDBfIG7aq8CUEeCSsQMLFdn7VEE8TaFz704DtEzpPHR7w/uuzRflvKgltqSAImgcmxQ7fFX3X7wasg=="],
+
+    "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.8", "", { "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-hQsTUIn7p7fxCPvao/q6wpbxmCwgLrlz+nOrJgC+RwfZqWY/WN+UMqkXzrtKbPrF82P43eCTl3ekeKuyAQbFeg=="],
+
     "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
 
     "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.2", "", { "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw=="],
@@ -162,8 +187,16 @@
 
     "@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.2", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA=="],
 
+    "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
+
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
+    "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
+
+    "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
+
+    "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
+
     "@rtsao/scc": ["@rtsao/scc@1.1.0", "", {}, "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="],
 
     "@rushstack/eslint-patch": ["@rushstack/eslint-patch@1.11.0", "", {}, "sha512-zxnHvoMQVqewTJr/W4pKjF0bMGiKJv1WX7bSrkl46Hg0QjESbzBROWK0Wg4RphzSOS5Jiy7eFimmM3UgMrMZbQ=="],
@@ -270,6 +303,8 @@
 
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
 
+    "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
+
     "aria-query": ["aria-query@5.3.2", "", {}, "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="],
 
     "array-buffer-byte-length": ["array-buffer-byte-length@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "is-array-buffer": "^3.0.5" } }, "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw=="],
@@ -364,6 +399,8 @@
 
     "detect-libc": ["detect-libc@2.0.3", "", {}, "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw=="],
 
+    "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
+
     "dir-glob": ["dir-glob@3.0.1", "", { "dependencies": { "path-type": "^4.0.0" } }, "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA=="],
 
     "doctrine": ["doctrine@2.1.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw=="],
@@ -466,6 +503,8 @@
 
     "get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="],
 
+    "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
+
     "get-proto": ["get-proto@1.0.1", "", { "dependencies": { "dunder-proto": "^1.0.1", "es-object-atoms": "^1.0.0" } }, "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g=="],
 
     "get-symbol-description": ["get-symbol-description@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6" } }, "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg=="],
@@ -706,6 +745,12 @@
 
     "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
+    "react-remove-scroll": ["react-remove-scroll@2.7.0", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-sGsQtcjMqdQyijAHytfGEELB8FufGbfXIsvUTe+NLx1GDRJCXtCFLBLUI1eyZCKXXvbEU2C6gai0PZKoIE9Vbg=="],
+
+    "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
+
+    "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
+
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
 
     "regexp.prototype.flags": ["regexp.prototype.flags@1.5.4", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-errors": "^1.3.0", "get-proto": "^1.0.1", "gopd": "^1.2.0", "set-function-name": "^2.0.2" } }, "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA=="],
@@ -828,6 +873,10 @@
 
     "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
 
+    "use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],
+
+    "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
+
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
 
     "which-boxed-primitive": ["which-boxed-primitive@1.1.1", "", { "dependencies": { "is-bigint": "^1.1.0", "is-boolean-object": "^1.2.1", "is-number-object": "^1.1.1", "is-string": "^1.1.1", "is-symbol": "^1.1.1" } }, "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA=="],
diff --git a/chat/package.json b/chat/package.json
index a185ce1..b2e9358 100644
--- a/chat/package.json
+++ b/chat/package.json
@@ -12,6 +12,7 @@
     "deploy-gh-pages": "GITHUB_PAGES=true next build && gh-pages -d out --nojekyll -e chat -f"
   },
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.14",
     "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-tabs": "^1.1.11",
     "class-variance-authority": "^0.7.1",
diff --git a/chat/src/app/layout.tsx b/chat/src/app/layout.tsx
index 14fc903..7b9fbd1 100644
--- a/chat/src/app/layout.tsx
+++ b/chat/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Toaster } from "@/components/ui/sonner";
+import { ThemeProvider } from "@/components/theme-provider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -24,12 +25,19 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
-        <Toaster richColors />
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+          <Toaster richColors />
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/chat/src/components/ChatInterface.tsx b/chat/src/components/ChatInterface.tsx
index e67cd73..99c4aa4 100644
--- a/chat/src/components/ChatInterface.tsx
+++ b/chat/src/components/ChatInterface.tsx
@@ -8,6 +8,7 @@ import { toast } from "sonner";
 import { Button } from "./ui/button";
 import { TriangleAlertIcon } from "lucide-react";
 import { Alert, AlertTitle, AlertDescription } from "./ui/alert";
+import { ModeToggle } from "./mode-toggle";
 
 interface Message {
   role: string;
@@ -220,19 +221,22 @@ export default function ChatInterface() {
       <header className="p-3 dark:text-white flex items-center justify-between border-b">
         <span className="font-bold">AgentAPI Chat</span>
 
-        {serverStatus !== "unknown" && (
-          <div className="flex items-center gap-2 text-sm font-medium">
-            <span
-              className={`text-secondary w-2 h-2 rounded-full ${
-                ["offline", "unknown"].includes(serverStatus)
-                  ? "bg-red-500 ring-2 ring-red-500/35"
-                  : "bg-green-500 ring-2 ring-green-500/35"
-              }`}
-            />
-            <span className="sr-only">Status:</span>
-            <span className="first-letter:uppercase">{serverStatus}</span>
-          </div>
-        )}
+        <div className="flex items-center gap-4">
+          {serverStatus !== "unknown" && (
+            <div className="flex items-center gap-2 text-sm font-medium">
+              <span
+                className={`text-secondary w-2 h-2 rounded-full ${
+                  ["offline", "unknown"].includes(serverStatus)
+                    ? "bg-red-500 ring-2 ring-red-500/35"
+                    : "bg-green-500 ring-2 ring-green-500/35"
+                }`}
+              />
+              <span className="sr-only">Status:</span>
+              <span className="first-letter:uppercase">{serverStatus}</span>
+            </div>
+          )}
+          <ModeToggle />
+        </div>
       </header>
 
       <main className="flex flex-1 flex-col w-full overflow-auto">
diff --git a/chat/src/components/mode-toggle.tsx b/chat/src/components/mode-toggle.tsx
new file mode 100644
index 0000000..9264016
--- /dev/null
+++ b/chat/src/components/mode-toggle.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/chat/src/components/theme-provider.tsx b/chat/src/components/theme-provider.tsx
new file mode 100644
index 0000000..189a2b1
--- /dev/null
+++ b/chat/src/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/chat/src/components/ui/dropdown-menu.tsx b/chat/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..ec51e9c
--- /dev/null
+++ b/chat/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+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,
+}

From 5585adb05b203a0e98817e08f727031f3e45f032 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 19 May 2025 20:44:20 +0000
Subject: [PATCH 09/15] Fix a few styles

---
 chat/src/components/ChatInterface.tsx |  2 +-
 chat/src/components/MessageList.tsx   |  4 ++--
 chat/src/components/ui/tabs.tsx       | 18 +++++++++---------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/chat/src/components/ChatInterface.tsx b/chat/src/components/ChatInterface.tsx
index 99c4aa4..048e1df 100644
--- a/chat/src/components/ChatInterface.tsx
+++ b/chat/src/components/ChatInterface.tsx
@@ -218,7 +218,7 @@ export default function ChatInterface() {
 
   return (
     <div className="flex flex-col h-svh">
-      <header className="p-3 dark:text-white flex items-center justify-between border-b">
+      <header className="p-4 flex items-center justify-between border-b">
         <span className="font-bold">AgentAPI Chat</span>
 
         <div className="flex items-center gap-4">
diff --git a/chat/src/components/MessageList.tsx b/chat/src/components/MessageList.tsx
index 8503113..e7fd8a1 100644
--- a/chat/src/components/MessageList.tsx
+++ b/chat/src/components/MessageList.tsx
@@ -18,7 +18,7 @@ export default function MessageList({
   // If no messages, show a placeholder
   if (messages.length === 0) {
     return (
-      <div className="flex-1 p-6 flex items-center justify-center text-gray-500 bg-white">
+      <div className="flex-1 p-6 flex items-center justify-center text-muted-foreground">
         <p>No messages yet. Start the conversation!</p>
       </div>
     );
@@ -79,7 +79,7 @@ export default function MessageList({
             <div
               className={`inline-block rounded-lg ${
                 message.role === "user"
-                  ? "bg-accent-foreground rounded-lg max-w-[90%] p-4 text-accent"
+                  ? "bg-accent-foreground rounded-lg max-w-[90%] px-4 py-3 text-accent"
                   : "max-w-[90%]"
               }`}
             >
diff --git a/chat/src/components/ui/tabs.tsx b/chat/src/components/ui/tabs.tsx
index 497ba5e..f6a9770 100644
--- a/chat/src/components/ui/tabs.tsx
+++ b/chat/src/components/ui/tabs.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Tabs({
   className,
@@ -15,7 +15,7 @@ function Tabs({
       className={cn("flex flex-col gap-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function TabsList({
@@ -31,7 +31,7 @@ function TabsList({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsTrigger({
@@ -47,7 +47,7 @@ function TabsTrigger({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsContent({
@@ -60,7 +60,7 @@ function TabsContent({
       className={cn("flex-1 outline-none", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };

From c69c8a764e72955341bc8e29d2f2e3204390a0e0 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 20 May 2025 13:26:57 +0000
Subject: [PATCH 10/15] Pin controls at the bottom

---
 chat/src/components/MessageList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/chat/src/components/MessageList.tsx b/chat/src/components/MessageList.tsx
index e7fd8a1..0ea055e 100644
--- a/chat/src/components/MessageList.tsx
+++ b/chat/src/components/MessageList.tsx
@@ -45,7 +45,7 @@ export default function MessageList({
 
   return (
     <div
-      className="overflow-y-auto"
+      className="overflow-y-auto flex-1"
       ref={(scrollAreaRef) => {
         if (!scrollAreaRef) {
           return;

From 6834e62473388da8f6b924b14313d8bfd5afdd56 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 20 May 2025 13:31:50 +0000
Subject: [PATCH 11/15] Fix font

---
 chat/src/app/globals.css            |  2 +-
 chat/src/app/layout.tsx             | 11 ++---------
 chat/src/components/MessageList.tsx |  2 +-
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/chat/src/app/globals.css b/chat/src/app/globals.css
index 9711daf..dfdd607 100644
--- a/chat/src/app/globals.css
+++ b/chat/src/app/globals.css
@@ -7,7 +7,7 @@
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-mono: "Menlo", "DejaVu Sans Mono", "Consolas", "Courier New", monospace;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
diff --git a/chat/src/app/layout.tsx b/chat/src/app/layout.tsx
index 7b9fbd1..830124e 100644
--- a/chat/src/app/layout.tsx
+++ b/chat/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist } from "next/font/google";
 import "./globals.css";
 import { Toaster } from "@/components/ui/sonner";
 import { ThemeProvider } from "@/components/theme-provider";
@@ -9,11 +9,6 @@ const geistSans = Geist({
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "AgentAPI Chat",
   description: "A ChatGPT-like interface for AgentAPI",
@@ -26,9 +21,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className={`${geistSans.variable} antialiased`}>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
diff --git a/chat/src/components/MessageList.tsx b/chat/src/components/MessageList.tsx
index 0ea055e..23735a3 100644
--- a/chat/src/components/MessageList.tsx
+++ b/chat/src/components/MessageList.tsx
@@ -80,7 +80,7 @@ export default function MessageList({
               className={`inline-block rounded-lg ${
                 message.role === "user"
                   ? "bg-accent-foreground rounded-lg max-w-[90%] px-4 py-3 text-accent"
-                  : "max-w-[90%]"
+                  : "max-w-[80ch]"
               }`}
             >
               <div

From 179c2b38862c47cc9073e26e37523867de04d944 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 20 May 2025 13:33:23 +0000
Subject: [PATCH 12/15] Increase loading dots size

---
 chat/src/components/MessageList.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/chat/src/components/MessageList.tsx b/chat/src/components/MessageList.tsx
index 23735a3..7dcef4f 100644
--- a/chat/src/components/MessageList.tsx
+++ b/chat/src/components/MessageList.tsx
@@ -29,15 +29,15 @@ export default function MessageList({
     <div className="flex space-x-1">
       <div
         aria-hidden="true"
-        className={`size-1 rounded-full bg-foreground animate-pulse [animation-delay:0ms]`}
+        className={`size-2 rounded-full bg-foreground animate-pulse [animation-delay:0ms]`}
       />
       <div
         aria-hidden="true"
-        className={`size-1 rounded-full bg-foreground animate-pulse [animation-delay:300ms]`}
+        className={`size-2 rounded-full bg-foreground animate-pulse [animation-delay:300ms]`}
       />
       <div
         aria-hidden="true"
-        className={`size-1 rounded-full bg-foreground animate-pulse [animation-delay:600ms]`}
+        className={`size-2 rounded-full bg-foreground animate-pulse [animation-delay:600ms]`}
       />
       <span className="sr-only">Loading...</span>
     </div>

From 7c53c089a842c7534a35cae0ec708264ef35413d Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 20 May 2025 13:48:34 +0000
Subject: [PATCH 13/15] Optimistic update when user send a message

---
 chat/src/components/ChatInterface.tsx | 28 +++++++++++++++++++++------
 chat/src/components/MessageList.tsx   | 25 ++++++++++--------------
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/chat/src/components/ChatInterface.tsx b/chat/src/components/ChatInterface.tsx
index 048e1df..cc03267 100644
--- a/chat/src/components/ChatInterface.tsx
+++ b/chat/src/components/ChatInterface.tsx
@@ -11,9 +11,15 @@ import { Alert, AlertTitle, AlertDescription } from "./ui/alert";
 import { ModeToggle } from "./mode-toggle";
 
 interface Message {
+  id: number;
   role: string;
   content: string;
-  id: number;
+}
+
+// Draft messages are used to optmistically update the UI
+// before the server responds.
+interface DraftMessage extends Omit<Message, "id"> {
+  id?: number;
 }
 
 interface MessageUpdateEvent {
@@ -28,7 +34,7 @@ interface StatusChangeEvent {
 }
 
 export default function ChatInterface() {
-  const [messages, setMessages] = useState<Message[]>([]);
+  const [messages, setMessages] = useState<(Message | DraftMessage)[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [serverStatus, setServerStatus] = useState<string>("unknown");
   const searchParams = useSearchParams();
@@ -87,12 +93,18 @@ export default function ChatInterface() {
         const data: MessageUpdateEvent = JSON.parse(event.data);
 
         setMessages((prevMessages) => {
+          // Clean up draft messages
+          const updatedMessages = [...prevMessages].filter(
+            (m) => m.id !== undefined
+          );
+
           // Check if message with this ID already exists
-          const existingIndex = prevMessages.findIndex((m) => m.id === data.id);
+          const existingIndex = updatedMessages.findIndex(
+            (m) => m.id === data.id
+          );
 
           if (existingIndex !== -1) {
             // Update existing message
-            const updatedMessages = [...prevMessages];
             updatedMessages[existingIndex] = {
               role: data.role,
               content: data.message,
@@ -102,7 +114,7 @@ export default function ChatInterface() {
           } else {
             // Add new message
             return [
-              ...prevMessages,
+              ...updatedMessages,
               {
                 role: data.role,
                 content: data.message,
@@ -164,6 +176,10 @@ export default function ChatInterface() {
 
     // For raw messages, don't set loading state as it's usually fast
     if (type === "user") {
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        { role: "user", content },
+      ]);
       setLoading(true);
     }
 
@@ -263,7 +279,7 @@ export default function ChatInterface() {
           </div>
         )}
 
-        <MessageList messages={messages} loading={loading} />
+        <MessageList messages={messages} />
         <MessageInput onSendMessage={sendMessage} disabled={loading} />
       </main>
     </div>
diff --git a/chat/src/components/MessageList.tsx b/chat/src/components/MessageList.tsx
index 7dcef4f..2e8cf47 100644
--- a/chat/src/components/MessageList.tsx
+++ b/chat/src/components/MessageList.tsx
@@ -6,15 +6,17 @@ interface Message {
   id: number;
 }
 
+// Draft messages are used to optmistically update the UI
+// before the server responds.
+interface DraftMessage extends Omit<Message, "id"> {
+  id?: number;
+}
+
 interface MessageListProps {
-  messages: Message[];
-  loading?: boolean;
+  messages: (Message | DraftMessage)[];
 }
 
-export default function MessageList({
-  messages,
-  loading = false,
-}: MessageListProps) {
+export default function MessageList({ messages }: MessageListProps) {
   // If no messages, show a placeholder
   if (messages.length === 0) {
     return (
@@ -73,7 +75,7 @@ export default function MessageList({
       <div className="p-4 flex flex-col gap-4 max-w-4xl mx-auto">
         {messages.map((message) => (
           <div
-            key={message.id}
+            key={message.id ?? "draft"}
             className={`${message.role === "user" ? "text-right" : ""}`}
           >
             <div
@@ -81,7 +83,7 @@ export default function MessageList({
                 message.role === "user"
                   ? "bg-accent-foreground rounded-lg max-w-[90%] px-4 py-3 text-accent"
                   : "max-w-[80ch]"
-              }`}
+              } ${message.id === undefined ? "animate-pulse" : ""}`}
             >
               <div
                 className={`whitespace-pre-wrap break-words text-left text-sm ${
@@ -97,13 +99,6 @@ export default function MessageList({
             </div>
           </div>
         ))}
-
-        {/* Loading indicator for message being sent */}
-        {loading && (
-          <div className="w-fit self-end">
-            <LoadingDots />
-          </div>
-        )}
       </div>
     </div>
   );

From f507e1de72ecaf3163fd47d570610fd252639cfc Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 20 May 2025 13:58:25 +0000
Subject: [PATCH 14/15] Fix overflow of control keys

---
 chat/src/components/MessageInput.tsx | 95 ++++++++++++++++++----------
 1 file changed, 60 insertions(+), 35 deletions(-)

diff --git a/chat/src/components/MessageInput.tsx b/chat/src/components/MessageInput.tsx
index 73ef1e7..a9f51ec 100644
--- a/chat/src/components/MessageInput.tsx
+++ b/chat/src/components/MessageInput.tsx
@@ -2,7 +2,15 @@
 
 import { useState, FormEvent, KeyboardEvent, useEffect, useRef } from "react";
 import { Button } from "./ui/button";
-import { SendIcon } from "lucide-react";
+import {
+  ArrowDownIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
+  CornerDownLeftIcon,
+  DeleteIcon,
+  SendIcon,
+} from "lucide-react";
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
 
 interface MessageInputProps {
@@ -167,38 +175,24 @@ export default function MessageInput({
             </div>
 
             <div className="flex items-center justify-between p-4">
-              <div className="flex items-center gap-3">
-                <TabsList>
-                  <TabsTrigger
-                    value="text"
-                    onClick={() => {
-                      textareaRef.current?.focus();
-                    }}
-                  >
-                    Text
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="control"
-                    onClick={() => {
-                      textareaRef.current?.focus();
-                    }}
-                  >
-                    Control
-                  </TabsTrigger>
-                </TabsList>
-
-                <span className="text-xs text-muted-foreground">
-                  {inputMode === "text" ? (
-                    <>
-                      Switch to <span className="font-medium">Control</span>{" "}
-                      mode to send raw keystrokes (↑,↓,Tab,Ctrl+C,Ctrl+R)
-                      directly to the terminal
-                    </>
-                  ) : (
-                    <>Control mode - keystrokes sent directly to terminal</>
-                  )}
-                </span>
-              </div>
+              <TabsList>
+                <TabsTrigger
+                  value="text"
+                  onClick={() => {
+                    textareaRef.current?.focus();
+                  }}
+                >
+                  Text
+                </TabsTrigger>
+                <TabsTrigger
+                  value="control"
+                  onClick={() => {
+                    textareaRef.current?.focus();
+                  }}
+                >
+                  Control
+                </TabsTrigger>
+              </TabsList>
 
               {inputMode === "text" && (
                 <Button
@@ -217,9 +211,9 @@ export default function MessageInput({
                   {sentChars.map((char) => (
                     <span
                       key={char.id}
-                      className="size-9 rounded border font-mono font-medium text-xs flex items-center justify-center animate-pulse"
+                      className="min-w-9 h-9 px-2 rounded border font-mono font-medium text-xs flex items-center justify-center animate-pulse"
                     >
-                      {char.char}
+                      <Char char={char.char} />
                     </span>
                   ))}
                 </div>
@@ -227,7 +221,38 @@ export default function MessageInput({
             </div>
           </div>
         </form>
+
+        <span className="text-xs text-muted-foreground mt-2 block text-center">
+          {inputMode === "text" ? (
+            <>
+              Switch to <span className="font-medium">Control</span> mode to
+              send raw keystrokes (↑,↓,Tab,Ctrl+C,Ctrl+R) directly to the
+              terminal
+            </>
+          ) : (
+            <>Control mode - keystrokes sent directly to terminal</>
+          )}
+        </span>
       </div>
     </Tabs>
   );
 }
+
+function Char({ char }: { char: string }) {
+  switch (char) {
+    case "ArrowUp":
+      return <ArrowUpIcon className="h-4 w-4" />;
+    case "ArrowDown":
+      return <ArrowDownIcon className="h-4 w-4" />;
+    case "ArrowRight":
+      return <ArrowRightIcon className="h-4 w-4" />;
+    case "ArrowLeft":
+      return <ArrowLeftIcon className="h-4 w-4" />;
+    case "⏎":
+      return <CornerDownLeftIcon className="h-4 w-4" />;
+    case "Backspace":
+      return <DeleteIcon className="h-4 w-4" />;
+    default:
+      return char;
+  }
+}

From f1c124bb38ead3aa89fc6650c6854f693bbaf533 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 20 May 2025 14:33:12 +0000
Subject: [PATCH 15/15] Minimize flickering

---
 chat/src/components/MessageList.tsx | 95 +++++++++++++++--------------
 1 file changed, 48 insertions(+), 47 deletions(-)

diff --git a/chat/src/components/MessageList.tsx b/chat/src/components/MessageList.tsx
index 2e8cf47..4127809 100644
--- a/chat/src/components/MessageList.tsx
+++ b/chat/src/components/MessageList.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useLayoutEffect, useRef } from "react";
+
 interface Message {
   role: string;
   content: string;
@@ -17,6 +19,28 @@ interface MessageListProps {
 }
 
 export default function MessageList({ messages }: MessageListProps) {
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  // Avoid the message list to change its height all the time. It causes some
+  // flickering in the screen because some messages, as the ones displaying
+  // progress statuses, are changing the content(the number of lines) and size
+  // constantily. To minimize it, we keep track of the biggest scroll height of
+  // the content, and use that as the min height of the scroll area.
+  const contentMinHeight = useRef(0);
+
+  useLayoutEffect(() => {
+    if (
+      scrollAreaRef.current &&
+      scrollAreaRef.current.scrollHeight > contentMinHeight.current
+    ) {
+      const isFirstScroll = contentMinHeight.current === 0;
+      scrollAreaRef.current.scrollTo({
+        top: scrollAreaRef.current.scrollHeight,
+        behavior: isFirstScroll ? "instant" : "smooth",
+      });
+      contentMinHeight.current = scrollAreaRef.current.scrollHeight;
+    }
+  }, [messages]);
+
   // If no messages, show a placeholder
   if (messages.length === 0) {
     return (
@@ -26,53 +50,12 @@ export default function MessageList({ messages }: MessageListProps) {
     );
   }
 
-  // Define a component for the animated dots
-  const LoadingDots = () => (
-    <div className="flex space-x-1">
-      <div
-        aria-hidden="true"
-        className={`size-2 rounded-full bg-foreground animate-pulse [animation-delay:0ms]`}
-      />
-      <div
-        aria-hidden="true"
-        className={`size-2 rounded-full bg-foreground animate-pulse [animation-delay:300ms]`}
-      />
-      <div
-        aria-hidden="true"
-        className={`size-2 rounded-full bg-foreground animate-pulse [animation-delay:600ms]`}
-      />
-      <span className="sr-only">Loading...</span>
-    </div>
-  );
-
   return (
-    <div
-      className="overflow-y-auto flex-1"
-      ref={(scrollAreaRef) => {
-        if (!scrollAreaRef) {
-          return;
-        }
-
-        scrollAreaRef.scrollTo({
-          top: scrollAreaRef.scrollHeight,
-        });
-
-        const callback: MutationCallback = (mutationsList) => {
-          for (const mutation of mutationsList) {
-            if (mutation.type === "childList") {
-              scrollAreaRef.scrollTo({
-                top: scrollAreaRef.scrollHeight,
-                behavior: "smooth",
-              });
-            }
-          }
-        };
-
-        const observer = new MutationObserver(callback);
-        observer.observe(scrollAreaRef, { childList: true, subtree: false });
-      }}
-    >
-      <div className="p-4 flex flex-col gap-4 max-w-4xl mx-auto">
+    <div className="overflow-y-auto flex-1" ref={scrollAreaRef}>
+      <div
+        className="p-4 flex flex-col gap-4 max-w-4xl mx-auto"
+        style={{ minHeight: contentMinHeight.current }}
+      >
         {messages.map((message) => (
           <div
             key={message.id ?? "draft"}
@@ -93,7 +76,7 @@ export default function MessageList({ messages }: MessageListProps) {
                 {message.role !== "user" && message.content === "" ? (
                   <LoadingDots />
                 ) : (
-                  message.content
+                  message.content.trim()
                 )}
               </div>
             </div>
@@ -103,3 +86,21 @@ export default function MessageList({ messages }: MessageListProps) {
     </div>
   );
 }
+
+const LoadingDots = () => (
+  <div className="flex space-x-1">
+    <div
+      aria-hidden="true"
+      className={`size-2 rounded-full bg-foreground animate-pulse [animation-delay:0ms]`}
+    />
+    <div
+      aria-hidden="true"
+      className={`size-2 rounded-full bg-foreground animate-pulse [animation-delay:300ms]`}
+    />
+    <div
+      aria-hidden="true"
+      className={`size-2 rounded-full bg-foreground animate-pulse [animation-delay:600ms]`}
+    />
+    <span className="sr-only">Loading...</span>
+  </div>
+);