feat(chat): add markdown rendering, fix gateway WS env vars

- Add react-markdown + remark-gfm for rich message rendering
- Assistant messages now render markdown (code blocks, lists, links, etc.)
- User messages stay as plain text
- Fix docker-compose to map GATEWAY_WS_URL from VITE_WS_URL
- Added GATEWAY_WS_TOKEN to Dokploy env vars

docker-compose.dokploy.yml

@@ -25,7 +25,7 @@ services:
       COOKIE_DOMAIN: .donovankelly.xyz
       CLAWDBOT_HOOK_URL: ${CLAWDBOT_HOOK_URL:-https://hammer.donovankelly.xyz/hooks/agent}
       CLAWDBOT_HOOK_TOKEN: ${CLAWDBOT_HOOK_TOKEN}
-      GATEWAY_WS_URL: ${GATEWAY_WS_URL:-wss://hammer.donovankelly.xyz}
+      GATEWAY_WS_URL: ${VITE_WS_URL:-wss://hammer.donovankelly.xyz}
       GATEWAY_WS_TOKEN: ${GATEWAY_WS_TOKEN}
       PORT: "3100"
     depends_on:

frontend/package.json

@@ -14,7 +14,9 @@
     "better-auth": "^1.4.17",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.13.0",
+    "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {

frontend/src/pages/ChatPage.tsx

@@ -1,4 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { getChatClient, type ChatClient } from "../lib/gateway";
 
 interface ChatMessage {
@@ -127,7 +129,15 @@ function MessageBubble({ msg }: { msg: ChatMessage }) {
             : "bg-gray-100 text-gray-800 rounded-bl-md"
         }`}
       >
-        <p className="text-sm whitespace-pre-wrap leading-relaxed">{msg.content}</p>
+        {isUser ? (
+          <p className="text-sm whitespace-pre-wrap leading-relaxed">{msg.content}</p>
+        ) : (
+          <div className="text-sm leading-relaxed prose prose-sm prose-gray max-w-none [&_pre]:bg-gray-800 [&_pre]:text-gray-100 [&_pre]:rounded-lg [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-xs [&_code]:bg-gray-200 [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_p]:mb-2 [&_p:last-child]:mb-0 [&_ul]:mb-2 [&_ol]:mb-2 [&_li]:mb-0.5 [&_h1]:text-base [&_h2]:text-sm [&_h3]:text-sm [&_a]:text-amber-600 [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:text-gray-500">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {msg.content}
+            </ReactMarkdown>
+          </div>
+        )}
       </div>
     </div>
   );