From 4083ca8e928a9844f46c7def91d1b8d24f7189ac Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 14:49:04 +0100
Subject: [PATCH 1/2] fix: render markdown in chat assistant messages (#518)

Add marked + DOMPurify to AutomationChatView so assistant and system
messages render formatted HTML instead of raw markdown tokens. User
messages remain plain-text interpolation to avoid any v-html XSS path
for user-supplied content.
---
 frontend/taskdeck-web/package-lock.json       |  41 +++++++
 frontend/taskdeck-web/package.json            |   3 +
 .../src/views/AutomationChatView.vue          | 111 +++++++++++++++++-
 3 files changed, 153 insertions(+), 2 deletions(-)

diff --git a/frontend/taskdeck-web/package-lock.json b/frontend/taskdeck-web/package-lock.json
index 6f809a15d..c164dc554 100644
--- a/frontend/taskdeck-web/package-lock.json
+++ b/frontend/taskdeck-web/package-lock.json
@@ -11,6 +11,8 @@
         "@microsoft/signalr": "^10.0.0",
         "@tanstack/vue-virtual": "^3.13.23",
         "axios": "^1.13.2",
+        "dompurify": "^3.3.3",
+        "marked": "^17.0.5",
         "pinia": "^3.0.4",
         "vue": "^3.5.24",
         "vue-router": "^4.6.3",
@@ -18,6 +20,7 @@
       },
       "devDependencies": {
         "@playwright/test": "^1.56.1",
+        "@types/dompurify": "^3.0.5",
         "@types/node": "^24.10.0",
         "@typescript-eslint/eslint-plugin": "^8.46.2",
         "@typescript-eslint/parser": "^8.46.2",
@@ -1223,6 +1226,16 @@
         "vue": "^2.7.0 || ^3.0.0"
       }
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/esrecurse": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
@@ -1247,6 +1260,13 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.56.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.0.tgz",
@@ -2514,6 +2534,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.3.tgz",
+      "integrity": "sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3881,6 +3910,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/marked": {
+      "version": "17.0.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.5.tgz",
+      "integrity": "sha512-6hLvc0/JEbRjRgzI6wnT2P1XuM1/RrrDEX0kPt0N7jGm1133g6X7DlxFasUIx+72aKAr904GTxhSLDrd5DIlZg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
diff --git a/frontend/taskdeck-web/package.json b/frontend/taskdeck-web/package.json
index dd4c0ec1a..62e5252ae 100644
--- a/frontend/taskdeck-web/package.json
+++ b/frontend/taskdeck-web/package.json
@@ -32,6 +32,8 @@
     "@microsoft/signalr": "^10.0.0",
     "@tanstack/vue-virtual": "^3.13.23",
     "axios": "^1.13.2",
+    "dompurify": "^3.3.3",
+    "marked": "^17.0.5",
     "pinia": "^3.0.4",
     "vue": "^3.5.24",
     "vue-router": "^4.6.3",
@@ -39,6 +41,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^24.10.0",
     "@typescript-eslint/eslint-plugin": "^8.46.2",
     "@typescript-eslint/parser": "^8.46.2",
diff --git a/frontend/taskdeck-web/src/views/AutomationChatView.vue b/frontend/taskdeck-web/src/views/AutomationChatView.vue
index 3762b1ecc..64489199c 100644
--- a/frontend/taskdeck-web/src/views/AutomationChatView.vue
+++ b/frontend/taskdeck-web/src/views/AutomationChatView.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
 import { chatApi } from '../api/chatApi'
 import { boardsApi } from '../api/boardsApi'
 import { useToastStore } from '../store/toastStore'
-import type { ChatProviderHealth, ChatSession } from '../types/chat'
+import type { ChatProviderHealth, ChatMessage, ChatSession } from '../types/chat'
 import type { Board } from '../types/board'
 import { normalizeChatRole } from '../utils/chat'
 import { getErrorDisplay } from '../composables/useErrorMapper'
@@ -13,6 +15,18 @@ import { buildInputAssistOptions } from '../utils/inputAssist'
 import type { InputAssistOption } from '../utils/inputAssist'
 import { normalizeBoardIdQueryParam } from '../utils/navigation'
 
+function isAssistantOrSystemMessage(message: ChatMessage): boolean {
+  const role = normalizeChatRole(message.role)
+  return role === 'Assistant' || role === 'System'
+}
+
+function renderMarkdown(content: string): string {
+  if (!content) {
+    return ''
+  }
+  return DOMPurify.sanitize(marked.parse(content) as string)
+}
+
 const router = useRouter()
 const route = useRoute()
 const toast = useToastStore()
@@ -563,7 +577,12 @@ watch(
               <div v-if="message.messageType === 'degraded'" class="td-message-degraded-warning">
                 Degraded response{{ message.degradedReason ? `: ${message.degradedReason}` : '' }}
               </div>
-              <div class="td-message-content">{{ message.content }}</div>
+              <div
+                v-if="isAssistantOrSystemMessage(message)"
+                class="td-message-content td-message-content--markdown"
+                v-html="renderMarkdown(message.content)"
+              ></div>
+              <div v-else class="td-message-content">{{ message.content }}</div>
               <div v-if="message.proposalId && message.messageType === 'proposal-reference'" class="td-message-proposal">
                 <span>Proposal: {{ message.proposalId }}</span>
                 <button
@@ -827,6 +846,94 @@ watch(
   font-size: var(--td-font-sm);
 }
 
+.td-message-content--markdown {
+  white-space: normal;
+}
+
+.td-message-content--markdown :deep(p) {
+  margin: 0 0 var(--td-space-2);
+}
+
+.td-message-content--markdown :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+.td-message-content--markdown :deep(h1),
+.td-message-content--markdown :deep(h2),
+.td-message-content--markdown :deep(h3),
+.td-message-content--markdown :deep(h4),
+.td-message-content--markdown :deep(h5),
+.td-message-content--markdown :deep(h6) {
+  margin: var(--td-space-2) 0 var(--td-space-1);
+  font-weight: 700;
+  color: var(--td-text-primary);
+}
+
+.td-message-content--markdown :deep(h1) { font-size: var(--td-font-xl); }
+.td-message-content--markdown :deep(h2) { font-size: var(--td-font-lg); }
+.td-message-content--markdown :deep(h3) { font-size: var(--td-font-base); }
+
+.td-message-content--markdown :deep(ul),
+.td-message-content--markdown :deep(ol) {
+  margin: 0 0 var(--td-space-2);
+  padding-left: var(--td-space-4);
+}
+
+.td-message-content--markdown :deep(li) {
+  margin-bottom: var(--td-space-1);
+}
+
+.td-message-content--markdown :deep(code) {
+  font-family: monospace;
+  font-size: 0.9em;
+  background: var(--td-surface-tertiary);
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-sm);
+  padding: 1px 4px;
+}
+
+.td-message-content--markdown :deep(pre) {
+  background: var(--td-surface-tertiary);
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-md);
+  padding: var(--td-space-2) var(--td-space-3);
+  overflow-x: auto;
+  margin: 0 0 var(--td-space-2);
+}
+
+.td-message-content--markdown :deep(pre code) {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: var(--td-font-sm);
+}
+
+.td-message-content--markdown :deep(strong) {
+  font-weight: 700;
+}
+
+.td-message-content--markdown :deep(em) {
+  font-style: italic;
+}
+
+.td-message-content--markdown :deep(blockquote) {
+  border-left: 3px solid var(--td-border-default);
+  margin: 0 0 var(--td-space-2);
+  padding-left: var(--td-space-3);
+  color: var(--td-text-secondary);
+}
+
+.td-message-content--markdown :deep(hr) {
+  border: none;
+  border-top: 1px solid var(--td-border-default);
+  margin: var(--td-space-2) 0;
+}
+
+.td-message-content--markdown :deep(a) {
+  color: var(--td-color-primary);
+  text-decoration: underline;
+}
+
 .td-message--degraded {
   border-left: 3px solid var(--td-color-warning, #d69e2e);
   padding-left: var(--td-space-2);

From e01cc9cf43e53084ec09b2dca18692fbb18c4579 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 15:00:52 +0100
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20harden=20markdown=20rendering=20secu?=
 =?UTF-8?q?rity=20=E2=80=94=20fail-closed=20role=20fallback=20and=20remove?=
 =?UTF-8?q?=20unsafe=20cast?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change normalizeChatRole fallback from 'Assistant' to 'User' so unknown/
  out-of-range role values route to the safe {{ }} text-interpolation path
  rather than the v-html/renderMarkdown path.
- Replace `marked.parse(content) as string` with the explicit sync overload
  `marked.parse(content, { async: false })` so the return type is string
  without a cast, and a future async-extension addition cannot silently
  produce [object Promise] in the DOM.
---
 frontend/taskdeck-web/src/utils/chat.ts                | 4 ++--
 frontend/taskdeck-web/src/views/AutomationChatView.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/taskdeck-web/src/utils/chat.ts b/frontend/taskdeck-web/src/utils/chat.ts
index 69e146fc3..3f02feedb 100644
--- a/frontend/taskdeck-web/src/utils/chat.ts
+++ b/frontend/taskdeck-web/src/utils/chat.ts
@@ -5,11 +5,11 @@ const chatSessionStatusByIndex = ['Active', 'Archived'] as const
 
 export function normalizeChatRole(value: ChatRoleValue): typeof chatRoleByIndex[number] {
   if (typeof value === 'number') {
-    return chatRoleByIndex[value] ?? 'Assistant'
+    return chatRoleByIndex[value] ?? 'User'
   }
 
   const found = chatRoleByIndex.find(v => v.toLowerCase() === value.toLowerCase())
-  return found ?? 'Assistant'
+  return found ?? 'User'
 }
 
 export function normalizeChatSessionStatus(value: ChatSessionStatusValue): typeof chatSessionStatusByIndex[number] {
diff --git a/frontend/taskdeck-web/src/views/AutomationChatView.vue b/frontend/taskdeck-web/src/views/AutomationChatView.vue
index 64489199c..799565b7a 100644
--- a/frontend/taskdeck-web/src/views/AutomationChatView.vue
+++ b/frontend/taskdeck-web/src/views/AutomationChatView.vue
@@ -24,7 +24,7 @@ function renderMarkdown(content: string): string {
   if (!content) {
     return ''
   }
-  return DOMPurify.sanitize(marked.parse(content) as string)
+  return DOMPurify.sanitize(marked.parse(content, { async: false }))
 }
 
 const router = useRouter()