letagents 0.12.34 → 0.12.36

package/shared/ui/message-search.css

@@ -0,0 +1,186 @@
+/* Matches from a room's earlier history, listed under the find control.
+   Shared by the desktop and web apps; colours come from tokens both define. */
+
+.history-search {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 0;
+  color: var(--text);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.history-search-note {
+  margin: 0;
+  padding: 2px 2px 4px;
+  color: var(--text-secondary);
+}
+
+.history-search-error {
+  color: var(--red-text);
+}
+
+.history-search-heading {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0;
+  padding: 0 2px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.history-search-count {
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+
+.history-search-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.history-search-hit {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 4px 8px;
+  padding: 6px 8px;
+  border-radius: 8px;
+}
+
+.history-search-hit-toggle {
+  appearance: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.history-search-hit-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.history-search-hit-meta strong {
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.history-search-hit-meta time {
+  flex-shrink: 0;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.history-search-hit-text {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--text-secondary);
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.history-search-hit[data-expanded="true"] .history-search-hit-text {
+  display: block;
+  max-height: 40vh;
+  overflow-y: auto;
+  color: var(--text);
+  white-space: pre-wrap;
+}
+
+.history-search-hit-text mark {
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--amber) 32%, transparent);
+  color: inherit;
+}
+
+.history-search-hit-show,
+.history-search-more {
+  appearance: none;
+  min-height: 0;
+  margin: 0;
+  padding: 3px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: border-color 120ms ease, color 120ms ease, transform 120ms var(--ease-out, ease-out);
+}
+
+.history-search-more {
+  align-self: flex-start;
+  margin: 2px 8px 0;
+}
+
+.history-search-more:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.history-search-hit-show:active,
+.history-search-more:not(:disabled):active {
+  transform: scale(0.97);
+}
+
+.history-search-hit-toggle:focus-visible,
+.history-search-hit-show:focus-visible,
+.history-search-more:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .history-search-hit:hover {
+    background: var(--bg-subtle);
+  }
+
+  .history-search-hit-show:hover,
+  .history-search-more:not(:disabled):hover {
+    border-color: var(--border-strong);
+    color: var(--text);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .history-search-hit-show,
+  .history-search-more {
+    transition: border-color 120ms ease, color 120ms ease;
+  }
+
+  .history-search-hit-show:active,
+  .history-search-more:not(:disabled):active {
+    transform: none;
+  }
+}

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; }
+}

package/shared/ui/room-message-motion.ts

@@ -0,0 +1,143 @@
+/** Geometry and WAAPI effects shared by the real desktop and web timelines. */
+export interface MessageMotionIdentity { session?: string | null; key?: string | null }
+export interface MotionMessage extends MessageMotionIdentity {
+  id: string; stableId: string; text: string; outgoing?: boolean;
+}
+export function sameMotionAgent(a: MessageMotionIdentity, b: MessageMotionIdentity): boolean {
+  if (a.session && b.session) return a.session === b.session;
+  return Boolean(a.key && b.key && a.key.trim().toLowerCase() === b.key.trim().toLowerCase());
+}
+export function appendedMotionMessages(previous: readonly string[], messages: readonly MotionMessage[]): MotionMessage[] {
+  if (!previous.length) return [];
+  const last = messages.findIndex(message => message.stableId === previous.at(-1));
+  if (last < 0) return [];
+  const seen = new Set(previous);
+  return messages.slice(last + 1).filter(message => !seen.has(message.stableId));
+}
+const bubbleSelector = '.room-message-bubble, .message-bubble';
+const metaSelector = '.room-message-meta, .message-meta';
+const avatarSelector = '.room-chat-avatar, .message-avatar';
+const ease = 'cubic-bezier(.22,1,.36,1)';
+export interface WorkGeometry {
+  bounds: DOMRect; pulse: DOMRect; name: DOMRect; summary: DOMRect;
+  clone: HTMLElement; dots: Keyframe[];
+}
+export function captureWork(element: HTMLElement): WorkGeometry | null {
+  const pulse = element.querySelector<HTMLElement>('.room-local-agent-work-pulse');
+  const name = element.querySelector<HTMLElement>('strong');
+  const summary = element.querySelector<HTMLElement>('.room-local-agent-work-copy > span');
+  if (!pulse || !name || !summary) return null;
+  return {
+    bounds: element.getBoundingClientRect(), pulse: pulse.getBoundingClientRect(),
+    name: name.getBoundingClientRect(), summary: summary.getBoundingClientRect(),
+    clone: element.cloneNode(true) as HTMLElement,
+    dots: [...element.querySelectorAll('i')].map(dot => {
+      const style = getComputedStyle(dot); return { opacity: style.opacity, transform: style.transform };
+    }),
+  };
+}
+/** `work` is where work rows live when they are pinned outside the scrolling `viewport`. */
+export function createRoomMessageAnimator(viewport: () => HTMLElement | null, work: () => HTMLElement | null = () => null) {
+  const animations = new Set<Animation>();
+  const cleanups = new Set<() => void>();
+  function animate(element: Element | null, frames: Keyframe[], options: KeyframeAnimationOptions) {
+    if (!element || typeof element.animate !== 'function') return null;
+    const animation = element.animate(frames, options);
+    animations.add(animation);
+    animation.finished.then(() => animations.delete(animation), () => animations.delete(animation));
+    return animation;
+  }
+  function cancel() {
+    animations.forEach(animation => animation.cancel()); animations.clear();
+    cleanups.forEach(cleanup => cleanup()); cleanups.clear();
+  }
+  function layer() {
+    const element = document.createElement('div');
+    element.className = 'room-message-motion-layer';
+    element.setAttribute('aria-hidden', 'true'); element.inert = true;
+    Object.assign(element.style, { position: 'fixed', inset: '0', pointerEvents: 'none', zIndex: '50', overflow: 'hidden' });
+    document.body.append(element);
+    const cleanup = () => { element.remove(); cleanups.delete(cleanup); };
+    cleanups.add(cleanup);
+    return { element, cleanup };
+  }
+  function reveal(row: HTMLElement) {
+    animate(row, [{ opacity: 0, transform: 'translateY(6px)' }, { opacity: 1, transform: 'none' }], { duration: 200, easing: ease });
+  }
+  function move(positions: Map<HTMLElement, DOMRect>) {
+    positions.forEach((before, element) => {
+      if (!element.isConnected) return;
+      const delta = before.top - element.getBoundingClientRect().top;
+      if (Math.abs(delta) > 1) animate(element, [{ transform: `translateY(${delta}px)` }, { transform: 'none' }], { duration: 260, easing: ease });
+    });
+  }
+  function send(row: HTMLElement, source: DOMRect, keyboard: boolean) {
+    const bubble = row.querySelector<HTMLElement>(bubbleSelector), stream = viewport();
+    if (!bubble || !stream) return;
+    const target = bubble.getBoundingClientRect();
+    if (target.height > stream.clientHeight * .65) { reveal(row); return; }
+    const duration = keyboard ? 280 : 360;
+    const overlay = layer();
+    const clone = bubble.cloneNode(true) as HTMLElement;
+    // Copy inherited typography/tokens too: the flight lives outside the room's theme scope.
+    const style = getComputedStyle(bubble);
+    for (const property of style) clone.style.setProperty(property, style.getPropertyValue(property));
+    clone.removeAttribute('id'); clone.querySelectorAll('[id]').forEach(node => node.removeAttribute('id'));
+    Object.assign(clone.style, { position: 'absolute', left: `${target.left}px`, top: `${target.top}px`, width: `${target.width}px`, height: `${target.height}px`, maxWidth: 'none', margin: '0', transformOrigin: '0 0', pointerEvents: 'none' });
+    overlay.element.append(clone);
+    const opacity = bubble.style.opacity; bubble.style.opacity = '0';
+    const restore = () => { bubble.style.opacity = opacity; overlay.cleanup(); cleanups.delete(restore); };
+    cleanups.add(restore);
+    const dx = source.left - target.left - parseFloat(style.paddingLeft);
+    const dy = source.top - target.top - parseFloat(style.paddingTop);
+    const flight = animate(clone, [
+      { transform: `translate(${dx}px,${dy}px) scale(.98)`, opacity: .8, easing: ease },
+      { transform: 'none', opacity: 1 },
+    ], { duration });
+    if (flight) flight.finished.then(restore, restore); else restore();
+    for (const selector of [metaSelector, avatarSelector]) animate(row.querySelector(selector), [
+      { opacity: 0, transform: 'translateY(5px)' }, { opacity: 1, transform: 'none' },
+    ], { duration: duration * .45, delay: duration * .35, fill: 'backwards', easing: ease });
+  }
+  function reply(row: HTMLElement, source: WorkGeometry) {
+    const bubble = row.querySelector<HTMLElement>(bubbleSelector), stream = viewport();
+    if (!bubble || !stream) return;
+    const target = bubble.getBoundingClientRect(), list = stream.getBoundingClientRect();
+    // The flight starts in the pinned work rows and lands in the list, so it is clipped to both.
+    const pinned = work()?.getBoundingClientRect();
+    const left = Math.min(list.left, pinned?.left ?? list.left), top = Math.min(list.top, pinned?.top ?? list.top);
+    const bottom = Math.max(list.bottom, pinned?.bottom ?? list.bottom);
+    const bounds = { left, top, bottom, width: Math.max(list.right, pinned?.right ?? list.right) - left, height: bottom - top };
+    if (source.bounds.bottom < bounds.top || source.bounds.top > bounds.bottom || target.height > list.height * .8) { reveal(row); return; }
+    const duration = 440, style = getComputedStyle(bubble);
+    const overlay = layer();
+    Object.assign(overlay.element.style, { inset: 'auto', left: `${bounds.left}px`, top: `${bounds.top}px`, width: `${bounds.width}px`, height: `${bounds.height}px` });
+    const shell = document.createElement('div');
+    Object.assign(shell.style, { position: 'absolute', boxSizing: 'border-box', background: style.background, border: style.border, borderRadius: style.borderRadius, boxShadow: style.boxShadow });
+    const ghost = source.clone;
+    Object.assign(ghost.style, { position: 'absolute', left: `${source.bounds.left - bounds.left}px`, top: `${source.bounds.top - bounds.top}px`, width: `${source.bounds.width}px`, height: `${source.bounds.height}px`, margin: '0' });
+    ghost.querySelectorAll<HTMLElement>('.room-local-agent-work-pulse, strong').forEach(element => { element.style.visibility = 'hidden'; });
+    overlay.element.append(shell, ghost);
+    const seed = source.summary;
+    Object.assign(shell.style, { left: `${target.left - bounds.left}px`, top: `${target.top - bounds.top}px`, width: `${target.width}px`, height: `${target.height}px`, transformOrigin: '0 0' });
+    const start = `translate(${seed.left - target.left - 9}px,${seed.top - target.top - 5}px) scale(${(source.bounds.right - seed.left + 9) / target.width},${(seed.height + 10) / target.height})`;
+    const surface = animate(shell, [{ transform: start, opacity: .8, easing: ease }, { transform: 'none', opacity: 1, offset: .7 }, { transform: 'none', opacity: 0 }], { duration });
+    surface?.finished.then(overlay.cleanup, overlay.cleanup);
+    for (const [selector, before] of [[avatarSelector, source.pulse], [`${metaSelector.split(',')[0]} strong, .room-message-author-button, .message-sender strong`, source.name]] as const) {
+      const element = row.querySelector(selector);
+      if (!element) continue;
+      const after = element.getBoundingClientRect();
+      animate(element, [{ transform: `translate(${before.left - after.left}px,${before.top - after.top}px)` }, { transform: 'none' }], { duration: duration * .7, easing: ease });
+    }
+    animate(ghost.querySelector('.room-local-agent-work-copy > span'), [{ opacity: 1 }, { opacity: 0, transform: 'translateX(-8px)' }], { duration: duration * .28, easing: ease, fill: 'forwards' });
+    ghost.querySelectorAll<HTMLElement>('i').forEach((dot, index) => {
+      dot.style.animation = 'none';
+      animate(dot, [source.dots[index] || { opacity: 1 }, { opacity: 1, transform: `translateX(${-index * 6}px) scale(1.3)`, offset: .6 }, { opacity: 0, transform: `translateX(${-index * 6}px) scale(.8)` }], { duration: duration * .38, easing: ease, fill: 'forwards' });
+    });
+    animate(bubble, [{ opacity: 0 }, { opacity: 0, offset: .2 }, { opacity: 1 }], { duration });
+    animate(bubble.querySelector('.desktop-long-message, .long-message-content, .md-content') || bubble.firstElementChild,
+      [{ opacity: 0, transform: 'translateY(6px)' }, { opacity: 1, transform: 'none' }],
+      { duration: duration * .5, delay: duration * .2, fill: 'backwards', easing: ease });
+  }
+  return { cancel, move, send, reply, reveal };
+}

package/shared/ui/useComposerSlashCommands.ts

@@ -0,0 +1,92 @@
+import { computed, onScopeDispose, ref, watch, type Ref } from 'vue';
+import { completeSlashCommand, decideComposerSubmitAction, resolveSlashInput, type SlashCommand, type SlashPlatform } from '../slash-commands.mjs';
+
+/** One send gate for keyboard and button submission in both main composers. */
+export function useComposerSlashCommands(options: {
+  text: Ref<string>;
+  platform: SlashPlatform;
+  scope: () => string | null | undefined;
+  hasAttachments: () => boolean;
+  isReply: () => boolean;
+  run: (command: SlashCommand, argument: string) => boolean | Promise<boolean>;
+  focus: () => void;
+  onError: () => void;
+}) {
+  const dismissed = ref(false);
+  const activeIndex = ref(0);
+  const busy = ref(false);
+  let revision = 0;
+  onScopeDispose(() => { revision++; });
+  watch([() => options.text.value, options.scope, options.hasAttachments, options.isReply], () => {
+    revision++;
+    dismissed.value = false;
+    activeIndex.value = 0;
+  }, { flush: 'sync' });
+  const context = () => ({
+    text: options.text.value,
+    platform: options.platform,
+    hasAttachments: options.hasAttachments(),
+    isReply: options.isReply(),
+    menuDismissed: dismissed.value,
+    selectedCommandIndex: activeIndex.value,
+  });
+  const resolution = computed(() => resolveSlashInput(context()));
+  const commands = computed(() => {
+    const result = resolution.value;
+    return result.kind === 'none' ? [] : result.kind === 'menu' ? result.commands : [result.command];
+  });
+  const open = computed(() => commands.value.length > 0);
+  const hint = computed(() => resolution.value.kind === 'invalid' ? resolution.value.hint : '');
+  const candidates = computed(() => commands.value.map(command => ({
+    key: `slash-${command.name}`, label: command.usage, meta: command.description,
+  })));
+
+  function complete(index = activeIndex.value) {
+    const command = commands.value[index];
+    if (!command || busy.value) return;
+    // Tab/click complete only the name, retaining any argument already entered.
+    if (resolution.value.kind === 'menu' || !/\s/.test(options.text.value)) {
+      options.text.value = completeSlashCommand(command);
+    }
+    options.focus();
+  }
+
+  function handleKey(event: KeyboardEvent): boolean {
+    if (!open.value || event.isComposing) return false;
+    if (event.key === 'Escape') dismissed.value = true;
+    else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      activeIndex.value = (activeIndex.value + (event.key === 'ArrowDown' ? 1 : -1) + commands.value.length) % commands.value.length;
+    } else if (event.key === 'Tab') complete();
+    else return false;
+    event.preventDefault();
+    return true;
+  }
+
+  async function submit(sendMessage: () => unknown | Promise<unknown>) {
+    if (busy.value) return;
+    const decision = decideComposerSubmitAction(context());
+    if (decision.action === 'send_message') {
+      await sendMessage();
+      return;
+    }
+    if (decision.action === 'complete_command') {
+      options.text.value = decision.text;
+      options.focus();
+      return;
+    }
+    if (decision.action === 'show_hint') return;
+    const submittedRevision = revision;
+    busy.value = true;
+    try {
+      const succeeded = await options.run(decision.command, decision.argument);
+      // A late task response must not erase edits or another room's draft.
+      if (succeeded && revision === submittedRevision) options.text.value = '';
+    } catch {
+      options.onError();
+    } finally {
+      busy.value = false;
+    }
+  }
+
+  return { open, candidates, activeIndex, hint, busy, complete, handleKey, submit };
+}

package/shared/ui/usePinnedMessageVisibility.ts

@@ -0,0 +1,20 @@
+import { readonly, ref } from "vue";
+
+const storageKey = "letagents:hide-pinned-messages";
+
+export function readPinnedMessagesHidden(): boolean {
+  try { return window.localStorage.getItem(storageKey) === "true"; }
+  catch { return false; }
+}
+
+const hidden = ref(readPinnedMessagesHidden());
+
+/** A personal display preference; pin membership remains in the room store. */
+export function usePinnedMessageVisibility() {
+  function togglePinnedMessages(): void {
+    hidden.value = !hidden.value;
+    try { window.localStorage.setItem(storageKey, String(hidden.value)); }
+    catch { /* Keep the current view usable when local storage is unavailable. */ }
+  }
+  return { pinnedMessagesHidden: readonly(hidden), togglePinnedMessages };
+}