[amkunte]

Owner pain points (reported via web chat):

1. "tiny window" — the dashboard transcript is clamped to max-height: 30vh, so anything longer than ~5 lines gets squished into a small scrolling region.
2. "some sort of markdown" — assistant replies poll out via fetch(/result/{id}) and the existing code does re.textContent = r.result, which renders ### headings and *lists* as literal text. With the proactive loop now sending long structured replies (skill suggestions, research summaries), this hurts.

What's in this PR

New /chat route

src/chat-ui.ts — a self-contained HTML constant (CHAT_HTML) served by web-client.ts at /chat. Full-page chat-first UI in the style of the Gemini/Claude desktop apps:

• Message bubbles (user right, assistant left, S/You avatars)
• Markdown rendering via marked.js (headings, lists, code, tables, links, blockquotes)
• Auto-resizing textarea (Enter sends, Shift+Enter newline)
• Conversation persisted in localStorage across refreshes
• Live agent state subtitle via the existing /sse channel
• Clear-history button (only clears the local view)
• Back-to-dashboard link top-right

Markdown rendering on the existing dashboard

• Load marked.js in <head>
• Patch the result-poll path: re.textContent = r.result → re.innerHTML = window.marked.parse(r.result, {breaks: true, gfm: true}) with a textContent fallback if marked failed to load
• Bump #transcript max-height 30vh → 50vh
• Add markdown-targeted styles under .t-assistant (h1-h4, p, ul/ol, code, pre, table, etc.)

Backend reuse

Both pages use the same POST /task → poll /result/{task_id} flow. No new agent endpoints. /chat does not touch the WebSocket / voice path.

Diff stats

• 1 new file (src/chat-ui.ts, 399 lines, mostly HTML+CSS)
• 3 small edits to web-client.ts (import, route handler before fall-through, markdown patch in poll callback)
• 0 changes to other files / no new dependencies (marked.js loaded from CDN)

Testing

• npx tsc --noEmit passes
• Restarted web-client locally; curl /chat returns 200 with the new HTML; curl / confirms marked.js script tag present
• Verified the existing dashboard chat path still works (the fallback case if marked.js fails to load uses textContent)

🤖 Generated with Claude Code

[sonichi]

Quick cold review — overall design looks good (clean separation, reuses task-bridge, fallback for missing marked.js). One blocker around XSS hardening, a few notes.

Blocker — innerHTML = marked.parse(content) is unsanitized

Two call sites set untrusted markdown into innerHTML:

• src/chat-ui.ts:appendMessage (assistant bubbles)
• src/web-client.ts:~2092 (dashboard transcript poll callback)

Marked v4+ removed the built-in sanitize option; v12 ships nothing by default. Any agent response containing <script> / <img onerror=...> / javascript: href will execute. Agent results aren't trusted input either — tasks come from Discord/Telegram/voice channels where senders can include arbitrary content (and a non-owner task can route through the bridge and end up echoed in results/<id>.txt).

Fix shape (pick one):

1. Add DOMPurify before innerHTML: bubble.innerHTML = DOMPurify.sanitize(marked.parse(content)) — extra <script> CDN line.
2. Use marked.use({ sanitize: customFn }) with an allowlist.
3. Use a Markdown renderer that emits a DOM tree directly (e.g. unified+rehype-sanitize) — more rewrite but cleaner.

The if (window.marked) fallback already does proper HTML-entity escaping for the !window.marked path, so the textContent path is fine. It's the success path that's unsafe.

Smaller notes (non-blocking)

• apiBase = 'http://' + location.hostname + ':7843' hardcodes the agent-api port and force-downgrades to http even if /chat was served over https. Consider ${location.protocol}//${location.hostname}:7843 or making it relative + reverse-proxying through 8080.
• localStorage key sutando-chat-history-v1 — versioning is good. Note: 100-message slice doesn't bound by content size; a few large agent responses can push near the ~5 MB browser limit.
• Bubble width: max-width: calc(100% - 40px) on .bubble looks tight when avatar + bubble both render — works in practice but check long inline code blocks.
• clearBtn has both inline styles AND a .header .clear-btn class — pick one to reduce surprise on future edits.
• Empty-state copy says "Tasks route through the same bridge as Telegram, Discord, and voice." — accurate and useful framing.

Markdown rendering on the existing dashboard is a real win (matches feedback_proactive_voice and the long-form structured replies the proactive loop now emits). Worth a separate small follow-up: same sanitization applies to the dashboard once that path lands.

If you address the XSS path, I'm happy to re-review.

[amkunte]

Addressed the XSS blocker per option (1) from your review — commit pushed to amkunte:feat/chat-ui.

Both call sites now require BOTH window.marked AND window.DOMPurify before taking the innerHTML path. If either CDN load fails (ad blocker, offline), they fall through to the existing entity-escape textContent path. The marked-only state is explicitly no longer a code path — that was the bug.

Added DOMPurify 3.0.9 as a sibling <script> tag from jsdelivr (no SRI to match the existing marked tag's pattern; happy to pin both if you'd prefer).

Non-blocking items from your review (apiBase https/protocol downgrade, localStorage size bound, clearBtn dual-styling, bubble width) deferred to a follow-up unless you want any rolled in pre-merge.

npx tsc --noEmit passes on the workspace.

🤖 Generated with Claude Code

[amkunte]

Bundled 2 of your smaller non-blocker notes into the same branch (pushed to amkunte:feat/chat-ui):

apiBase scheme: http:// hardcode replaced with location.protocol + '//' so an https-served /chat doesn't downgrade. Stays http when the page is http; upgrades when the page is https.

clearBtn dual-styling: inline styles consolidated into the .header .clear-btn CSS rule (color, font-size, border, padding, border-radius). Kept only margin-right: 8px inline since it's a layout-position hint rather than a button-style decision. Added a :hover state matching the .header a:hover rule for visual consistency.

The other 2 non-blockers (localStorage size bound, bubble width tight) deferred — localStorage bound needs a real char-count-vs-~5MB calc on actual usage data; bubble width is cosmetic + untestable without UI checks.

npx tsc --noEmit passes.

🤖 Generated with Claude Code

[sonichi]

LGTM — clean chat-page UI + markdown rendering with proper DOMPurify sanitization.

Reviewed:

• src/chat-ui.ts (new, 421 LOC) — chat UI module, markdown rendering via renderMarkdown then DOMPurify.sanitize before innerHTML. The defensive pattern is consistent across all innerHTML assignment sites I spot-checked.
• src/web-client.ts (+58/-2) — wires the new chat-ui module into the existing web client

Security:

• ✅ DOMPurify sanitization wraps every innerHTML assignment of user/agent content
• ✅ No new bind-address (the existing HTTP_HOST = process.env.CLIENT_HOST || '0.0.0.0' in web-client.ts is pre-existing, not introduced here)
• ✅ No eval/exec, no auth bypass

Coordination note: PR #651 (subscription-scanner) ALSO adds src/chat-ui.ts with overlapping changes. Whichever PR merges first, the other needs a rebase. Recommend merging #650 first (smaller, cleaner) then rebasing #651.

— Mini