Emoji support: message-box picker, :shortcode: autocomplete, and reactions the agent learns from

[DevMando]

Summary

This PR makes conversations with the agent more expressive in three ways: users can now insert emojis while composing messages, complete emoji shortcodes as they type, and react to the agent's responses — with those reactions passed along to the AI model as feedback it can adjust to. It also includes a small visual polish fix for scrollbars.

No changes were made to the agent protocol, the model integration, or any backend behavior — everything here is user-interface work plus message composition.

What's new

1. Emoji picker in the message box

A smiley button now sits between the message input and the Send button. Clicking it opens a small card with 64 curated emojis (faces, gestures, and developer favorites like the bug and rocket). Picking one inserts it exactly where the user's cursor is. The card also reminds users that Win + . opens the full Windows emoji picker. The button disables itself whenever the input is locked (e.g., while a plan approval is pending), so emojis can never be injected at the wrong moment.

2. Emoji shortcodes while typing

Typing a colon followed by a couple of letters (for example :fi) pops up the same suggestion list used for slash-commands and file mentions, showing matching emoji shortcodes such as :fire: 🔥. Users can accept with Enter, Tab, or a click. Typing a complete code like :fire: converts to the emoji instantly, the way Slack does it. About 70 common names and aliases are supported, and ordinary uses of colons (like times or :) faces) never trigger the popup.

3. Reactions on agent responses — delivered to the model

Hovering over any agent response reveals a subtle "add reaction" button next to the existing Copy button (the same pattern Teams and Slack use). Clicking it opens a floating picker with seven quick choices (👍 👎 ❤️ 🔥 🎉 🤔 😂) and a "More" section with the full set. Chosen reactions appear as small pills under the message; clicking a pill removes it. Users can react to the latest response or scroll back to older ones, with multiple reactions per message supported.

The differentiator: reactions are not just cosmetic. When the user sends their next message, any reactions they left are included with it as clearly labeled feedback — for example, "the user reacted 🔥 to your response beginning: 'Here's the refactored version…'". The model reads this as a factual signal (explicitly framed so it is never mistaken for something the user typed) and can adjust course accordingly. Reactions are only delivered with real messages to the model — slash-commands and shell commands don't consume them — and removing a reaction before the next send retracts it entirely.

4. Theme-matched scrollbars in the chat view

Scrollbars inside the chat transcript (the main scroll, code blocks, and the new reaction picker) previously used the browser's default gray styling regardless of the app theme. They now draw from the active theme's colors.

Why it matters

Reacting with an emoji is far lower-friction than typing "that was good" or "not quite right" — and because the reaction reaches the model, it becomes a lightweight steering mechanism, not just decoration. The input-side features bring the app up to par with the emoji ergonomics users expect from modern messaging tools.

Scope and risk

• Five files changed, ~354 lines added; all changes are in the desktop UI layer (input box, chat transcript rendering, and next-message composition).
• No agent/harness protocol changes, no API changes, no new dependencies, no data-format or storage changes.
• Builds clean with zero warnings.

How to verify

1. Launch the app and click the smiley button next to Send — pick an emoji, confirm it lands at the cursor.
2. Type :fire: in the message box — confirm it converts to 🔥, and that typing :fi offers suggestions.
3. Ask the agent anything, hover its response, click the add-reaction button, pick 🔥 — confirm a pill appears under the message and the picker closes.
4. Send a follow-up message — the model's reply should reflect awareness of the reaction (the reaction preamble rides along invisibly; the user's own message appears unchanged in the chat).
5. Confirm scrollbars in the chat match the theme.