#13381: UI: add Slack-style emoji shortcode autocomplete to chat (Emre #1 PR)

## Summary Adds Slack-style `:emoji:` shortcode autocomplete to the Control UI chat textarea. ## What it does - Type `:` followed by 2+ characters to trigger an emoji autocomplete popup - Navigate with ↑/↓ arrow keys, select with Enter or Tab, dismiss with Escape - Replaces the `:shortcode:` text with the actual emoji character - Supports 200+ common emoji shortcodes (smile, heart, thumbsup, fire, etc.) ## Implementation - **`ui/src/ui/emoji-data.ts`** — Lightweight shortcode→emoji map (~200 entries, no external deps) - **`ui/src/ui/components/emoji-autocomplete.ts`** — Lit component with keyboard navigation, filtering, and text replacement - **`ui/src/styles/components/emoji-autocomplete.css`** — Styled using existing CSS variables for theme consistency - **`ui/src/ui/components/emoji-autocomplete.test.ts`** — Unit tests for filtering, selection, and edge cases - **`ui/src/ui/views/chat.ts`** — Integration into the chat textarea (input handler + keydown interception) - **`ui/src/styles.css`** — CSS import added ## Design decisions - No external emoji libraries — keeps bundle small - Minimum 2 chars after `:` before showing suggestions (reduces noise) - Max 8 suggestions shown at a time - Uses existing CSS variables (`--card`, `--border`, `--ring`, etc.) for consistent theming - Follows existing Lit patterns (legacy decorators, `experimentalDecorators`) ## Testing - All existing tests pass (914 files, 5908 tests, 0 failures) - New unit tests for the autocomplete component - `pnpm build && pnpm check && pnpm test` all green <!-- greptile_comment --> <h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This PR adds a Slack-style `:emoji:` shortcode autocomplete to the chat compose textarea by introducing a small in-repo shortcode→emoji dataset (`ui/src/ui/emoji-data.ts`), a pure Lit render/logic module for filtering + keyboard handling (`ui/src/ui/components/emoji-autocomplete.ts`), styling for the popup (`ui/src/styles/chat/emoji-autocomplete.css` imported from `ui/src/styles/chat.css`), and integrates it into the chat view (`ui/src/ui/views/chat.ts`) via `@input` updates and `@keydown` interception. The overall integration approach fits the existing UI architecture (Lit render functions + state stored in the app render state), but there are a couple of correctness issues to address before merge: the hover behavior in the popup is currently a no-op despite being wired up, the documented “2+ chars after `:`” trigger doesn’t match the implementation, and the autocomplete state is stored at module scope in `chat.ts` which can leak/stale across session/tab changes. <h3>Confidence Score: 3/5</h3> - This PR has user-visible correctness issues that should be fixed before merging. - Core functionality and tests look reasonable, but there are confirmed behavior mismatches (hover selection handler is effectively dead code, and the documented minimum trigger length doesn’t match the implementation) plus module-scoped state in the chat view that can persist across session/tab changes and leave stale UI state. - ui/src/ui/components/emoji-autocomplete.ts, ui/src/ui/views/chat.ts <!-- greptile_other_comments_section --> _{(2/5) Greptile learns from your feedback when you react with thumbs up/down!} <!-- /greptile_comment -->