From 51aff5413a060ce000917c01e83ca3cee1399148 Mon Sep 17 00:00:00 2001
From: DevMando <codefilez@gmail.com>
Date: Fri, 17 Jul 2026 00:42:01 -0700
Subject: [PATCH] Add emoji input (picker + :shortcode: autocomplete) and
 message reactions

Input side: an emoji flyout button next to Send inserts at the caret, and
Slack-style :shortcode: typing pops the existing suggestion list (exact
:name: auto-replaces inline). Transcript side: hovering an agent response
reveals a ghosted add-reaction button that opens a floating picker card;
chosen emojis render as pills under the message and ride along with the
user's next message as a clearly-framed feedback preamble, so the model
sees how the user reacted without any harness or protocol changes.
Transcript scrollbars are now theme-colored as well.
---
 .../Controls/ChatTabView.xaml                 |  31 +++-
 .../Controls/ChatTabView.xaml.cs              | 118 +++++++++++-
 src/MandoCode.Desktop/MainWindow.xaml.cs      |   4 +
 .../Services/TranscriptHtmlBuilder.cs         | 172 ++++++++++++++++++
 .../ViewModels/ChatController.cs              |  32 ++++
 5 files changed, 354 insertions(+), 3 deletions(-)

diff --git a/src/MandoCode.Desktop/Controls/ChatTabView.xaml b/src/MandoCode.Desktop/Controls/ChatTabView.xaml
index d628172..d3f6cfc 100644
--- a/src/MandoCode.Desktop/Controls/ChatTabView.xaml
+++ b/src/MandoCode.Desktop/Controls/ChatTabView.xaml
@@ -261,9 +261,10 @@
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*"/>
                 <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="Auto"/>
             </Grid.ColumnDefinitions>
 
-            <Border x:Name="SuggestionsPanel" Grid.Row="0" Grid.ColumnSpan="2" Visibility="Collapsed"
+            <Border x:Name="SuggestionsPanel" Grid.Row="0" Grid.ColumnSpan="3" Visibility="Collapsed"
                     Background="{StaticResource MandoPanelBrush}"
                     BorderBrush="{StaticResource MandoBorderBrush}" BorderThickness="1"
                     CornerRadius="8" Margin="0,0,0,8" MaxHeight="220">
@@ -287,7 +288,33 @@
                      AcceptsReturn="True" TextWrapping="Wrap" MaxHeight="140"
                      PreviewKeyDown="InputBox_PreviewKeyDown" TextChanged="InputBox_TextChanged"/>
 
-            <Button x:Name="SendButton" Grid.Row="1" Grid.Column="1" Click="SendButton_Click"
+            <Button x:Name="EmojiButton" Grid.Row="1" Grid.Column="1"
+                    VerticalAlignment="Stretch" Padding="10,0"
+                    Background="Transparent" BorderThickness="0"
+                    ToolTipService.ToolTip="Insert emoji — or type :fire: shortcodes (Win + . opens the full Windows picker)">
+                <FontIcon Glyph="&#xE76E;" FontSize="16"/>
+                <Button.Flyout>
+                    <Flyout Placement="TopEdgeAlignedRight">
+                        <StackPanel Width="312" Spacing="6">
+                            <GridView x:Name="EmojiGrid" SelectionMode="None" IsItemClickEnabled="True"
+                                      ItemClick="EmojiGrid_ItemClick" MaxHeight="248"
+                                      ScrollViewer.VerticalScrollBarVisibility="Auto">
+                                <GridView.ItemTemplate>
+                                    <DataTemplate x:DataType="x:String">
+                                        <TextBlock Text="{x:Bind}" FontFamily="Segoe UI Emoji" FontSize="20"
+                                                   Width="30" Height="30" TextAlignment="Center"
+                                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                    </DataTemplate>
+                                </GridView.ItemTemplate>
+                            </GridView>
+                            <TextBlock Text="Tip: type :fire: style shortcodes in the input box for suggestions, or press Win + . for the full Windows emoji picker"
+                                       FontSize="11" Opacity="0.6" TextWrapping="Wrap"/>
+                        </StackPanel>
+                    </Flyout>
+                </Button.Flyout>
+            </Button>
+
+            <Button x:Name="SendButton" Grid.Row="1" Grid.Column="2" Click="SendButton_Click"
                     VerticalAlignment="Stretch" MinWidth="88"
                     Style="{StaticResource AccentButtonStyle}">
                 <StackPanel Orientation="Horizontal" Spacing="6">
diff --git a/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs b/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs
index 0a5f9ca..c2c7fc8 100644
--- a/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs
+++ b/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs
@@ -48,7 +48,7 @@ public sealed partial class ChatTabView : UserControl, IApprovalUi
 
     private readonly ObservableCollection<CommandSuggestion> _suggestions = new();
 
-    private enum SuggestMode { None, Command, File }
+    private enum SuggestMode { None, Command, File, Emoji }
     private SuggestMode _suggestMode = SuggestMode.None;
     private int _tokenStart;   // index of the '@' (File mode) — replaced on accept
     private int _tokenEnd;     // caret position when suggestions were computed
@@ -101,6 +101,7 @@ public ChatTabView(Window owner, AgentSession session, TranscriptHtmlBuilder htm
         // This tab's approval service renders into this tab's overlay.
         Session.Approvals.Ui = this;
         SuggestionsList.ItemsSource = _suggestions;
+        EmojiGrid.ItemsSource = QuickEmojis;
         TranscriptView.DefaultBackgroundColor = ThemeManager.C(ThemeManager.Current.Background);
 
         // Method groups, not lambdas: Shutdown has to be able to detach them. A closed tab that
@@ -200,6 +201,10 @@ public async Task InitializeAsync()
                     OpenTranscriptPath(msg["open-file:".Length..]);
                 else if (msg != null && msg.StartsWith("copy:", StringComparison.Ordinal))
                     ClipboardCopyRequested?.Invoke(msg["copy:".Length..]);
+                else if (msg != null && msg.StartsWith("react:", StringComparison.Ordinal))
+                    HandleReaction(msg["react:".Length..], add: true);
+                else if (msg != null && msg.StartsWith("unreact:", StringComparison.Ordinal))
+                    HandleReaction(msg["unreact:".Length..], add: false);
             };
 
             // Serve bundled web assets (highlight.js) to the transcript document.
@@ -225,6 +230,24 @@ public async Task InitializeAsync()
         await Task.Run(_controller.InitializeAsync);
     }
 
+    /// <summary>A reaction chip was toggled in the transcript. Payload is JSON from the
+    /// transcript's rxChip handler: { id, emoji, snippet }. Adds/removes the pending entry
+    /// the controller folds into the next model turn; malformed payloads are ignored.</summary>
+    private void HandleReaction(string json, bool add)
+    {
+        try
+        {
+            using var doc = JsonDocument.Parse(json);
+            var id = doc.RootElement.GetProperty("id").GetString() ?? "";
+            var emoji = doc.RootElement.GetProperty("emoji").GetString() ?? "";
+            var snippet = doc.RootElement.GetProperty("snippet").GetString() ?? "";
+            if (emoji.Length == 0) return;
+            if (add) _controller.AddReaction(id, emoji, snippet);
+            else _controller.RemoveReaction(id, emoji);
+        }
+        catch { /* malformed payload — not ours to crash over */ }
+    }
+
     private Task WaitForLoadedAsync()
     {
         if (TranscriptView.IsLoaded) return Task.CompletedTask;
@@ -799,6 +822,42 @@ private void UpdateSuggestions()
                 return;
         }
 
+        // :emoji: shortcodes (Slack-style). Two behaviors on the token containing the caret:
+        //  - ":name:" fully typed with an exact match → replace it with the emoji right here.
+        //  - ":fra" partially typed (2+ chars, no closing ':') → suggest matching shortcodes.
+        // The 2-char minimum keeps ordinary colons (":)", "note:") from popping the list.
+        if (tokenStart < caret && tokenStart < text.Length && text[tokenStart] == ':')
+        {
+            var body = text[(tokenStart + 1)..caret];
+            if (body.Length > 1 && body.EndsWith(':'))
+            {
+                var name = body[..^1].ToLowerInvariant();
+                var exact = EmojiShortcodes.FirstOrDefault(s => s.Name == name).Emoji;
+                if (exact != null)
+                {
+                    InputBox.Text = text[..tokenStart] + exact + text[caret..];
+                    InputBox.SelectionStart = tokenStart + exact.Length;
+                    HideSuggestions();
+                    return;
+                }
+            }
+            else if (body.Length >= 2 && !body.Contains(':'))
+            {
+                var frag = body.ToLowerInvariant();
+                var matches = EmojiShortcodes.Where(s => s.Name.StartsWith(frag))
+                    .Concat(EmojiShortcodes.Where(s => !s.Name.StartsWith(frag) && s.Name.Contains(frag)));
+
+                if (ShowSuggestions(SuggestMode.Emoji, tokenStart, caret,
+                        matches.Select(m => new CommandSuggestion
+                        {
+                            Command = ":" + m.Name + ":",
+                            Description = m.Emoji,
+                            InsertText = m.Emoji,
+                        })))
+                    return;
+            }
+        }
+
         HideSuggestions();
     }
 
@@ -844,6 +903,16 @@ private void AcceptSuggestion(CommandSuggestion s)
             // folder → drilled listing reopens; file → token ended with a space, stays hidden.
             UpdateSuggestions();
         }
+        else if (_suggestMode == SuggestMode.Emoji)
+        {
+            var text = InputBox.Text;
+            var start = Math.Min(_tokenStart, text.Length);
+            var end = Math.Min(_tokenEnd, text.Length);
+            var emoji = s.InsertText ?? s.Command;
+            InputBox.Text = text[..start] + emoji + text[end..];
+            InputBox.SelectionStart = start + emoji.Length;
+            HideSuggestions();
+        }
         else
         {
             InputBox.Text = s.Command + " ";
@@ -853,6 +922,51 @@ private void AcceptSuggestion(CommandSuggestion s)
         InputBox.Focus(FocusState.Programmatic);
     }
 
+    /// <summary>Curated quick-pick set for the emoji flyout; Win + . remains the full picker.</summary>
+    private static readonly string[] QuickEmojis =
+    {
+        "😀", "😄", "😂", "🤣", "😊", "😉", "😍", "🥰", "😎", "🤓", "🤔", "🙃",
+        "😅", "😬", "😭", "🥳", "🤯", "😴", "🙄", "😤", "😱", "🫠", "🤗", "🫡",
+        "👍", "👎", "👌", "🙏", "👏", "💪", "🤝", "✌️", "🤞", "👀", "🧠", "💯",
+        "🔥", "✨", "🚀", "🎉", "🎯", "💡", "⚡", "⭐", "❤️", "💔", "✅", "❌",
+        "⚠️", "❓", "❗", "💬", "🐛", "🔧", "🔒", "🔑", "📝", "📌", "📁", "🖥️",
+        "☕", "🍕", "🎮", "🤖",
+    };
+
+    /// <summary>Slack-style shortcode → emoji. Aliases are separate rows pointing at the same
+    /// emoji. Names must be lowercase; lookup lowercases the typed fragment.</summary>
+    private static readonly (string Name, string Emoji)[] EmojiShortcodes =
+    {
+        ("grinning", "😀"), ("smile", "😄"), ("joy", "😂"), ("rofl", "🤣"),
+        ("blush", "😊"), ("wink", "😉"), ("heart_eyes", "😍"), ("smiling_hearts", "🥰"),
+        ("sunglasses", "😎"), ("coolglasses", "😎"), ("nerd", "🤓"), ("thinking", "🤔"),
+        ("upside_down", "🙃"), ("sweat_smile", "😅"), ("grimacing", "😬"), ("sob", "😭"),
+        ("partying", "🥳"), ("mind_blown", "🤯"), ("sleeping", "😴"), ("eye_roll", "🙄"),
+        ("triumph", "😤"), ("scream", "😱"), ("melting", "🫠"), ("hugs", "🤗"),
+        ("salute", "🫡"), ("thumbsup", "👍"), ("+1", "👍"), ("thumbsdown", "👎"),
+        ("-1", "👎"), ("ok_hand", "👌"), ("pray", "🙏"), ("clap", "👏"),
+        ("muscle", "💪"), ("handshake", "🤝"), ("victory", "✌️"), ("crossed_fingers", "🤞"),
+        ("eyes", "👀"), ("brain", "🧠"), ("100", "💯"), ("fire", "🔥"),
+        ("sparkles", "✨"), ("rocket", "🚀"), ("tada", "🎉"), ("party_popper", "🎉"),
+        ("dart", "🎯"), ("bulb", "💡"), ("idea", "💡"), ("zap", "⚡"),
+        ("star", "⭐"), ("heart", "❤️"), ("broken_heart", "💔"), ("check", "✅"),
+        ("white_check_mark", "✅"), ("x", "❌"), ("cross", "❌"), ("warning", "⚠️"),
+        ("question", "❓"), ("exclamation", "❗"), ("speech_balloon", "💬"), ("bug", "🐛"),
+        ("wrench", "🔧"), ("lock", "🔒"), ("key", "🔑"), ("memo", "📝"),
+        ("note", "📝"), ("pushpin", "📌"), ("pin", "📌"), ("folder", "📁"),
+        ("desktop", "🖥️"), ("coffee", "☕"), ("pizza", "🍕"), ("video_game", "🎮"),
+        ("robot", "🤖"),
+    };
+
+    private void EmojiGrid_ItemClick(object sender, ItemClickEventArgs e)
+    {
+        if (e.ClickedItem is not string emoji || !InputBox.IsEnabled) return;
+        var caret = Math.Min(InputBox.SelectionStart, InputBox.Text.Length);
+        InputBox.Text = InputBox.Text.Insert(caret, emoji);
+        InputBox.SelectionStart = caret + emoji.Length;
+        InputBox.Focus(FocusState.Programmatic);
+    }
+
     private void HideSuggestions()
     {
         _suggestMode = SuggestMode.None;
@@ -1122,6 +1236,7 @@ private void ShowPlanApprovalBar(ApprovalRequest request, Action<string> onChose
         // Gate input while the plan is awaiting a decision.
         InputBox.IsEnabled = false;
         SendButton.IsEnabled = false;
+        EmojiButton.IsEnabled = false;
 
         PlanApprovalBar.Visibility = Visibility.Visible;
         ApprovalStateChanged?.Invoke(this);
@@ -1153,6 +1268,7 @@ private void HidePlanApprovalBar()
         PlanApprovalBar.Visibility = Visibility.Collapsed;
         InputBox.IsEnabled = true;
         SendButton.IsEnabled = true;
+        EmojiButton.IsEnabled = true;
         ApprovalStateChanged?.Invoke(this);
         InputBox.Focus(FocusState.Programmatic);
     }
diff --git a/src/MandoCode.Desktop/MainWindow.xaml.cs b/src/MandoCode.Desktop/MainWindow.xaml.cs
index 02e1614..fb06934 100644
--- a/src/MandoCode.Desktop/MainWindow.xaml.cs
+++ b/src/MandoCode.Desktop/MainWindow.xaml.cs
@@ -23,6 +23,10 @@ public sealed class CommandSuggestion
 {
     public string Command { get; init; } = "";
     public string Description { get; init; } = "";
+
+    /// <summary>What accepting the row inserts, when that differs from <see cref="Command"/>
+    /// (e.g. the ":fire:" row inserts 🔥). Null means insert the command itself.</summary>
+    public string? InsertText { get; init; }
 }
 
 /// <summary>Row model for the snapshot summarizer dropdown — a model name plus whether it's a cloud
diff --git a/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs b/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
index 3daf151..6afa56b 100644
--- a/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
+++ b/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
@@ -397,6 +397,44 @@ CSS generated content so it never pollutes the copied innerText. */
   .md pre:hover .copy-chip, .assistant:hover > .copy-chip { opacity: 1; }
   .copy-chip:hover { color: var(--fg); border-color: var(--accent); }
 
+  /* Reactions, Teams-style. A ghosted add-reaction button fades in on hover next to the
+     copy chip; clicking it opens a floating picker card (mirrors the input box's emoji
+     flyout). Chosen reactions sit under the message as pills — no space is reserved
+     until one exists. Delivery to the model: ChatController.SubmitAsync. */
+  .react-ghost { position: absolute; top: 6px; right: 56px; z-index: 1; opacity: 0;
+    transition: opacity 0.12s; background: var(--bg); color: var(--dim);
+    border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px;
+    font-size: 12px; cursor: pointer;
+    font-family: "Segoe UI Emoji", "Segoe UI", sans-serif; }
+  .assistant:hover > .react-ghost { opacity: 0.55; }
+  .react-ghost:hover { opacity: 1 !important; border-color: var(--accent); color: var(--fg); }
+  /* The copy chip widens to "Copied ✓" for ~1.4s after a click; the ghost sits close
+     enough to collide, so it ducks out for the duration of the flash. */
+  .copy-chip.copied ~ .react-ghost { opacity: 0 !important; pointer-events: none; }
+  #rx-pop { position: absolute; z-index: 50; display: none; width: 316px;
+    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
+    padding: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.45); }
+  #rx-pop .rx { background: none; border: 1px solid transparent; border-radius: 6px;
+    padding: 2px 5px; font-size: 17px; line-height: 22px; cursor: pointer;
+    font-family: "Segoe UI Emoji", "Segoe UI", sans-serif; }
+  #rx-pop .rx:hover { background: var(--bg); border-color: var(--border); }
+  #rx-pop .rx.on { background: var(--bg); border-color: var(--accent); }
+  /* flex-wrap is the safety net: if emoji glyphs render wider than budgeted (font
+     version varies by Windows build), the row wraps inside the card instead of
+     bleeding past its border. */
+  #rx-pop .rx-quick { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
+  #rx-pop .rx-more-btn { margin-left: auto; background: none; border: none;
+    color: var(--dim); font-size: 12px; cursor: pointer; padding: 2px 6px; }
+  #rx-pop .rx-more-btn:hover { color: var(--fg); }
+  #rx-pop .rx-grid { display: none; flex-wrap: wrap; gap: 2px; margin-top: 6px;
+    padding-top: 6px; border-top: 1px solid var(--border); max-height: 156px;
+    overflow-y: auto; }
+  .rx-tray { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
+  .rx-pill { background: var(--panel); border: 1px solid var(--accent); border-radius: 999px;
+    padding: 1px 9px; font-size: 13px; line-height: 19px; cursor: pointer;
+    font-family: "Segoe UI Emoji", "Segoe UI", sans-serif; }
+  .rx-pill:hover { border-color: var(--dim); opacity: 0.85; }
+
   /* Consecutive operation cards group into a collapsible run; it stays open while
      the run is active and collapses once a non-operation block lands after it. */
   details.op-group { margin: 2px 0; }
@@ -423,6 +461,16 @@ the run is active and collapses once a non-operation block lands after it. */
   #findbar button:hover { color: var(--fg); }
   mark.find-hit { background: var(--gold); color: #000; border-radius: 2px; }
   mark.find-hit.find-current { background: var(--accent); color: #fff; }
+
+  /* Scrollbars — Chromium's stock chrome ignores the theme; restyle every scroll surface
+     (page, code blocks, reaction picker grid) to match it. */
+  ::-webkit-scrollbar { width: 10px; height: 10px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px;
+    border: 2px solid transparent; background-clip: padding-box; }
+  ::-webkit-scrollbar-thumb:hover { background-color: var(--dim); }
+  ::-webkit-scrollbar-corner { background: transparent; }
+  #rx-pop .rx-grid::-webkit-scrollbar { width: 7px; }
 </style>
 </head>
 <body>
@@ -506,6 +554,129 @@ function addCopyChips() {
     });
   }
 
+  // --- emoji reactions on assistant responses: hover ghost → picker card → pills ---
+  // Toggling posts react:/unreact: with a JSON payload; the snippet lets the preamble
+  // on the user's next turn say WHICH response was reacted to.
+  const RX_QUICK = ['👍', '👎', '❤️', '🔥', '🎉', '🤔', '😂'];
+  const RX_MORE = ['😀', '😄', '😊', '😉', '😍', '🥰', '😎', '🤓', '🙃', '😅', '😬', '😭',
+    '🥳', '🤯', '😴', '🙄', '😤', '😱', '🫠', '🤗', '🫡', '👌', '🙏', '👏', '💪', '🤝',
+    '✌️', '🤞', '👀', '🧠', '💯', '✨', '🚀', '🎯', '💡', '⚡', '⭐', '💔', '✅', '❌',
+    '⚠️', '❓', '❗', '💬', '🐛', '🔧', '🔒', '🔑', '📝', '📌', '📁', '🖥️', '☕', '🍕',
+    '🎮', '🤖'];
+  let rxSeq = 0;
+  let rxCard = null;   // the card the open picker targets
+
+  const rxPop = document.createElement('div');
+  rxPop.id = 'rx-pop';
+  document.body.appendChild(rxPop);
+
+  function rxSnippet(card) {
+    const md = card.querySelector('.md');
+    return (md ? md.innerText : '').trim().replace(/\s+/g, ' ').slice(0, 80);
+  }
+  function rxPillFor(card, emoji) {
+    const tray = card.querySelector('.rx-tray');
+    if (!tray) return null;
+    return Array.prototype.find.call(tray.children, function (p) { return p.textContent === emoji; });
+  }
+  // Toggle a reaction on a card: pill tray + picker highlight + postMessage, all in one place.
+  function rxToggle(card, emoji) {
+    const existing = rxPillFor(card, emoji);
+    if (existing) {
+      existing.remove();
+      const tray = card.querySelector('.rx-tray');
+      if (tray && !tray.children.length) tray.remove();
+      window.chrome.webview.postMessage('unreact:' +
+        JSON.stringify({ id: card.dataset.rxId, emoji: emoji, snippet: '' }));
+    } else {
+      let tray = card.querySelector('.rx-tray');
+      if (!tray) {
+        tray = document.createElement('div');
+        tray.className = 'rx-tray';
+        card.appendChild(tray);
+      }
+      const pill = document.createElement('button');
+      pill.className = 'rx-pill';
+      pill.textContent = emoji;
+      pill.title = 'Click to remove reaction';
+      pill.addEventListener('click', function (ev) {
+        ev.stopPropagation();
+        rxToggle(card, emoji);
+      });
+      tray.appendChild(pill);
+      window.chrome.webview.postMessage('react:' +
+        JSON.stringify({ id: card.dataset.rxId, emoji: emoji, snippet: rxSnippet(card) }));
+    }
+    // Picking (or un-picking) from the open picker dismisses it — one-shot action,
+    // like Teams/Slack. Multiple reactions = reopen; chosen ones show highlighted.
+    if (rxPop.style.display === 'block' && rxCard === card) closeRxPop();
+  }
+  function rxChip(parent, emoji) {
+    const b = document.createElement('button');
+    b.className = 'rx' + (rxCard && rxPillFor(rxCard, emoji) ? ' on' : '');
+    b.textContent = emoji;
+    b.addEventListener('click', function (ev) {
+      ev.stopPropagation();
+      rxToggle(rxCard, emoji);
+    });
+    parent.appendChild(b);
+  }
+  function openRxPop(card, anchor) {
+    rxCard = card;
+    rxPop.innerHTML = '';
+    const quick = document.createElement('div');
+    quick.className = 'rx-quick';
+    RX_QUICK.forEach(function (e) { rxChip(quick, e); });
+    const moreBtn = document.createElement('button');
+    moreBtn.className = 'rx-more-btn';
+    moreBtn.textContent = 'More ▾';
+    quick.appendChild(moreBtn);
+    rxPop.appendChild(quick);
+    const grid = document.createElement('div');
+    grid.className = 'rx-grid';
+    RX_MORE.forEach(function (e) { rxChip(grid, e); });
+    rxPop.appendChild(grid);
+    moreBtn.addEventListener('click', function (ev) {
+      ev.stopPropagation();
+      const opening = grid.style.display !== 'flex';
+      grid.style.display = opening ? 'flex' : 'none';
+      moreBtn.textContent = opening ? 'Less ▴' : 'More ▾';
+    });
+    // Anchor under the ghost button, right-aligned; flip above when near the viewport bottom.
+    rxPop.style.display = 'block';
+    const r = anchor.getBoundingClientRect();
+    const pw = rxPop.offsetWidth, ph = rxPop.offsetHeight;
+    const left = Math.max(8, Math.min(r.right - pw, window.innerWidth - pw - 8)) + window.scrollX;
+    let top = r.bottom + 6 + window.scrollY;
+    if (r.bottom + ph + 12 > window.innerHeight) top = Math.max(window.scrollY + 8, r.top - ph - 6 + window.scrollY);
+    rxPop.style.left = left + 'px';
+    rxPop.style.top = top + 'px';
+  }
+  function closeRxPop() { rxPop.style.display = 'none'; rxCard = null; }
+  document.addEventListener('click', function (e) {
+    if (rxPop.style.display === 'block' && !rxPop.contains(e.target)) closeRxPop();
+  });
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') closeRxPop();
+  });
+
+  function addReactionGhosts() {
+    log.querySelectorAll('.assistant:not([data-rx])').forEach(function (card) {
+      card.setAttribute('data-rx', '1');
+      card.dataset.rxId = String(++rxSeq);
+      const ghost = document.createElement('button');
+      ghost.className = 'react-ghost';
+      ghost.textContent = '🙂+';
+      ghost.title = 'React to this response';
+      ghost.addEventListener('click', function (ev) {
+        ev.stopPropagation();
+        if (rxPop.style.display === 'block' && rxCard === card) { closeRxPop(); return; }
+        openRxPop(card, ghost);
+      });
+      card.appendChild(ghost);
+    });
+  }
+
   window.__append = function (html) {
     const nearBottom = (window.innerHeight + window.scrollY) >= (document.body.scrollHeight - 60);
     const wrap = document.createElement('div');
@@ -513,6 +684,7 @@ function addCopyChips() {
     while (wrap.firstChild) placeChild(wrap.firstChild);
     highlightNew();
     addCopyChips();
+    addReactionGhosts();
     if (nearBottom) window.scrollTo(0, document.body.scrollHeight);
     updatePill();
   };
diff --git a/src/MandoCode.Desktop/ViewModels/ChatController.cs b/src/MandoCode.Desktop/ViewModels/ChatController.cs
index e0ac0ea..77e9a7e 100644
--- a/src/MandoCode.Desktop/ViewModels/ChatController.cs
+++ b/src/MandoCode.Desktop/ViewModels/ChatController.cs
@@ -45,6 +45,25 @@ public sealed partial class ChatController
     private readonly List<string> _armedContexts = new();
     private readonly HashSet<int> _armedSnapshotIds = new();   // dedupe: don't queue the same snapshot twice
 
+    /// <summary>Emoji reactions clicked on transcript responses since the last send. Same
+    /// ride-along mechanism as <see cref="_armedContexts"/>: folded into the next message's
+    /// preamble and cleared once delivered. CardId is the transcript's per-response counter;
+    /// the snippet tells the model WHICH response was reacted to.</summary>
+    private readonly List<(string CardId, string Emoji, string Snippet)> _pendingReactions = new();
+
+    /// <summary>Reaction chip toggled on in the transcript (re-clicking a different chip on
+    /// the same response accumulates — multiple reactions per response are fine).</summary>
+    public void AddReaction(string cardId, string emoji, string snippet)
+    {
+        _pendingReactions.RemoveAll(r => r.CardId == cardId && r.Emoji == emoji);
+        _pendingReactions.Add((cardId, emoji, snippet));
+    }
+
+    /// <summary>Reaction chip toggled off. Only pending (undelivered) reactions can be
+    /// retracted; once sent with a turn it's already part of the conversation.</summary>
+    public void RemoveReaction(string cardId, string emoji) =>
+        _pendingReactions.RemoveAll(r => r.CardId == cardId && r.Emoji == emoji);
+
     private CancellationTokenSource? _requestCts;
     private bool _isProcessing;
 
@@ -359,6 +378,19 @@ public async Task SubmitAsync(string input)
                 _armedSnapshotIds.Clear();   // a new batch can re-import the same snapshots next time
             }
 
+            // Emoji reactions ride along the same way — factual feedback the model can steer
+            // on, clearly framed as metadata so it's never mistaken for typed text.
+            if (_pendingReactions.Count > 0)
+            {
+                var lines = string.Join("\n", _pendingReactions.Select(r =>
+                    $"- {r.Emoji} on your response beginning: “{r.Snippet}”"));
+                processedInput =
+                    "[The user reacted to earlier responses with emoji — a feedback signal, not text they typed:]\n" +
+                    lines +
+                    "\n\n[Current request:]\n" + processedInput;
+                _pendingReactions.Clear();
+            }
+
             if (needsPlanning)
             {
                 processedInput += "\n\n[system: this request looks multi-step. " +