Skip to content

[BUG] Expanded task header renders prompt as raw text (no markdown) and shows a second, inconsistently-styled scrollbar #1256

Description

@easonLiangWorldedtech

Summary

Two related issues in the expanded task header (the collapsible "Task" panel at the top of an open task):

  1. Prompt is not rendered as markdown. The collapsed title uses plain-text rendering, which is fine for a single-line summary, but the expanded view also used the same plain-text component, so prompts containing markdown syntax display it verbatim — e.g. bold markers, backtick code spans, lists and headings appear as literal characters while assistant messages in the same conversation render formatted markdown via MarkdownBlock.

  2. Inconsistent / doubled scrollbars. The expanded prompt box (overflow-auto max-h-80) uses a default always-visible Chromium scrollbar, while the message list below (Virtuoso) uses the VS Code-style .scrollable hover-reveal scrollbar from index.css. For long prompts both bars are visible stacked in the same column with different styling.

Steps to Reproduce

  1. Start a task whose prompt contains markdown (e.g. paste a markdown document).
  2. Expand the task header (click the title / chevron).
  3. Observe:
    • the prompt text shows raw markdown source instead of rendered formatting;
    • for long prompts, two scrollbars appear in the same column — one default-style (prompt box) and one VS Code-style (message list).

Expected Behavior

  • The expanded task header renders the prompt through the same MarkdownBlock pipeline as chat messages.
  • The prompt box uses the shared .scrollable class so its scrollbar matches the message list (transparent until hover/focus).

Suggested Fix

In webview-ui/src/components/chat/TaskHeader.tsx:

  • Replace the plain-text Mention component in the expanded state with MarkdownBlock and drop the now-redundant whitespace-pre-wrap class.
  • Add the .scrollable class to the prompt box so it inherits the VS Code scrollbar styling.

Additional Information

  • Regression tests added in webview-ui/src/components/chat/tests/TaskHeader.spec.tsx (markdown rendering + scrollable class).
  • Verified: vitest 23/23 passing, ESLint clean, tsc -b passes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions