Phase 4 — Markdown Rendering + Typing Indicators + Intent Status #239

New issue

Closed

opened 2026-07-15 11:38:50 +00:00 by Mark · 0 comments

Mark commented

2026-07-15 11:38:50 +00:00

Owner

Phase 4: Markdown Rendering + Typing Indicators + Intent Status

Goal: Enhance the chat UI with markdown message rendering, typing indicators when the mesh is processing, and visual display of intent lifecycle states (pending, working, completed, error).

Approach candidates:

Markdown rendering via client-side library (marked.js, showdown.js) — lightweight, no build step
Typing indicators: animated dots in the message area while awaiting response
Intent status: small badge/pill per message showing state transitions (pending→working→completed)
Keyboard shortcut for code blocks (triple backtick auto-close)

Outputs:

Update runtime/static/js/chat.js — markdown rendering, typing indicator component, status display
Update runtime/static/css/chat.css — markdown styles, typing animation, status badges
Include markdown library via CDN in runtime/static/index.html
Tests in tests/integration/test_chat_ui_enhancements.py

Acceptance criteria:

Messages render markdown: bold, italic, code, code blocks, lists, links, images
Code blocks have syntax highlighting (or at minimum monospace + background)
Typing indicator (animated dots) shows while mesh is processing a response
Intent status shows as a colored badge: yellow=pending, blue=working, green=completed, red=error
Status transitions animate smoothly (no flicker)
Markdown is sanitized (no XSS via <script> tags in message content)
Long code blocks are scrollable, not page-breaking
Typing indicator disappears promptly when response arrives

Files touched: runtime/static/index.html (amend — add markdown library CDN), runtime/static/js/chat.js (amend), runtime/static/css/chat.css (amend), tests/integration/test_chat_ui_enhancements.py (create)

Decomposed from mesh-seed#133

## Phase 4: Markdown Rendering + Typing Indicators + Intent Status **Goal:** Enhance the chat UI with markdown message rendering, typing indicators when the mesh is processing, and visual display of intent lifecycle states (pending, working, completed, error). **Approach candidates:** - Markdown rendering via client-side library (marked.js, showdown.js) — lightweight, no build step - Typing indicators: animated dots in the message area while awaiting response - Intent status: small badge/pill per message showing state transitions (pending→working→completed) - Keyboard shortcut for code blocks (triple backtick auto-close) **Outputs:** - Update `runtime/static/js/chat.js` — markdown rendering, typing indicator component, status display - Update `runtime/static/css/chat.css` — markdown styles, typing animation, status badges - Include markdown library via CDN in `runtime/static/index.html` - Tests in `tests/integration/test_chat_ui_enhancements.py` **Acceptance criteria:** - [ ] Messages render markdown: **bold**, *italic*, `code`, ```code blocks```, lists, links, images - [ ] Code blocks have syntax highlighting (or at minimum monospace + background) - [ ] Typing indicator (animated dots) shows while mesh is processing a response - [ ] Intent status shows as a colored badge: yellow=pending, blue=working, green=completed, red=error - [ ] Status transitions animate smoothly (no flicker) - [ ] Markdown is sanitized (no XSS via `<script>` tags in message content) - [ ] Long code blocks are scrollable, not page-breaking - [ ] Typing indicator disappears promptly when response arrives **Files touched:** `runtime/static/index.html` (amend — add markdown library CDN), `runtime/static/js/chat.js` (amend), `runtime/static/css/chat.css` (amend), `tests/integration/test_chat_ui_enhancements.py` (create) --- --- _Decomposed from [mesh-seed#133](https://forgejo.tail018ac4.ts.net/Mark/mesh-seed/issues/133)_

Mark added the

triage-approved

label

2026-07-15 11:38:50 +00:00

Mark referenced this issue

2026-07-15 11:38:53 +00:00

Decompose: CONV-003: Web Chat Interface #133

Mark changed title from ~~Decompose: CONV-003: Web Chat Interface — Phase 4: Markdown Rendering + Typing Indicators + Intent Status~~ to Phase 4 — Markdown Rendering + Typing Indicators + Intent Status

2026-07-15 11:39:38 +00:00

Mark added

blocked:depends-238

and removed

triage-approved

labels

2026-07-15 11:39:47 +00:00

Mark added the

blocked:preflight

label

2026-07-31 04:26:42 +00:00

Mark removed the