letagents 0.12.33 → 0.12.35

package/shared/ui/MessageReactionBar.vue

@@ -0,0 +1,65 @@
+<template>
+  <div v-if="reactions.length" class="message-reactions" role="group" aria-label="Reactions">
+    <component
+      :is="canReact ? 'button' : 'span'"
+      v-for="reaction in reactions"
+      :key="reaction.emoji"
+      class="message-reaction"
+      :type="canReact ? 'button' : undefined"
+      :role="canReact ? undefined : 'img'"
+      :aria-pressed="canReact ? viewerReacted(reaction.emoji) : undefined"
+      :aria-label="label(reaction)"
+      :title="label(reaction)"
+      @click="canReact && emit('toggle', reaction.emoji)"
+    >
+      <span class="message-reaction-emoji" aria-hidden="true">{{ reaction.emoji }}</span>
+      <span class="message-reaction-count" aria-hidden="true">{{ reaction.count }}</span>
+    </component>
+    <button
+      v-if="canReact"
+      class="message-reaction message-reaction-add"
+      type="button"
+      aria-label="Add reaction"
+      title="Add reaction"
+      aria-haspopup="dialog"
+      :aria-expanded="pickerOpen ?? false"
+      @click="emit('add', $event)"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M22 11v1a10 10 0 1 1-9-10" />
+        <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+        <path d="M9 9h.01M15 9h.01" />
+        <path d="M16 5h6M19 2v6" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { describeMessageReaction, type MessageReaction } from "../message-reactions.mjs";
+
+const props = defineProps<{
+  reactions: readonly MessageReaction[];
+  viewerLogin: string | null;
+  /** Whether the viewer reacted with this emoji, including when they are past the listed reactors. */
+  viewerReacted: (emoji: string) => boolean;
+  canReact: boolean;
+  pickerOpen?: boolean;
+}>();
+
+const emit = defineEmits<{
+  toggle: [emoji: string];
+  /** The click that asked for the picker; its target is the anchor. */
+  add: [event: MouseEvent];
+}>();
+
+function label(reaction: MessageReaction): string {
+  const description = describeMessageReaction(reaction, props.viewerLogin);
+  // The list may not name the viewer when many people reacted.
+  return props.viewerReacted(reaction.emoji) && !description.startsWith("You")
+    ? `You and others reacted with ${reaction.emoji}`
+    : description;
+}
+</script>
+
+<style src="./message-reactions.css"></style>

package/shared/ui/MessageReactionPicker.vue

@@ -0,0 +1,291 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="anchor"
+      ref="panel"
+      class="message-reaction-picker"
+      role="dialog"
+      aria-label="Add a reaction"
+      :style="{ left: `${position.left}px`, top: `${position.top}px` }"
+      :data-side="position.side"
+      :data-align="position.align"
+      :data-placed="placed"
+      :data-instant="instant"
+      @keydown="handleKeydown"
+      @focusout="handleFocusOut"
+      @pointerdown.stop
+      @contextmenu.stop
+    >
+      <div class="message-reaction-picker-grid" role="group" aria-label="Common reactions">
+        <button
+          v-for="(emoji, index) in MESSAGE_REACTION_QUICK_EMOJI"
+          :key="emoji"
+          class="message-reaction-picker-emoji"
+          type="button"
+          :tabindex="index === activeIndex ? 0 : -1"
+          :aria-pressed="viewerReacted(emoji)"
+          @click="choose(emoji)"
+          @focus="activeIndex = index"
+        >
+          {{ emoji }}
+        </button>
+      </div>
+      <form class="message-reaction-picker-custom" novalidate @submit.prevent="chooseCustom">
+        <input
+          ref="customInput"
+          v-model="custom"
+          class="message-reaction-picker-input"
+          type="text"
+          autocomplete="off"
+          autocapitalize="off"
+          spellcheck="false"
+          maxlength="32"
+          placeholder="Or type any emoji, then Enter"
+          aria-label="React with any emoji"
+          :aria-invalid="customInvalid"
+          :aria-describedby="customInvalid ? hintId : undefined"
+          @input="customInvalid = false"
+        />
+        <p v-if="customInvalid" :id="hintId" class="message-reaction-picker-hint" role="alert">
+          Enter one emoji.
+        </p>
+      </form>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, reactive, ref, useId, watch } from "vue";
+import { MESSAGE_REACTION_QUICK_EMOJI, normalizeMessageReactionEmoji } from "../message-reactions.mjs";
+
+export interface MessageReactionPickerAnchor {
+  element: HTMLElement;
+  /** Context-menu position, kept relative to the message as it scrolls. */
+  point?: { x: number; y: number };
+}
+
+const COLUMNS = 8;
+const GAP = 6;
+const MARGIN = 8;
+
+const props = defineProps<{
+  /** Live control or message anchoring the picker; null closes it. */
+  anchor: MessageReactionPickerAnchor | null;
+  viewerReacted: (emoji: string) => boolean;
+  /** Opened from the keyboard: appear without motion. */
+  instant?: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [emoji: string];
+  /**
+   * `restoreFocus` is true when the person dismissed it from the keyboard or
+   * chose an emoji. `pressed` is what a dismissing press landed on, so the
+   * host can tell a press on the control that opened the picker.
+   */
+  close: [restoreFocus: boolean, pressed?: EventTarget | null];
+}>();
+
+const panel = ref<HTMLElement | null>(null);
+const customInput = ref<HTMLInputElement | null>(null);
+const activeIndex = ref(0);
+const custom = ref("");
+const customInvalid = ref(false);
+const placed = ref(false);
+const position = reactive({ left: 0, top: 0, side: "above" as "above" | "below", align: "start" as "start" | "end" });
+const hintId = useId();
+let frame: number | null = null;
+let pointOffset: { x: number; y: number } | null = null;
+let focusOnPlacement = false;
+let scrollViewport: HTMLElement | null = null;
+
+function nearestScrollViewport(element: HTMLElement): HTMLElement | null {
+  for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+    if (/^(auto|scroll)$/.test(window.getComputedStyle(parent).overflowY)) return parent;
+  }
+  return null;
+}
+
+function place(): void {
+  const element = panel.value;
+  const source = props.anchor;
+  if (!element || !source) return;
+  if (!source.element.isConnected) {
+    dismiss();
+    return;
+  }
+  // All geometry is read in this animation frame, before reactive style writes.
+  const rect = source.element.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const clip = scrollViewport?.getBoundingClientRect();
+  const visible = {
+    left: Math.max(0, clip?.left ?? 0),
+    right: Math.min(viewportWidth, clip?.right ?? viewportWidth),
+    top: Math.max(0, clip?.top ?? 0),
+    bottom: Math.min(viewportHeight, clip?.bottom ?? viewportHeight),
+  };
+  if (source.point && !pointOffset) {
+    pointOffset = { x: source.point.x - rect.left, y: source.point.y - rect.top };
+  }
+  const anchor = pointOffset
+    ? { left: rect.left + pointOffset.x, right: rect.left + pointOffset.x,
+        top: rect.top + pointOffset.y, bottom: rect.top + pointOffset.y }
+    : rect;
+  // A context menu follows its click point, even when the rest of a tall
+  // message is still visible. Controls stay anchored while partially visible.
+  if (anchor.bottom <= visible.top || anchor.top >= visible.bottom
+    || anchor.right <= visible.left || anchor.left >= visible.right
+    || visible.bottom <= visible.top || visible.right <= visible.left) {
+    dismiss();
+    return;
+  }
+  const { width, height } = element.getBoundingClientRect();
+  const fitsAbove = anchor.top - GAP - height >= MARGIN;
+  const fitsBelow = anchor.bottom + GAP + height <= viewportHeight - MARGIN;
+  position.side = fitsAbove || !fitsBelow ? "above" : "below";
+  const top = position.side === "above" ? anchor.top - GAP - height : anchor.bottom + GAP;
+  // Grow away from whichever edge of the window the control is nearer to.
+  position.align = (anchor.left + anchor.right) / 2 > viewportWidth / 2 ? "end" : "start";
+  const left = position.align === "end" ? anchor.right - width : anchor.left;
+  position.left = Math.round(Math.min(Math.max(left, MARGIN), Math.max(MARGIN, viewportWidth - width - MARGIN)));
+  position.top = Math.round(Math.min(Math.max(top, MARGIN), Math.max(MARGIN, viewportHeight - height - MARGIN)));
+  placed.value = true;
+}
+
+function schedulePlace(): void {
+  if (frame !== null || !listening) return;
+  frame = window.requestAnimationFrame(() => {
+    frame = null;
+    place();
+    if (focusOnPlacement && placed.value) {
+      focusOnPlacement = false;
+      // Position must be rendered before the initially hidden picker can focus.
+      void nextTick(() => { if (listening && props.anchor) focusEmoji(0); });
+    }
+  });
+}
+
+function focusEmoji(index: number): void {
+  const count = MESSAGE_REACTION_QUICK_EMOJI.length;
+  activeIndex.value = Math.min(Math.max(index, 0), count - 1);
+  panel.value?.querySelectorAll<HTMLButtonElement>(".message-reaction-picker-emoji")[activeIndex.value]?.focus();
+}
+
+function choose(emoji: string): void {
+  emit("select", emoji);
+  emit("close", true);
+}
+
+function chooseCustom(): void {
+  const emoji = normalizeMessageReactionEmoji(custom.value);
+  if (!emoji) {
+    customInvalid.value = true;
+    return;
+  }
+  choose(emoji);
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    emit("close", true);
+    return;
+  }
+  const inInput = event.target === customInput.value;
+  // There are two tab stops: the active emoji and the custom input. Exiting
+  // either end returns to the opener instead of losing focus in the teleport.
+  if (event.key === "Tab" && (event.shiftKey ? !inInput : inInput)) {
+    event.preventDefault();
+    event.stopPropagation();
+    emit("close", true);
+    return;
+  }
+  if (inInput) {
+    // Leave the caret keys to the text field, except the way back up to the grid.
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusEmoji(activeIndex.value);
+    }
+    return;
+  }
+  const index = activeIndex.value;
+  const last = MESSAGE_REACTION_QUICK_EMOJI.length - 1;
+  const moves: Record<string, number | "input"> = {
+    ArrowRight: Math.min(index + 1, last),
+    ArrowLeft: Math.max(index - 1, 0),
+    ArrowUp: index - COLUMNS >= 0 ? index - COLUMNS : index,
+    ArrowDown: index + COLUMNS <= last ? index + COLUMNS : "input",
+    Home: 0,
+    End: last,
+  };
+  const move = moves[event.key];
+  if (move === undefined) return;
+  event.preventDefault();
+  if (move === "input") customInput.value?.focus();
+  else focusEmoji(move);
+}
+
+function handleFocusOut(event: FocusEvent): void {
+  // Focus left the picker for something else in the app: it is done.
+  const next = event.relatedTarget;
+  if (next instanceof Node && !panel.value?.contains(next)) emit("close", false);
+}
+
+function dismiss(): void {
+  emit("close", false);
+}
+
+// These listen in the capture phase, so they also see events from inside the picker.
+function dismissUnlessInside(event: Event): void {
+  if (event.target instanceof Node && panel.value?.contains(event.target)) return;
+  emit("close", false, event.type === "pointerdown" ? event.target : null);
+}
+
+let listening = false;
+function listen(on: boolean): void {
+  if (on === listening) return;
+  listening = on;
+  if (on) {
+    window.addEventListener("pointerdown", dismissUnlessInside, true);
+    window.addEventListener("scroll", schedulePlace, true);
+    window.addEventListener("resize", schedulePlace);
+    window.addEventListener("blur", dismiss);
+  } else {
+    window.removeEventListener("pointerdown", dismissUnlessInside, true);
+    window.removeEventListener("scroll", schedulePlace, true);
+    window.removeEventListener("resize", schedulePlace);
+    window.removeEventListener("blur", dismiss);
+    if (frame !== null) window.cancelAnimationFrame(frame);
+    frame = null;
+    focusOnPlacement = false;
+    scrollViewport = null;
+  }
+}
+
+watch(
+  () => props.anchor,
+  async (anchor, previous) => {
+    if (anchor && !previous) {
+      placed.value = false;
+      custom.value = "";
+      customInvalid.value = false;
+      activeIndex.value = 0;
+      pointOffset = null;
+      scrollViewport = nearestScrollViewport(anchor.element);
+      focusOnPlacement = true;
+      listen(true);
+      await nextTick();
+      schedulePlace();
+    } else if (!anchor && previous) {
+      listen(false);
+    }
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => listen(false));
+</script>
+
+<style src="./message-reactions.css"></style>

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,124 @@
+<template>
+  <div v-if="pins.length" class="message-pins-row">
+    <button ref="trigger" type="button" class="message-pins-trigger" aria-haspopup="dialog"
+      :aria-expanded="open" @click="toggle">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M16 3 21 8M17 4 9 12 5 13 11 19 12 15 20 7M2 22 8 16" />
+      </svg>
+      Pinned ({{ pins.length }})
+    </button>
+    <Teleport to="body">
+      <section v-if="open" ref="panel" class="message-pins-panel" role="dialog" aria-label="Pinned messages"
+        :style="position" @keydown="onKeydown">
+        <p v-if="loading" role="status">Updating pins…</p>
+        <p v-if="error" role="alert">{{ error }} <button type="button" @click="$emit('refresh')">Retry</button></p>
+        <ol aria-label="Pinned messages">
+          <li v-for="(pin, index) in pins" :key="pin.message_id">
+            <button type="button" data-pin-entry :tabindex="index === active ? 0 : -1"
+              @focus="active = index" @click="choose(pin.message_id)">
+              <span class="message-pin-byline"><strong>{{ pin.sender }}</strong> <time :datetime="pin.timestamp">{{ timeLabel(pin.timestamp) }}</time></span>
+              <span class="message-pin-snippet">{{ pin.snippet || 'Message without text' }}</span>
+              <span class="message-pin-attribution">Pinned by {{ pin.pinned_by.name }}</span>
+            </button>
+          </li>
+        </ol>
+      </section>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
+import type { MessagePin } from "../message-pins.mjs";
+
+const props = defineProps<{ pins: readonly MessagePin[]; loading?: boolean; error?: string | null }>();
+const emit = defineEmits<{ reveal: [messageId: string]; refresh: [] }>();
+const trigger = ref<HTMLButtonElement | null>(null);
+const panel = ref<HTMLElement | null>(null);
+const open = ref(false);
+const active = ref(0);
+const left = ref(8);
+const top = ref(8);
+const maxHeight = ref(360);
+const position = computed(() => ({ left: `${left.value}px`, top: `${top.value}px`, maxHeight: `${maxHeight.value}px` }));
+function place(): void {
+  const bounds = trigger.value?.getBoundingClientRect();
+  if (!bounds) return;
+  left.value = Math.max(8, Math.min(bounds.left, window.innerWidth - Math.min(420, window.innerWidth - 16) - 8));
+  top.value = Math.min(bounds.bottom + 4, window.innerHeight - 80);
+  maxHeight.value = Math.max(64, Math.min(360, window.innerHeight - top.value - 8));
+}
+function focusEntry(): void {
+  panel.value?.querySelectorAll<HTMLButtonElement>("[data-pin-entry]")[active.value]?.focus();
+}
+async function toggle(): Promise<void> {
+  if (open.value) { close(); return; }
+  active.value = 0;
+  place();
+  open.value = true;
+  await nextTick();
+  focusEntry();
+}
+function close(restoreFocus = true): void {
+  open.value = false;
+  if (restoreFocus) trigger.value?.focus();
+}
+function choose(id: string): void { close(); emit("reveal", id); }
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape" || event.key === "Tab") { event.preventDefault(); event.stopPropagation(); close(); return; }
+  if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) 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;
+  focusEntry();
+}
+function outside(event: PointerEvent): void {
+  const target = event.target as Node | null;
+  if (target && !trigger.value?.contains(target) && !panel.value?.contains(target)) { close(false); }
+}
+function timeLabel(value: string): string {
+  const date = new Date(value);
+  return Number.isNaN(date.valueOf()) ? value : date.toLocaleString();
+}
+watch(open, (value) => {
+  if (value) {
+    document.addEventListener("pointerdown", outside, true);
+    window.addEventListener("resize", place);
+  } else cleanup();
+}, { flush: "sync" });
+watch(() => props.pins.length, (length) => {
+  if (!length) {
+    const region = trigger.value?.parentElement?.parentElement;
+    const focusWasInside = panel.value?.contains(document.activeElement) || document.activeElement === trigger.value;
+    close(false);
+    if (focusWasInside && region) {
+      region.tabIndex = -1;
+      void nextTick(() => region.focus({ preventScroll: true }));
+    }
+  }
+  else active.value = Math.min(active.value, length - 1);
+});
+function cleanup(): void {
+  document.removeEventListener("pointerdown", outside, true);
+  window.removeEventListener("resize", place);
+}
+onBeforeUnmount(cleanup);
+</script>
+
+<style>
+.message-pins-row { flex: 0 0 auto; position: relative; padding: 3px 12px; border-bottom: 1px solid var(--border); }
+.message-pins-trigger { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; padding: 4px; }
+.message-pins-panel { position: fixed; z-index: 1200; box-sizing: border-box; width: min(420px, calc(100vw - 16px)); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-lg); font-family: var(--font-sans, inherit); font-size: 13px; }
+.message-pins-panel ol { list-style: none; margin: 0; padding: 0; }
+.message-pins-panel [data-pin-entry] { display: flex; flex-direction: column; gap: 4px; width: 100%; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; text-align: left; padding: 9px; cursor: pointer; }
+.message-pins-trigger:focus-visible, .message-pins-panel button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
+@media (hover: hover) and (pointer: fine) {
+  .message-pins-trigger:hover, .message-pins-panel [data-pin-entry]:hover { background: var(--accent-hover); color: var(--text); }
+}
+.message-pins-trigger:active, .message-pins-panel [data-pin-entry]:active { background: var(--accent-active); color: var(--text); }
+.message-pin-byline { display: flex; flex-wrap: wrap; gap: 8px; }
+.message-pin-byline time, .message-pin-attribution { font-size: 11px; color: var(--text-secondary); }
+.message-pin-snippet { overflow-wrap: anywhere; white-space: pre-wrap; }
+.message-pin-marker { display: inline-flex; vertical-align: middle; color: var(--text-secondary); margin-inline: 4px; }
+.message-pin-marker svg, .message-pins-trigger svg { display: block; width: 13px; height: 13px; flex: 0 0 auto; }
+</style>

package/shared/ui/TypingIndicator.vue

@@ -0,0 +1,22 @@
+<template>
+  <span class="room-typing-indicator" role="status" aria-live="polite" aria-atomic="true">{{ label }}</span>
+</template>
+<script setup lang="ts">
+defineProps<{ label: string }>();
+</script>
+<style scoped>
+.room-typing-indicator {
+  position: absolute;
+  top: 0;
+  left: 18px;
+  right: 18px;
+  height: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  color: var(--text-tertiary, var(--muted));
+  font-size: 11px;
+  line-height: 12px;
+}
+</style>

package/shared/ui/WakeRulesPanel.vue

@@ -146,6 +146,7 @@ function rowHasFocus(ruleId: string): boolean {
 function outcomeLabel(rule: WakeRule): string {
   if (rule.status === "fired" || (rule.status === "active" && rule.fire_count > 0)) return "Woke";
   if (rule.status === "expired") return "Stopped waiting";
+  if (rule.status === "retired") return rule.ended_reason ? `Ended: ${rule.ended_reason}` : "Ended";
   return rule.cancelled_by ? `Cancelled by ${rule.cancelled_by.label}` : "Cancelled";
 }