letagents 0.12.34 → 0.12.36

package/shared/ui/MessageSearchResults.vue

@@ -0,0 +1,106 @@
+<template>
+  <section v-if="visible" class="history-search" aria-label="Matches in this room">
+    <p v-if="status === 'loading'" class="history-search-note" role="status">Searching earlier messages…</p>
+    <p v-else-if="status === 'invalid'" class="history-search-note" role="status">{{ invalidText }}</p>
+    <p v-else-if="status === 'error'" class="history-search-note history-search-error" role="alert">{{ error }}</p>
+    <p v-else-if="!hits.length && !hasMore" class="history-search-note" role="status">No messages in this room match.</p>
+    <template v-else>
+      <h3 class="history-search-heading">
+        <span>All matches in this room</span>
+        <span class="history-search-count">{{ hits.length }}{{ hasMore ? "+" : "" }}</span>
+      </h3>
+      <ul class="history-search-list">
+        <li v-for="hit in hits" :key="hit.id" class="history-search-hit" :data-expanded="expanded.has(hit.id)">
+          <button
+            class="history-search-hit-toggle"
+            type="button"
+            :aria-expanded="expanded.has(hit.id)"
+            @click="toggle(hit.id)"
+          >
+            <span class="history-search-hit-meta">
+              <strong>{{ hit.sender }}</strong>
+              <time :datetime="hit.timestamp">{{ formatTime(hit.timestamp) }}</time>
+            </span>
+            <span class="history-search-hit-text">
+              <template v-for="(segment, index) in segments(hit)" :key="index">
+                <mark v-if="segment.match">{{ segment.text }}</mark>
+                <template v-else>{{ segment.text }}</template>
+              </template>
+            </span>
+          </button>
+          <button class="history-search-hit-show" type="button" @click="emit('show', hit.id)">Show in room</button>
+        </li>
+      </ul>
+      <p v-if="error" class="history-search-note history-search-error" role="alert">{{ error }}</p>
+      <button v-if="hasMore" class="history-search-more" type="button" :disabled="loadingMore" @click="emit('more')">
+        {{ loadingMore ? "Loading…" : "Show more" }}
+      </button>
+    </template>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import {
+  MESSAGE_SEARCH_MAX_QUERY_CHARS,
+  MESSAGE_SEARCH_MAX_TERMS,
+  highlightMessageSearchText,
+  messageSearchSnippet,
+  type MessageSearchSegment,
+} from "../message-search.mjs";
+
+export interface MessageSearchHit {
+  id: string;
+  /** The name people see for the sender. */
+  sender: string;
+  timestamp: string;
+  /** The text people read; rendered as plain text. */
+  text: string;
+}
+
+const props = defineProps<{
+  status: "idle" | "invalid" | "loading" | "ready" | "error";
+  /** Every match in the room's history, newest first. */
+  hits: readonly MessageSearchHit[];
+  terms: readonly string[];
+  hasMore: boolean;
+  loadingMore: boolean;
+  error: string | null;
+  /**
+   * How many matches the open timeline's own find already shows. It also
+   * matches sender and attachment names, so it can find what this list cannot;
+   * the list then stays quiet instead of claiming there is nothing.
+   */
+  loadedMatchCount: number;
+  formatTime: (timestamp: string) => string;
+}>();
+
+const emit = defineEmits<{
+  /** Bring this message into view in the room. */
+  show: [messageId: string];
+  more: [];
+}>();
+
+const expanded = ref(new Set<string>());
+// A new search starts with every result collapsed.
+watch(() => props.terms.join("\n"), () => { expanded.value = new Set(); });
+
+function toggle(messageId: string): void {
+  const next = new Set(expanded.value);
+  if (!next.delete(messageId)) next.add(messageId);
+  expanded.value = next;
+}
+
+function segments(hit: MessageSearchHit): MessageSearchSegment[] {
+  const text = expanded.value.has(hit.id) ? hit.text : messageSearchSnippet(hit.text, props.terms);
+  return highlightMessageSearchText(text, props.terms);
+}
+
+const invalidText = computed(() => props.error === "too_many_terms"
+  ? `Search for at most ${MESSAGE_SEARCH_MAX_TERMS} words or quoted phrases.`
+  : `Search for at most ${MESSAGE_SEARCH_MAX_QUERY_CHARS} characters.`);
+const visible = computed(() => props.status !== "idle"
+  && !(props.status === "ready" && !props.hits.length && !props.hasMore && props.loadedMatchCount > 0));
+</script>
+
+<style src="./message-search.css"></style>

package/shared/ui/PinnedMessages.vue

@@ -0,0 +1,129 @@
+<template>
+  <nav v-if="pins.length && !pinnedMessagesHidden" ref="rail" class="message-pin-rail" aria-label="Pinned messages"
+    :data-expanded="expanded" @keydown="onKeydown" @pointerenter="onPointerEnter" @pointerleave="scheduleClose"
+    @focusin="openPanel" @focusout="onFocusOut">
+    <button v-for="(pin, index) in pins" :key="pin.message_id" type="button" class="message-pin-tick"
+      data-pin-entry :data-pinned-message-id="pin.message_id" :tabindex="index === active ? 0 : -1"
+      :aria-label="`Pinned message from ${senderLabel(pin.sender)}: ${previewText(pin.snippet)}`"
+      :aria-current="selectedId === pin.message_id ? 'location' : undefined"
+      :data-active="selectedId === pin.message_id" @focus="active = index" @click="choose(pin.message_id)">
+      <span class="message-pin-bar" aria-hidden="true" />
+      <span v-if="expanded" class="message-pin-title" aria-hidden="true">{{ previewText(pin.snippet) }}</span>
+    </button>
+    <p v-if="expanded && loading" class="message-pin-status" role="status">Updating pins…</p>
+    <p v-if="expanded && error" class="message-pin-status" role="alert">{{ error }}</p>
+    <button v-if="error" type="button" class="message-pin-retry" :aria-label="`${error} Retry loading pinned messages`"
+      @click="$emit('refresh')">Retry</button>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, watch } from "vue";
+import type { MessagePin } from "../message-pins.mjs";
+import { usePinnedMessageVisibility } from "./usePinnedMessageVisibility";
+
+const props = defineProps<{ pins: readonly MessagePin[]; loading?: boolean; error?: string | null }>();
+const emit = defineEmits<{ reveal: [messageId: string]; refresh: [] }>();
+const { pinnedMessagesHidden } = usePinnedMessageVisibility();
+const rail = ref<HTMLElement | null>(null);
+const active = ref(0);
+const selectedId = ref<string | null>(null);
+const expanded = ref(false);
+let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+function cancelClose(): void { clearTimeout(closeTimer); }
+function openPanel(): void { cancelClose(); expanded.value = true; }
+function closePanel(): void { cancelClose(); expanded.value = false; }
+function onPointerEnter(event: PointerEvent): void {
+  cancelClose();
+  if (event.pointerType === "mouse" && window.matchMedia("(hover: hover) and (pointer: fine)").matches) openPanel();
+}
+function onFocusOut(event: FocusEvent): void {
+  if (!rail.value?.contains(event.relatedTarget as Node | null)) closePanel();
+}
+function scheduleClose(): void {
+  cancelClose();
+  closeTimer = setTimeout(() => {
+    if (!rail.value?.contains(document.activeElement)) closePanel();
+  }, 100);
+}
+function dismissOnEscape(event: KeyboardEvent): void {
+  if (event.key !== "Escape") return;
+  event.preventDefault();
+  event.stopPropagation();
+  closePanel();
+}
+function onOutsidePress(event: PointerEvent): void {
+  if (!rail.value?.contains(event.target as Node | null)) closePanel();
+}
+function choose(id: string): void {
+  selectedId.value = id;
+  closePanel();
+  emit("reveal", id);
+}
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape") { dismissOnEscape(event); return; }
+  if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key) || !props.pins.length) return;
+  event.preventDefault();
+  active.value = event.key === "Home" ? 0 : event.key === "End" ? props.pins.length - 1
+    : (active.value + (event.key === "ArrowDown" ? 1 : -1) + props.pins.length) % props.pins.length;
+  rail.value?.querySelectorAll<HTMLButtonElement>("[data-pin-entry]")[active.value]?.focus();
+}
+function senderLabel(value: string): string { return value.split("|")[0].trim(); }
+function previewText(value: string): string {
+  return value.replace(/!?\[([^\]]*)\]\([^)]*(?:\)|$)/g, "$1")
+    .replace(/^\s*(?:#{1,6}\s+|>\s*|[-+*]\s+|\d+[.)]\s+)/, "")
+    .replace(/\*\*|__|~~|`+/g, "").replace(/\s+/g, " ").trim() || "Message without text";
+}
+watch(expanded, (open) => {
+  if (open) {
+    document.addEventListener("keydown", dismissOnEscape, true);
+    document.addEventListener("pointerdown", onOutsidePress, true);
+  } else {
+    document.removeEventListener("keydown", dismissOnEscape, true);
+    document.removeEventListener("pointerdown", onOutsidePress, true);
+  }
+});
+watch([() => props.pins.map(pin => pin.message_id), pinnedMessagesHidden], ([ids, hidden], [previousIds]) => {
+  const focusWasInside = rail.value?.contains(document.activeElement);
+  const region = rail.value?.parentElement;
+  if (hidden || !ids.length) closePanel();
+  if (!ids.includes(selectedId.value || "")) selectedId.value = null;
+  const retainedIndex = ids.indexOf(previousIds[active.value]);
+  active.value = retainedIndex >= 0 ? retainedIndex : Math.min(active.value, Math.max(0, ids.length - 1));
+  if (focusWasInside) {
+    void nextTick(() => {
+      if (!hidden && ids.length) rail.value?.querySelectorAll<HTMLButtonElement>("[data-pin-entry]")[active.value]?.focus();
+      else if (region) { region.tabIndex = -1; region.focus({ preventScroll: true }); }
+    });
+  }
+});
+onBeforeUnmount(() => {
+  cancelClose();
+  document.removeEventListener("keydown", dismissOnEscape, true);
+  document.removeEventListener("pointerdown", onOutsidePress, true);
+});
+</script>
+
+<style>
+.message-pin-rail { position: absolute; grid-area: 1 / 1 / 2 / 2; top: 8px; left: 4px; z-index: 4; display: flex; flex-direction: column; box-sizing: border-box; width: 36px; max-height: calc(100% - 16px); padding: 4px; border: 1px solid transparent; border-radius: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
+.message-pin-rail::-webkit-scrollbar { display: none; }
+.message-pin-rail[data-expanded="true"] { width: min(420px, calc(100% - 8px)); border-color: var(--border-strong); background: var(--bg-elevated); box-shadow: var(--shadow-lg); }
+.message-pin-tick { display: flex; align-items: center; gap: 10px; flex: 0 0 28px; width: 100%; height: 28px; min-width: 0; padding: 0 3px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
+.message-pin-bar { display: flex; align-items: center; flex: 0 0 20px; }
+.message-pin-bar::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; }
+.message-pin-tick[data-active="true"] .message-pin-bar::before, .message-pin-tick:focus-visible .message-pin-bar::before { width: 20px; opacity: 1; }
+.message-pin-title { min-width: 0; padding-right: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
+.message-pin-tick:focus-visible, .message-pin-retry:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
+.message-pin-rail[data-expanded="true"] .message-pin-tick:focus-visible { background: var(--accent-hover); }
+.message-pin-tick:active { background: var(--accent-active); }
+.message-pin-retry { flex: 0 0 auto; border: 0; padding: 8px 0; border-radius: 4px; background: var(--bg-elevated); color: var(--text); font: inherit; font-size: 10px; cursor: pointer; }
+.message-pin-status { flex: 0 0 auto; margin: 8px; color: var(--text-secondary); font-size: 11px; overflow-wrap: anywhere; }
+@media (hover: hover) and (pointer: fine) {
+  .message-pin-rail[data-expanded="true"] .message-pin-tick:hover { background: var(--accent-hover); }
+  .message-pin-tick:hover .message-pin-bar::before { width: 20px; opacity: 1; }
+}
+@media (pointer: coarse) { .message-pin-tick { flex-basis: 44px; height: 44px; } }
+.message-pin-marker { display: inline-flex; vertical-align: middle; color: var(--text-secondary); margin-inline: 4px; }
+.message-pin-marker svg { display: block; width: 13px; height: 13px; flex: 0 0 auto; }
+</style>

package/shared/ui/TypingIndicator.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="room-typing-fold" :class="{ 'is-in': open }" data-testid="room-typing-indicator">
+    <span class="room-typing-status" role="status" aria-live="polite" aria-atomic="true">{{ label }}</span>
+    <div class="room-typing-clip" aria-hidden="true">
+      <div class="room-typing-pad"><div class="room-typing-row">
+        <span class="room-typing-marks" :data-count="marks.length">
+          <i v-for="(name, index) in marks" :key="index" :style="{ '--room-typing-color': colorFor?.(name) }"></i>
+        </span>
+        <span class="room-typing-copy">
+          <span :key="sentenceKey">
+            <template v-for="(part, index) in sentence" :key="index">
+              <strong v-if="part.name">{{ part.text }}</strong>
+              <template v-else>{{ part.text }}</template>
+            </template>
+          </span>
+        </span>
+        <span class="room-typing-wave">
+          <i v-for="index in 3" :key="index" :style="{ '--room-typing-color': waveColor(index - 1) }"></i>
+        </span>
+      </div></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { typingLabel, typingSentence } from '../room-typing.mjs';
+
+const props = defineProps<{
+  /** People typing now, one per account. Names are rendered as text, never as HTML. */
+  names: readonly string[];
+  /** The room's own sender colour, so a typer's dot matches the dot on their messages. */
+  colorFor?: (name: string) => string | undefined;
+}>();
+
+const MAX_MARKS = 3;
+const open = computed(() => props.names.length > 0);
+const label = computed(() => typingLabel(props.names));
+// Keep the last sentence while the row leaves, so the exit does not show an empty row.
+const shown = ref<readonly string[]>(props.names);
+watch(() => props.names, names => { if (names.length) shown.value = names; });
+const marks = computed(() => shown.value.slice(0, MAX_MARKS));
+const sentenceKey = computed(() => shown.value.join('\n'));
+const sentence = computed(() => typingSentence(shown.value));
+function waveColor(index: number): string | undefined {
+  const typers = marks.value;
+  return typers.length ? props.colorFor?.(typers[index % typers.length]) : undefined;
+}
+</script>
+<style scoped>
+/* One row, last in the room's live strip. Its metrics mirror .room-local-agent-work
+   so a person typing lines up with the agents working above it. */
+.room-typing-fold {
+  position: relative;
+  display: grid;
+  grid-template-rows: 0fr;
+  align-self: center;
+  width: min(var(--room-chat-content-max, 720px), 100%);
+  transition: grid-template-rows 140ms cubic-bezier(.22, 1, .36, 1), margin-top 140ms cubic-bezier(.22, 1, .36, 1);
+}
+.room-typing-fold.is-in { grid-template-rows: 1fr; transition-duration: 180ms; }
+.room-typing-clip { min-height: 0; overflow: hidden; }
+.room-typing-pad { padding-bottom: 8px; }
+.room-typing-fold:first-child .room-typing-pad { padding-top: 6px; }
+/* Under working agents, sit one row gap below them instead of a full list margin. */
+.room-local-agent-work-list + .room-typing-fold.is-in { margin-top: -4px; }
+.room-typing-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.room-typing-row {
+  display: grid;
+  grid-template-columns: 9px minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  width: fit-content;
+  max-width: 100%;
+  padding: 5px 8px 5px 3px;
+  color: var(--text-tertiary, var(--muted));
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 140ms ease, transform 140ms cubic-bezier(.22, 1, .36, 1);
+  pointer-events: none;
+}
+.room-typing-fold.is-in .room-typing-row { opacity: 1; transform: none; transition-duration: 180ms; }
+.room-typing-marks { display: flex; width: 9px; }
+.room-typing-marks[data-count="3"] { width: 12px; margin-left: -3px; }
+.room-typing-marks i {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--room-typing-color, currentColor);
+  box-shadow: 0 0 0 1.5px var(--bg, transparent);
+}
+.room-typing-marks i + i { margin-left: -3px; }
+.room-typing-copy {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.73rem;
+  font-weight: 640;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.room-typing-copy > span { animation: room-typing-swap 120ms ease; }
+.room-typing-copy strong { color: var(--text-secondary, inherit); font-size: 0.74rem; font-weight: 760; }
+.room-typing-wave { display: inline-flex; gap: 3px; align-items: center; }
+.room-typing-wave i {
+  width: 3px;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--room-typing-color, currentColor);
+  opacity: 0.35;
+  animation: room-typing-wave 1.25s ease-in-out infinite;
+}
+.room-typing-wave i:nth-child(2) { animation-delay: 140ms; }
+.room-typing-wave i:nth-child(3) { animation-delay: 280ms; }
+/* A closed row costs nothing: the wave only runs while someone is typing. */
+.room-typing-fold:not(.is-in) .room-typing-wave i { animation-play-state: paused; }
+@keyframes room-typing-wave {
+  0%, 48%, 100% { opacity: 0.35; transform: translateY(0); }
+  24% { opacity: 1; transform: translateY(-2.5px); }
+}
+@keyframes room-typing-swap { from { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .room-typing-fold, .room-typing-fold.is-in { transition: none; }
+  .room-typing-row, .room-typing-fold.is-in .room-typing-row { transform: none; transition: opacity 140ms ease; }
+  .room-typing-wave i { animation: none; opacity: 0.55; }
+  .room-typing-copy > span { animation: none; }
+}
+</style>

package/shared/ui/message-reactions.css

@@ -0,0 +1,254 @@
+/* Emoji reactions under a message, and the picker that adds one. Shared by the
+   desktop and web apps; every colour comes from tokens both apps define. */
+
+.message-reactions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.message-reaction {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  box-sizing: border-box;
+  height: 24px;
+  min-height: 0;
+  margin: 0;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-subtle);
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+button.message-reaction {
+  appearance: none;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    transform 120ms var(--ease-out, ease-out);
+}
+
+button.message-reaction:active {
+  transform: scale(0.96);
+}
+
+button.message-reaction:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 1px;
+}
+
+.message-reaction[aria-pressed="true"] {
+  border-color: color-mix(in srgb, var(--blue) 55%, transparent);
+  background: color-mix(in srgb, var(--blue) 14%, transparent);
+  color: var(--text);
+}
+
+.message-reaction-emoji {
+  font-size: 14px;
+  /* Emoji glyphs sit low in most system fonts; this centres them on the count. */
+  line-height: 1;
+  transform: translateY(-0.5px);
+}
+
+.message-reaction-count {
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+
+.message-reaction-add {
+  padding: 0 7px;
+  color: var(--text-tertiary);
+}
+
+.message-reaction-add svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  button.message-reaction:hover {
+    border-color: var(--border-strong);
+    color: var(--text);
+  }
+
+  button.message-reaction[aria-pressed="true"]:hover {
+    border-color: color-mix(in srgb, var(--blue) 75%, transparent);
+    background: color-mix(in srgb, var(--blue) 20%, transparent);
+  }
+}
+
+@media (pointer: coarse) {
+  .message-reaction {
+    height: 32px;
+    padding: 0 11px;
+  }
+}
+
+.message-reaction-picker {
+  position: fixed;
+  z-index: 1000;
+  box-sizing: border-box;
+  width: 284px;
+  max-width: calc(100vw - 16px);
+  padding: 8px;
+  border: 1px solid var(--border-strong);
+  border-radius: 12px;
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-lg);
+  color: var(--text);
+  font-family: var(--font-sans, inherit);
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity 140ms var(--ease-out, ease-out),
+    transform 140ms var(--ease-out, ease-out);
+}
+
+/* The picker grows out of the control that opened it. */
+.message-reaction-picker[data-side="above"][data-align="start"] { transform-origin: bottom left; }
+.message-reaction-picker[data-side="above"][data-align="end"] { transform-origin: bottom right; }
+.message-reaction-picker[data-side="below"][data-align="start"] { transform-origin: top left; }
+.message-reaction-picker[data-side="below"][data-align="end"] { transform-origin: top right; }
+
+@starting-style {
+  .message-reaction-picker {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+/* Opened from the keyboard, or not yet measured: no motion. */
+.message-reaction-picker[data-instant="true"],
+.message-reaction-picker[data-placed="false"] {
+  transition: none;
+}
+
+.message-reaction-picker[data-placed="false"] {
+  visibility: hidden;
+}
+
+.message-reaction-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 2px;
+}
+
+.message-reaction-picker-emoji {
+  appearance: none;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  aspect-ratio: 1;
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 100ms ease, transform 120ms var(--ease-out, ease-out);
+}
+
+.message-reaction-picker-emoji:active {
+  transform: scale(0.92);
+}
+
+.message-reaction-picker-emoji:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: -2px;
+}
+
+.message-reaction-picker-emoji[aria-pressed="true"] {
+  border-color: color-mix(in srgb, var(--blue) 55%, transparent);
+  background: color-mix(in srgb, var(--blue) 14%, transparent);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .message-reaction-picker-emoji:hover {
+    background: var(--bg-subtle);
+  }
+}
+
+.message-reaction-picker-custom {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+
+.message-reaction-picker-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  height: 30px;
+  margin: 0;
+  padding: 0 9px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+}
+
+.message-reaction-picker-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.message-reaction-picker-input:focus-visible {
+  border-color: var(--blue);
+  outline: 0;
+}
+
+.message-reaction-picker-input[aria-invalid="true"] {
+  border-color: var(--red-text);
+}
+
+.message-reaction-picker-hint {
+  margin: 0;
+  color: var(--red-text);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button.message-reaction,
+  .message-reaction-picker-emoji {
+    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+  }
+
+  button.message-reaction:active,
+  .message-reaction-picker-emoji:active {
+    transform: none;
+  }
+
+  .message-reaction-picker {
+    transition: opacity 140ms ease;
+    transform: none;
+  }
+
+  @starting-style {
+    .message-reaction-picker {
+      transform: none;
+    }
+  }
+}