Skip to content

UI Chat bubble tweaks#2454

Merged
robgruen merged 16 commits into
mainfrom
dev/robgruen/ui_tweaks
Jun 7, 2026
Merged

UI Chat bubble tweaks#2454
robgruen merged 16 commits into
mainfrom
dev/robgruen/ui_tweaks

Conversation

@robgruen
Copy link
Copy Markdown
Collaborator

@robgruen robgruen commented Jun 6, 2026

This pull request introduces several improvements and new features to the chat-ui package, focusing on enhanced queue status visualization, better agent "working" state handling, improved choice prompt controls, and test infrastructure setup. The most important changes are summarized below:


UI/UX Improvements:

  • Refactored user message queue status display to use a new status rail with state-tinted labels and action buttons, supporting both "queued" and "running" states, and added a "run next" (jump queue) control. The new rail is dynamically created and removed as needed, improving clarity and accessibility.
  • Added per-thread tracking of in-flight agent requests with a new agentRunningRequestIds set, ensuring the agent bubble displays a "working" rail and Stop button only when appropriate. This state is applied and cleared at the correct lifecycle points. [1] [2] [3] [4] [5] [6]
  • Improved the placement of the "explained" (roadrunner) icon so it anchors inside the content bubble, preventing layout collisions and ensuring the tooltip is correctly hosted.

Choice Prompt Handling:

  • Enhanced addChoicePrompt to support an optional showMessage flag (to avoid duplicate prompt text) and an AbortSignal for external cancellation. The prompt now cleans up properly if aborted or resolved, and supports host-driven dismissal.
  • Added and clarified TODO comments in actionHelpers.ts regarding the duplication of prompt messages in both agent bubbles and choice cards, and documented the current workaround and future direction for host rendering. [1] [2]

Testing Infrastructure:

  • Added a Jest configuration for the chat-ui package, configuring it to use jsdom for DOM-based unit tests and mapping source imports to the compiled output.
  • Updated package.json to include Jest and related dependencies, and added scripts for building, cleaning, and running tests. [1] [2]

Other:

  • Added imports for new icon components used in the UI controls.

These changes collectively improve the chat UI's clarity, interactivity, and maintainability, while laying the groundwork for robust unit testing.

The navigateHistory(delta) calls for ArrowUp and ArrowDown were
inverted. commandHistory stores entries with most recent at index 0
(via unshift), so historyIndex must increase (+1) when ArrowUp is
pressed to reach index 0 first. The bug caused ArrowUp to always
return "" (historyIndex clamped to -1 instead of advancing to 0).
Copilot AI temporarily deployed to development-fork June 6, 2026 19:01 Inactive
Copilot AI had a problem deploying to development-fork June 6, 2026 19:01 Failure
…keeping prior-session commands in the up-arrow back stack (#2455)

The `shell_and_cli (windows-latest, 22)` job failed on the `command
backstack` shell test — ArrowUp past the startup greeting surfaced
`@shell setWindowZoomLevel 100` (a command persisted by an earlier
serial test) instead of clamping at the expected command.

```
Error: Wrong back stack command found!
Expected: "@Greeting --mock"
Received: "@shell setWindowZoomLevel 100"
```

**Root cause** — the serial shell tests share one session, so the
dispatcher's *persisted* display history (every prior run's commands) is
replayed into the ArrowUp back stack on startup via
`ChatPanel.replayHistory()`. The `command backstack` test was asserting
against a clean stack and tripped over the leaked prior-session
commands.

Per review feedback, **prior-session commands should remain in the back
stack** — replaying them is the intended behavior. So instead of
excluding them, the affected test starts from a clean slate by issuing
`@clear`.

### Changes
- **`chatPanel.ts` — `clear()`**: also reset the up-arrow back stack
(`commandHistory` / `historyIndex`). `@clear` ("reset the chat") now
clears the command recall history as well, so it can be used to start
from an empty stack.
- **`hostWindow.spec.ts` — `command backstack` test**: issue `@clear` at
the start of the test so the shared-session back stack begins empty,
then assert against this test's current-session commands (`@history`,
`@help`, `@config agent`). The startup-greeting expectation was removed
since `@clear` clears it along with the prior-session history.

The earlier exclusion-based commits on this branch (skipping replayed
entries, `@exit` filtering, ArrowUp/ArrowDown delta swap) were reverted
back to the base branch behavior, which keeps prior-session commands in
the back stack.

Net effect: prior-session commands stay recallable in normal use, and
the test deterministically walks `[@config agent, @help, @history]`,
clamping at `@history`.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
@robgruen robgruen temporarily deployed to development-fork June 7, 2026 02:49 — with GitHub Actions Inactive
@robgruen robgruen temporarily deployed to development-fork June 7, 2026 02:49 — with GitHub Actions Inactive
@robgruen robgruen marked this pull request as ready for review June 7, 2026 02:49
@robgruen robgruen enabled auto-merge June 7, 2026 02:49
@robgruen robgruen added this pull request to the merge queue Jun 7, 2026
Merged via the queue into main with commit e8e3699 Jun 7, 2026
23 checks passed
GeorgeNgMsft added a commit that referenced this pull request Jun 7, 2026
Adopts the per-bubble status-rail design that shipped on main (#2454) wholesale and wires the Electron Shell renderer to it via chat-ui:

- Drop our QueueChipController extraction in favor of main's inline helper pattern (mirrored after vscode-shell). Bridge now uses QueueStateMirror plus chipTargetRid/applyQueueChip/clearQueueChip/reconcileQueueChips helpers, with double-Esc cancel-all wired inline.
- Shell-side chip lifecycle (queued/running/cancel/promote, defensive cleanup in awaitCommand/requestCompleted, conversationChanged reset) matches the vscode webview implementation.

Chip color refresh: solid amber (#d99b1f) for queued, solid blue (#2480c4) for running, white labels and action icons. No opacity, applied uniformly via chat-ui so both surfaces stay in sync.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants