letagents 0.12.35 → 0.12.36

package/shared/ui/PinnedMessages.vue

@@ -1,124 +1,129 @@
 <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 }})
+  <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>
-    <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>
+    <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 { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
+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 trigger = ref<HTMLButtonElement | null>(null);
-const panel = ref<HTMLElement | null>(null);
-const open = ref(false);
+const { pinnedMessagesHidden } = usePinnedMessageVisibility();
+const rail = ref<HTMLElement | null>(null);
 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));
+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 focusEntry(): void {
-  panel.value?.querySelectorAll<HTMLButtonElement>("[data-pin-entry]")[active.value]?.focus();
+function scheduleClose(): void {
+  cancelClose();
+  closeTimer = setTimeout(() => {
+    if (!rail.value?.contains(document.activeElement)) closePanel();
+  }, 100);
 }
-async function toggle(): Promise<void> {
-  if (open.value) { close(); return; }
-  active.value = 0;
-  place();
-  open.value = true;
-  await nextTick();
-  focusEntry();
+function dismissOnEscape(event: KeyboardEvent): void {
+  if (event.key !== "Escape") return;
+  event.preventDefault();
+  event.stopPropagation();
+  closePanel();
 }
-function close(restoreFocus = true): void {
-  open.value = false;
-  if (restoreFocus) trigger.value?.focus();
+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 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;
+  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;
-  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); }
+  rail.value?.querySelectorAll<HTMLButtonElement>("[data-pin-entry]")[active.value]?.focus();
 }
-function timeLabel(value: string): string {
-  const date = new Date(value);
-  return Number.isNaN(date.valueOf()) ? value : date.toLocaleString();
+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(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 }));
-    }
+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);
   }
-  else active.value = Math.min(active.value, length - 1);
 });
-function cleanup(): void {
-  document.removeEventListener("pointerdown", outside, true);
-  window.removeEventListener("resize", place);
-}
-onBeforeUnmount(cleanup);
+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-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; }
+.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-pins-trigger:hover, .message-pins-panel [data-pin-entry]:hover { background: var(--accent-hover); color: var(--text); }
+  .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; }
 }
-.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; }
+@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, .message-pins-trigger svg { display: block; width: 13px; height: 13px; flex: 0 0 auto; }
+.message-pin-marker svg { display: block; width: 13px; height: 13px; flex: 0 0 auto; }
 </style>

package/shared/ui/TypingIndicator.vue

@@ -1,22 +1,134 @@
 <template>
-  <span class="room-typing-indicator" role="status" aria-live="polite" aria-atomic="true">{{ label }}</span>
+  <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">
-defineProps<{ label: string }>();
+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>
-.room-typing-indicator {
+/* 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;
-  top: 0;
-  left: 18px;
-  right: 18px;
-  height: 12px;
+  width: 1px;
+  height: 1px;
   overflow: hidden;
+  clip-path: inset(50%);
   white-space: nowrap;
-  text-overflow: ellipsis;
-  pointer-events: none;
+}
+.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));
-  font-size: 11px;
-  line-height: 12px;
+  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/room-agent-work.css

@@ -0,0 +1,178 @@
+/* Live strip: working agents, then people typing. Pinned between the timeline and the composer. */
+.room-live-strip {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.room-local-agent-work-list {
+  display: grid;
+  gap: 4px;
+  align-self: center;
+  width: min(var(--room-chat-content-max), 100%);
+  margin: 6px 0 8px;
+}
+
+.room-local-agent-work {
+  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;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-secondary);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  box-shadow: none;
+  appearance: none;
+}
+
+.room-local-agent-work:focus-visible {
+  outline: 2px solid var(--blue, #3b82f6);
+  outline-offset: 1px;
+}
+
+.room-local-agent-work:active {
+  background: var(--accent-active);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .room-local-agent-work:hover {
+    background: var(--accent-hover);
+  }
+}
+
+.room-local-agent-work-pulse {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #34d399;
+  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.08);
+  animation: local-agent-work-pulse 1.8s ease-in-out infinite;
+}
+
+/* An agent that waits to try again is not working: its row rests. */
+.room-local-agent-work[data-waiting] .room-local-agent-work-pulse {
+  background: var(--amber, #f59e0b);
+  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);
+  animation: none;
+}
+
+.room-local-agent-work[data-waiting] .room-local-agent-work-dots {
+  display: none;
+}
+
+.room-local-agent-work-copy {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 7px;
+}
+
+.room-local-agent-work strong {
+  color: var(--text-secondary);
+  font-size: 0.74rem;
+  font-weight: 760;
+  white-space: nowrap;
+}
+
+.room-local-agent-work-copy span {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-tertiary);
+  font-size: 0.73rem;
+  font-weight: 640;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.room-local-agent-work-dots {
+  display: inline-flex;
+  gap: 3px;
+  align-items: center;
+}
+
+.room-local-agent-work-dots i {
+  width: 3px;
+  height: 3px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.32;
+  animation: local-agent-work-dot 1.1s ease-in-out infinite;
+}
+
+.room-local-agent-work-dots i:nth-child(2) {
+  animation-delay: 120ms;
+}
+
+.room-local-agent-work-dots i:nth-child(3) {
+  animation-delay: 240ms;
+}
+
+/* What the owner can do about the wait in the row above. It stands under that row's text. */
+.room-local-agent-work-action {
+  justify-self: start;
+  margin: 0 0 2px 20px;
+  padding: 3px 9px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--accent-hover);
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 640;
+  cursor: pointer;
+  appearance: none;
+}
+
+.room-local-agent-work-action:focus-visible {
+  outline: 2px solid var(--blue, #3b82f6);
+  outline-offset: 1px;
+}
+
+.room-local-agent-work-action:active {
+  background: var(--accent-active);
+}
+
+.room-local-agent-work-overflow {
+  margin: 2px 0 0;
+  padding-left: 4px;
+  color: var(--text-tertiary);
+  font-size: 0.72rem;
+  font-weight: 640;
+}
+
+@keyframes local-agent-work-pulse {
+  0%,
+  100% {
+    opacity: 0.72;
+    transform: scale(0.88);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes local-agent-work-dot {
+  0%,
+  100% {
+    opacity: 0.25;
+    transform: translateY(0);
+  }
+  45% {
+    opacity: 0.82;
+    transform: translateY(-1px);
+  }
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+  .room-local-agent-work-pulse, .room-local-agent-work-dots i { animation: none; }
+}