Compact single-line action bubbles on mobile with expandable full input#149
Merged
Compact single-line action bubbles on mobile with expandable full input#149
Conversation
On mobile (≤640px), tool action bubbles (Read, Run, Search, Edit) are now single-line with a chevron toggle instead of a separate Output row: ● Read …path/to/file.txt ▶ Changes: - Header is clickable for expand/collapse when output exists - Chevron indicator shown on mobile, hidden on desktop (unchanged) - action-input and action-output-toggle hidden on mobile - File paths head-truncated with … prefix to show the most useful tail - Full command/path/query shown as a wrapping line inside the expanded output area so the complete text is always accessible Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The ToolStartedPayload was sending ToolName and CallId but dropping the ToolInput parameter. This meant mobile clients in remote mode couldn't display file paths, commands, or search queries in real-time — only after reconnecting and syncing full history. Now ToolInput flows through the entire bridge pipeline: Server → ToolStartedPayload → Client → ChatMessage.ToolCallMessage Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
File paths (Read, Edit, Create) use direction:rtl CSS trick to truncate from the head, showing the most useful tail of the path with ellipsis on the left. Commands and queries use default tail truncation. Removed TruncateHead() C# helper — full paths are now passed to the template and CSS handles overflow naturally at any viewport width. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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.
Summary
On mobile, tool action bubbles (Read, Run, Search, Edit) previously took multiple lines and didn't show useful context like the filename, command, or search query in the header. This made it hard to follow what Copilot was doing without expanding every bubble.
Changes
Single-line mobile layout
Action bubbles on mobile (≤640px) are now compact single-line items with a chevron toggle:
action-inputand separateaction-output-togglehidden on mobileHead-truncated paths
File paths now show the tail (most informative part) with
…prefix when truncated — e.g.,…Components/ChatMessageList.razor.cssinstead of justChatMessageList.razor.css.Full input visible on expand
When a bubble is expanded, the full command/path/query is shown as a distinct wrapping line at the top of the output area, so the complete text is always readable even when the header truncates it.
Desktop impact
None — desktop layout is completely unchanged. The chevron is hidden on desktop and the existing Output toggle row remains.
Testing