[VS Code Shell] Improve Reasoning Action UI#2713
Merged
Merged
Conversation
The message input is a display:inline contentEditable span, so its flex wrapper is wider than the text run. A press in that empty padding landed on the wrapper (not the editable), so a selection couldn't begin there - you could only select by starting the drag on the text itself. Forward padding presses to the editable via pointer capture: focus it, anchor a caret at the pointer, and extend the selection as the pointer moves, so the whole box up to the buttons is drag-selectable. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
Shared chat-ui changes so both the VS Code webview and the Electron shell
benefit:
- Auto-minimize completed reasoning: AgentMessageContainer.collapseReasoning()
drops the <details> 'open' when a step is superseded or the request
completes, so finished 'Thinking' blocks collapse while the active step
stays expanded. Guarded per-element (WeakSet) so a user-reopened block is
not re-collapsed. Not triggered on the reconnect-to-queued path.
- Reasoning working rail is light purple (data-variant='reasoning') instead
of the generic blue, detected from the reasoning source in
getOrCreateAgentContainer so streaming/step/block bubbles all read as
reasoning.
- Moved the '.reasoning-thinking' box structure + padding into shared
chat.css (more inner padding so wrapped bullet/list lines are not clipped);
vscode-theme.css keeps only VS Code color/font theming.
- Final reasoning answer gets a separating gap ('.chat-reasoning-answer'),
applied to the last committed step so a post-answer status block does not
steal it.
Adds chat-ui unit tests for the rail variant, supersede/completion collapse,
the answer gap, and the reconnect no-collapse case.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
… view - Markdown list markers now align with the paragraph text (they were clipped/too tight): restore list indent + heading margins that the vscode-shell global reset stripped, using list-style-position:inside so bullets/numbers start at the text's left edge. Scoped to classless (Markdown) lists so structured-content .sc-list is untouched. - Bump the gap before the reasoning answer (12px -> 18px) so the final response reads as separated from the Thinking/tool trail. - Add an 'Expand message' action button (maximize icon) between copy and thumbs-up that opens the message in a full-window overlay for easier reading. The live content is moved into the overlay (not cloned) so links and other interactivity keep working, then moved back on close; dialog semantics, single-overlay guard, Escape/backdrop/close dismissal, and focus restore. Electron gets a dark panel override. Shared in chat-ui so the Electron shell benefits too. Adds feedbackWidget tests for the expand button + overlay lifecycle. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
- Change the expand icon to a window-maximize (corner-bracket) glyph. - Add an optional PlatformAdapter.expandMessage host hook. The feedback widget's expand button calls it and only falls back to the in-page overlay when the host doesn't handle it (Electron / Chrome keep the overlay). Messages backed by an <iframe> also stay on the overlay (they don't survive re-sanitization). - vscode-shell: the webview posts the (already-sanitized) content to the extension, which opens a separate editor panel (ViewColumn.Beside) the user can move/snap. The panel HTML is static; a dedicated expand.js bundle receives the content over postMessage and re-sanitizes it with DOMPurify before rendering, so no HTML is built from the message on the extension side. Strict CSP (img-src self+data only, form-action/base-uri none), mtime cache-busting, links routed to openExternal, and paginated table rows revealed for a complete static read view. Adds chat-ui tests for the host-callback path + overlay fallback. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
VS Code renders a custom SVG panel iconPath literally and does not recolor
currentColor (unlike ThemeIcons), so the currentColor robot showed black and
was invisible on dark editor tabs. Add a light-colored typeagent-dark.svg and
give both the expand panel and the chat editor panels a theme-aware
{ light, dark } iconPath via a shared panelIcon() helper.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
Review-driven polish, no behavior change: - Extract stampedWebviewUri() (webviewResources.ts) and route both ChatViewProvider and openExpandPanel through it, removing the duplicated mtime cache-busting logic. - Extract the shared webview injectStyle() helper (main.ts + expand.ts) and hoist the acquireVsCodeApi() ambient declaration into globals.d.ts instead of re-declaring it per entry. - Replace the dense inline expandMessage ternary with a named AgentMessageContainer.expandInHost() method (drops a non-null assertion). - Collapse the shared .chat-expand-body/.chat-expand-page CSS resets and tighten a few over-long comments. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
…/microsoft/TypeAgent into dev/georgeng/reasoning_action_ui
GeorgeNgMsft
marked this pull request as ready for review
July 21, 2026 19:25
…ft/TypeAgent into dev/georgeng/vscode_copy
Extract fireInputEvent() helper for the three identical programmatic 'input' event dispatches in contextMenu.ts, and remove the unused isCopy local in handleClipboardShortcut (it only fed the guard). No behavior change. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 679cef00-4867-4bba-8efe-3daac6103863
…/microsoft/TypeAgent into dev/georgeng/reasoning_action_ui
# Conflicts: # ts/packages/chat-ui/README.AUTOGEN.md # ts/packages/vscode-shell/README.AUTOGEN.md
GeorgeNgMsft
enabled auto-merge
July 21, 2026 22:54
GeorgeNgMsft
commented
Jul 21, 2026
hillary-mutisya
approved these changes
Jul 21, 2026
# Conflicts: # ts/packages/chat-ui/README.AUTOGEN.md # ts/packages/shell/README.AUTOGEN.md # ts/packages/vscode-shell/README.AUTOGEN.md
…m/microsoft/TypeAgent into dev/georgeng/reasoning_action_ui
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Improve dispatcher.reasoningAction UI + expandable messages
Improvements to how reasoning responses render in the TypeAgent chat, plus a way to pop a message out into its own window. All UI logic lives in the shared chat-ui package, so both the VS Code shell and the Electron shell benefit.
What changed
Reasoning UI
• Auto-collapse completed "Thinking" blocks. While a reasoning step is active it stays expanded; once superseded or the request completes, it details collapses so the finished trail minimizes. Collapse is per-block (WeakSet-guarded), so a block you manually reopen isn't slammed shut again.
• Purple "working" rail for reasoning. The status rail reads light purple (instead of the generic blue) while a dispatcher.reasoningAction.* request is in flight.
• List/heading spacing fixed. A host CSS reset had stripped markdown list indent and heading margins; restored them, with bullet/number markers aligned to the paragraph text.
Expand message
• New maximize button in each message's action row (between copy and 👍).
• In the VS Code shell it opens the message in a separate editor panel you can move / split / snap to a new window. The panel HTML is static; content is delivered over postMessage and re-sanitized with DOMPurify in a small dedicated webview ( expand.js ) — no extension-side HTML injection. Strict CSP, links routed externally, paginated tables fully expanded for reading.
• Other hosts (Electron / Chrome) fall back to an in-page overlay that moves the live nodes (keeping links/tables interactive). Iframe-backed messages always use the overlay.
• Fixed the panel tab icon being invisible on dark themes (theme-aware { light, dark } robot icon).