@oar-sh/oar 0.9.9 → 0.9.11

package/server/public/app/chat-actions-menu-state.mjs

@@ -0,0 +1,126 @@
+// The header's ⋯ menu: one decision for its trigger and for every entry, with
+// or without a conversation open. No DOM here; bootstrap.js applies the result.
+//
+// The menu holds two kinds of entries. Relay-wide ones (Settings, About OAR,
+// Restart web relay, Select Models, Check Usage, the queue, Day/Night, the PWA
+// version) are shown whenever the app is signed in, so Settings can be reached
+// on a fresh install, where no conversation exists yet. Per-conversation ones
+// (Edit title, Share, Stop sharing, Preview as shared, Archive, Inspect tmux,
+// Change CWD, Git changes, Kill session, Open on claude.ai) are hidden, not
+// greyed, while nothing is open: an empty screen offers what can be done there
+// and nothing else.
+//
+// The shared read-only view is its own branch: Day/Night only, whatever the
+// conversation state, and the trigger stays usable even when the shared
+// conversation failed to load.
+
+export const CHAT_ACTIONS_MENU_TRIGGER_ID = 'chat-actions-menu-btn';
+
+/** Entries that are text, not actions: `hidden` is applied, nothing else. */
+export const CHAT_ACTIONS_MENU_META_IDS = Object.freeze([
+  'chat-menu-pwa-version',
+  'chat-menu-queue-status',
+]);
+
+/** Every entry the resolver decides, in menu order. */
+export const CHAT_ACTIONS_MENU_ENTRY_IDS = Object.freeze([
+  'chat-menu-pwa-version',
+  'chat-menu-queue-status',
+  'chat-menu-edit-title',
+  'chat-menu-theme-toggle',
+  'chat-menu-usage',
+  'chat-menu-compact',
+  'chat-menu-share-conversation',
+  'chat-menu-stop-sharing',
+  'chat-menu-preview-shared',
+  'chat-menu-archive',
+  'chat-menu-group',
+  'chat-menu-refresh-history',
+  'chat-menu-inspect-tmux',
+  'chat-menu-select-models',
+  'chat-menu-change-cwd',
+  'chat-menu-git-changes',
+  'chat-menu-open-cloud-session',
+  'chat-menu-settings',
+  'chat-menu-about',
+  'chat-menu-restart-relay',
+  'chat-menu-suspend-host',
+  'chat-menu-kill-session',
+]);
+
+/** Entries that are never shown: retired actions kept in the markup. */
+const ALWAYS_HIDDEN_IDS = new Set(['chat-menu-compact', 'chat-menu-refresh-history']);
+
+const shown = (disabled = false) => ({ hidden: false, disabled: !!disabled });
+const hidden = () => ({ hidden: true, disabled: true });
+
+/**
+ * @param {object} input
+ * @param {boolean} [input.sharedMode] the shared read-only view
+ * @param {string|null} [input.conversationId] the open conversation, if any
+ * @param {object|null} [input.conversation] its record, if known
+ * @param {string|null} [input.sdkSessionId] its bound session, if any
+ * @param {boolean} [input.isCloud] it runs on Claude Cloud
+ * @param {string|null} [input.cloudSessionUrl] its claude.ai session link, if reported
+ * @param {boolean} [input.editing] its title is being edited
+ * @param {boolean} [input.suspendVisible] the "show Suspend host" setting
+ * @param {boolean} [input.hasActiveShare] it has a public share link
+ * @returns {{ trigger: { hidden: boolean, disabled: boolean }, entries: Record<string, { hidden: boolean, disabled: boolean }> }}
+ */
+export function resolveChatActionsMenuState({
+  sharedMode = false,
+  conversationId = null,
+  conversation = null,
+  sdkSessionId = null,
+  isCloud = false,
+  cloudSessionUrl = null,
+  editing = false,
+  suspendVisible = false,
+  hasActiveShare = false,
+} = {}) {
+  const entries = {};
+  if (sharedMode) {
+    for (const id of CHAT_ACTIONS_MENU_ENTRY_IDS) entries[id] = hidden();
+    entries['chat-menu-theme-toggle'] = shown();
+    return { trigger: { hidden: false, disabled: false }, entries };
+  }
+
+  const convId = String(conversationId || '').trim();
+  const hasConversation = !!convId;
+  const sessionId = String(sdkSessionId || conversation?.sdkSessionId || '').trim();
+  const cloud = hasConversation && !!isCloud;
+  const sessionUrl = String(cloudSessionUrl || '').trim();
+  const perConversation = () => (hasConversation ? shown() : hidden());
+
+  for (const id of CHAT_ACTIONS_MENU_ENTRY_IDS) entries[id] = shown();
+  for (const id of ALWAYS_HIDDEN_IDS) entries[id] = hidden();
+  entries['chat-menu-edit-title'] = perConversation();
+  entries['chat-menu-share-conversation'] = perConversation();
+  // Only a conversation with a live link has something to stop.
+  entries['chat-menu-stop-sharing'] = hasConversation && hasActiveShare ? shown() : hidden();
+  entries['chat-menu-preview-shared'] = perConversation();
+  entries['chat-menu-archive'] = perConversation();
+  entries['chat-menu-group'] = perConversation();
+  entries['chat-menu-inspect-tmux'] = perConversation();
+  entries['chat-menu-git-changes'] = perConversation();
+  // A cloud session has no working directory on the relay host to change.
+  entries['chat-menu-change-cwd'] = hasConversation && !cloud ? shown() : hidden();
+  entries['chat-menu-open-cloud-session'] = cloud && sessionUrl ? shown() : hidden();
+  entries['chat-menu-suspend-host'] = suspendVisible ? shown() : hidden();
+  // Kill needs a bound session; the entry stays visible so the user sees why
+  // it is not available (today's rule).
+  entries['chat-menu-kill-session'] = hasConversation ? shown(!sessionId) : hidden();
+
+  return {
+    // Only a title edit in progress holds the trigger; with nothing open there
+    // is no title, so the trigger can never be stuck disabled.
+    trigger: { hidden: false, disabled: hasConversation && !!editing },
+    entries,
+  };
+}
+
+/** The ids of the entries a state shows, in menu order. */
+export function visibleChatActionsMenuEntryIds(state) {
+  const entries = state?.entries || {};
+  return CHAT_ACTIONS_MENU_ENTRY_IDS.filter((id) => entries[id] && !entries[id].hidden);
+}

package/server/public/app/claude-cloud-conversation-ui.js

@@ -7,6 +7,9 @@
 // and the server's `cloud` payload field), so the one sync function below is
 // idempotent and is simply called whenever the header is synced. A
 // conversation of any other provider gets every element back exactly as it was.
+// The ⋯ menu is not touched here: its entries are decided in one place
+// (chat-actions-menu-state.mjs), which reads the cloud state through
+// isCurrentConversationClaudeCloud() and currentCloudSessionUrl().
 
 import { conversations, currentConvId, IS_SHARED_VIEW } from './store.js';
 import { openExternalNavigation } from './external-link-policy.mjs';
@@ -32,21 +35,10 @@ export function isCurrentConversationClaudeCloud() {
   return !IS_SHARED_VIEW && isClaudeCloudConversation(currentConversation());
 }
 
-// Hides an element for cloud chats and gives it back afterwards, without ever
-// un-hiding something another owner (shared view, feature gates) had hidden.
-function setHiddenForCloud(element, hide) {
-  if (!element) return;
-  if (hide) {
-    if (!element.hidden) {
-      element.hidden = true;
-      element.dataset.cloudHidden = '1';
-    }
-    return;
-  }
-  if (element.dataset.cloudHidden === '1') {
-    element.hidden = false;
-    delete element.dataset.cloudHidden;
-  }
+/** The claude.ai link of the open cloud conversation, once the worker reported one. */
+export function currentCloudSessionUrl() {
+  if (!isCurrentConversationClaudeCloud()) return null;
+  return buildCloudLineModel(currentConversation()?.cloud)?.sessionUrl || null;
 }
 
 export function syncClaudeCloudConversationUi() {
@@ -65,13 +57,9 @@ export function syncClaudeCloudConversationUi() {
     line.hidden = !lineHtml;
   }
 
-  // The session has no working directory on the relay host to change.
-  setHiddenForCloud(document.getElementById('chat-menu-change-cwd'), isCloud);
-
-  const openSessionButton = document.getElementById('chat-menu-open-cloud-session');
-  if (openSessionButton) {
-    openSessionButton.hidden = !(isCloud && buildCloudLineModel(conversation?.cloud)?.sessionUrl);
-  }
+  // The ⋯ menu entries (no Change CWD for a cloud chat, Open on claude.ai once
+  // there is a link) are decided with the rest of the menu in
+  // chat-actions-menu-state.mjs, from `isCloud` and currentCloudSessionUrl().
 
   const fileInput = document.getElementById('image-input');
   if (fileInput) {

package/server/public/app/composer-control-state.mjs

@@ -22,6 +22,8 @@ export function hasUploadingAttachments(attachments = []) {
 // Why a message sent right now queues instead of steering — worker-reported
 // hold reasons mapped to a human title. Stopping a turn lives on the message
 // bubbles, never here, so every state below is a Send/Steer/Queue shape.
+export const SETUP_REQUIRED_TEXT = 'Set up a provider to start chatting';
+
 const STEERING_HOLD_TITLES = Object.freeze({
   question: 'Will steer in after you answer the question',
   compaction: 'Will steer in once the conversation finishes compacting',
@@ -50,7 +52,21 @@ export function deriveComposerControlState({
   // An archived conversation: its worker is stopped and it is out of the
   // live list; sending would start it again behind the user's back.
   archived = false,
+  // No conversation open and no provider known to be ready (a fresh install):
+  // a send here would create a Copilot chat that cannot run. The composer is
+  // locked, with a placeholder that says what to do, until readiness flips.
+  setupRequired = false,
 } = {}) {
+  if (setupRequired) {
+    return {
+      action: 'send',
+      label: 'Send',
+      title: SETUP_REQUIRED_TEXT,
+      disabled: true,
+      composerDisabled: true,
+      placeholder: SETUP_REQUIRED_TEXT,
+    };
+  }
   if (archived) {
     return {
       action: 'send',

package/server/public/app/composer-keyboard.mjs

@@ -0,0 +1,54 @@
+// When the composer may hold the focus without raising a phone's on-screen
+// keyboard, without the DOM. A focused text field shows no keyboard until the
+// user touches the page; the next tap anywhere that keeps the focus there
+// brings it up. So a phone gets no focus at page load, and a tap that only
+// scrolls (the transcript's ⌄) keeps the focus only while the keyboard is
+// already up.
+//
+// Whether the keyboard is up is read from the visual viewport: with it open
+// the visible area is a keyboard's height shorter than the tallest it has been
+// at the same width. Android shrinks the layout with it
+// (interactive-widget=resizes-content), iOS only the visual viewport; both
+// show here. A rotation changes the width, so each width has its own tallest.
+
+/** A visible area this much shorter than its tallest has a keyboard under it. */
+export const KEYBOARD_MIN_SHRINK_PX = 100;
+export const KEYBOARD_MIN_SHRINK_RATIO = 0.15;
+
+/** The tallest visible height seen at each layout width. */
+export function createViewportBaseline() {
+  const tallestByWidth = new Map();
+  return {
+    note(width, height) {
+      const key = Math.round(Number(width) || 0);
+      const value = Math.max(0, Number(height) || 0);
+      const tallest = Math.max(tallestByWidth.get(key) || 0, value);
+      tallestByWidth.set(key, tallest);
+      return tallest;
+    },
+  };
+}
+
+export function isOnScreenKeyboardOpen({ editableFocused = false, visibleHeight = 0, tallestHeight = 0 } = {}) {
+  if (!editableFocused) return false;
+  const visible = Number(visibleHeight) || 0;
+  const tallest = Number(tallestHeight) || 0;
+  if (!(visible > 0) || !(tallest > 0)) return false;
+  const shrink = tallest - visible;
+  return shrink >= Math.max(KEYBOARD_MIN_SHRINK_PX, tallest * KEYBOARD_MIN_SHRINK_RATIO);
+}
+
+/**
+ * Whether a press on the ⌄ button keeps the focus where it is. A mouse raises
+ * no keyboard, so the composer keeps it as it always has; a touch (or a pen,
+ * or a pointer that does not say) keeps it only while the keyboard is open.
+ */
+export function shouldHoldFocusOnJump({ pointerType = '', keyboardOpen = false } = {}) {
+  if (String(pointerType || '') === 'mouse') return true;
+  return Boolean(keyboardOpen);
+}
+
+/** The composer takes the focus at page load on a desktop only. */
+export function shouldAutofocusComposerOnLoad({ coarsePointer = false, phoneLayout = false } = {}) {
+  return !coarsePointer && !phoneLayout;
+}

package/server/public/app/context-menu.mjs

@@ -103,38 +103,122 @@ export function openContextMenu(x, y, items, { documentRef = document, windowRef
   return menu;
 }
 
+// After a long press opened its menu on release, the click the release makes
+// must not reach the element underneath (it would open the row). Only that
+// click: the next press ends the guard.
+const RELEASE_CLICK_GUARD_MS = 400;
+
 /**
  * Long-press as the touch equivalent of right-click, on every descendant of
  * `root` that matches `selector`. Android fires no `contextmenu` for a long
  * press on a non-selectable element. Cancelled by movement, so it never fires
  * mid-scroll; mouse pointers are left to the real `contextmenu` event.
  * `handler(target, x, y)`.
+ *
+ * With `lift`, the press lifts the element at the delay instead
+ * (`lift.onLift(target, x, y)`), and what the finger does next decides:
+ * released without moving, the handler runs (the menu opens on release); moved
+ * past the slop, `lift.onMove(target, x, y, event)` is offered the gesture (a
+ * drag) and the press ends here when it returns true. `lift.onEnd(target)`
+ * follows every lift that did not turn into a move. `lift.canLift(target)`
+ * false keeps the plain long press for that press (the handler at the delay,
+ * a move cancels). A browser `contextmenu` during a touch press is swallowed,
+ * so the menu opens once. A page sent to the background ends the press
+ * without a menu.
  */
-export function bindLongPress(root, selector, handler, { setTimeoutImpl = setTimeout, clearTimeoutImpl = clearTimeout } = {}) {
+export function bindLongPress(root, selector, handler, {
+  setTimeoutImpl = setTimeout,
+  clearTimeoutImpl = clearTimeout,
+  now = () => Date.now(),
+  lift = null,
+} = {}) {
   let timer = null;
   let startX = 0;
   let startY = 0;
+  let pressed = null;
+  let lifted = false;
+  let swallowClicksUntil = 0;
   const cancel = () => {
     if (timer !== null) clearTimeoutImpl(timer);
     timer = null;
+    const target = pressed;
+    const wasLifted = lifted;
+    pressed = null;
+    lifted = false;
+    if (wasLifted) lift?.onEnd?.(target);
+  };
+  const release = () => {
+    if (!lifted) {
+      cancel();
+      return;
+    }
+    const target = pressed;
+    cancel();
+    swallowClicksUntil = now() + RELEASE_CLICK_GUARD_MS;
+    handler(target, startX, startY);
   };
   root.addEventListener('pointerdown', (event) => {
+    swallowClicksUntil = 0;
     if (event.pointerType === 'mouse') return;
     const target = event.target?.closest?.(selector);
     if (!target || !root.contains(target)) return;
+    cancel();
     startX = event.clientX;
     startY = event.clientY;
-    cancel();
+    pressed = target;
     timer = setTimeoutImpl(() => {
       timer = null;
-      handler(target, startX, startY);
+      if (!lift || lift.canLift?.(pressed) === false) {
+        const firing = pressed;
+        pressed = null;
+        handler(firing, startX, startY);
+        return;
+      }
+      lifted = true;
+      lift.onLift?.(pressed, startX, startY);
     }, LONG_PRESS_MS);
   }, { passive: true });
   root.addEventListener('pointermove', (event) => {
-    if (Math.abs(event.clientX - startX) > LONG_PRESS_SLOP_PX || Math.abs(event.clientY - startY) > LONG_PRESS_SLOP_PX) cancel();
+    if (!pressed) return;
+    if (Math.abs(event.clientX - startX) <= LONG_PRESS_SLOP_PX && Math.abs(event.clientY - startY) <= LONG_PRESS_SLOP_PX) return;
+    if (!lifted) {
+      cancel();
+      return;
+    }
+    // A lifted element moved: a drag, when the owner takes it.
+    const target = pressed;
+    if (lift.onMove?.(target, startX, startY, event) === true) {
+      pressed = null;
+      lifted = false;
+    }
   }, { passive: true });
-  for (const name of ['pointerup', 'pointercancel', 'pointerleave']) {
-    root.addEventListener(name, cancel, { passive: true });
+  if (!lift) {
+    for (const name of ['pointerup', 'pointercancel', 'pointerleave']) {
+      root.addEventListener(name, cancel, { passive: true });
+    }
+    return cancel;
   }
+  root.addEventListener('pointerup', release, { passive: true });
+  // A cancel while lifted (the browser claimed a long press of its own) still
+  // opens the menu: the finger was held without moving.
+  root.addEventListener('pointercancel', release, { passive: true });
+  root.addEventListener('pointerleave', () => {
+    if (!lifted) cancel();
+  }, { passive: true });
+  root.ownerDocument?.addEventListener('visibilitychange', () => {
+    if (root.ownerDocument.hidden) cancel();
+  });
+  root.addEventListener('contextmenu', (event) => {
+    if (!pressed) return;
+    event.preventDefault();
+    event.stopPropagation();
+  }, true);
+  root.addEventListener('click', (event) => {
+    // A click from the keyboard (Enter, Space) is never the release's.
+    if (event.detail === 0 || now() >= swallowClicksUntil) return;
+    swallowClicksUntil = 0;
+    event.preventDefault();
+    event.stopPropagation();
+  }, true);
   return cancel;
 }

package/server/public/app/conversation-group-drag.mjs

@@ -0,0 +1,191 @@
+// Where a conversation row dragged in the sidebar lands, from what the
+// pointer is over. DOM-free: the sidebar measures, this module decides.
+//
+// The list is the arranged one (conversation-group-order.mjs): loose rows and
+// groups ordered by activity, each group a head (a real row, or a synthetic
+// line for a group without its head in view) followed by its members while
+// open. Only the order inside a group is the user's to set, so a drop either
+// places a row inside a group, takes it out of one, or makes a group of two
+// loose rows. Nothing reorders the top level.
+//
+// The pointer is over an item at a relative height `y` (0 top, 1 bottom), or
+// below the last item. The rules, by what is under the pointer:
+//
+//   member of group G (upper half: before it; lower half: after it)
+//     dragged row in G           -> reorder in G (a head of G: none, it stays first)
+//     dragged row elsewhere      -> join G at that place
+//   head of group G (real or synthetic)
+//     lower half of an open head -> before G's first member (the head stays first)
+//     upper half, or folded      -> join G at the end (outline only)
+//     a member of G itself       -> lower half of the open head: to the top of G; else none
+//   loose row
+//     dragged row loose          -> middle half (25 % to 75 %): a new group of the two; edges: none
+//     dragged row in a group     -> leave the group (it then sorts by its own activity)
+//   below the last item          -> a grouped row leaves its group; a loose row: none
+//
+// A drop onto the dragged row itself, or one that would leave a member where
+// it is, is none. A head dragged within its own group is none.
+
+const EDGE = 0.25;
+
+/** A drop that does nothing. */
+export const NO_DROP = Object.freeze({ action: 'none', groupId: null, beforeConversationId: null, indicator: null });
+
+function toText(value) {
+  return String(value ?? '').trim();
+}
+
+/** The key of a sidebar item: its conversation id, or `group:<id>` for a synthetic head. */
+export function dragItemKey({ conversationId = null, groupId = null } = {}) {
+  const id = toText(conversationId);
+  return id || `group:${toText(groupId)}`;
+}
+
+/**
+ * Plain items from arrangeConversationList(): `{ key, kind, conversationId,
+ * groupId }`, and on heads `open` and `memberIds` (the group's rows after
+ * the head, in list order).
+ */
+export function describeDragItems(arranged) {
+  const items = [];
+  for (const item of Array.isArray(arranged) ? arranged : []) {
+    if (!item || !['row', 'head', 'member'].includes(item.kind)) continue;
+    const conversationId = toText(item.conversation?.id) || null;
+    const groupId = item.kind === 'row' ? null : (toText(item.group?.id) || null);
+    if (!conversationId && !groupId) continue;
+    const described = { key: dragItemKey({ conversationId, groupId }), kind: item.kind, conversationId, groupId };
+    if (item.kind === 'head') {
+      described.open = item.group?.open !== false;
+      described.memberIds = (Array.isArray(item.group?.members) ? item.group.members : [])
+        .map((row) => toText(row?.id))
+        .filter(Boolean);
+    }
+    items.push(described);
+  }
+  return items;
+}
+
+function drop(action, { groupId = null, beforeConversationId = null, indicator = null, targetConversationId = null } = {}) {
+  return {
+    action,
+    groupId,
+    beforeConversationId,
+    indicator,
+    ...(targetConversationId ? { targetConversationId } : {}),
+  };
+}
+
+/**
+ * The drop for `draggedId` with the pointer at `hover`: `{ key, y }` over an
+ * item, `{ below: true }` under the last one, or null (nowhere). Returns
+ * `{ action: 'none' | 'reorder' | 'join' | 'leave' | 'new-group', groupId,
+ * beforeConversationId, indicator: { itemId, edge: 'before' | 'after' |
+ * 'inside' } | null }`, with `targetConversationId` on a new group.
+ */
+export function resolveDropTarget({ items = [], draggedId = '', hover = null } = {}) {
+  const list = Array.isArray(items) ? items : [];
+  const id = toText(draggedId);
+  const dragged = id ? list.find((item) => item.conversationId === id) : null;
+  if (!dragged || !hover) return NO_DROP;
+  const draggedGroupId = dragged.kind === 'row' ? null : dragged.groupId;
+  const draggedIsHead = dragged.kind === 'head';
+  const headOf = (groupId) => list.find((item) => item.kind === 'head' && item.groupId === groupId) || null;
+  const membersOf = (groupId) => headOf(groupId)?.memberIds || [];
+
+  if (hover.below) {
+    const last = list[list.length - 1];
+    if (!draggedGroupId || !last) return NO_DROP;
+    return drop('leave', { indicator: { itemId: last.key, edge: 'after' } });
+  }
+
+  const target = list.find((item) => item.key === toText(hover.key));
+  if (!target) return NO_DROP;
+  if (target.conversationId && target.conversationId === id) return NO_DROP;
+  const y = Math.min(1, Math.max(0, Number(hover.y) || 0));
+  const half = y < 0.5 ? 'before' : 'after';
+
+  if (target.kind === 'member') {
+    const groupId = target.groupId;
+    if (draggedIsHead && draggedGroupId === groupId) return NO_DROP;
+    const members = membersOf(groupId);
+    const index = members.indexOf(target.conversationId);
+    const before = half === 'before' ? target.conversationId : (members[index + 1] ?? null);
+    if (draggedGroupId === groupId) {
+      // Before itself, or before the row that already follows it: no move.
+      const currentNext = members[members.indexOf(id) + 1] ?? null;
+      if (before === id || before === currentNext) return NO_DROP;
+      return drop('reorder', { groupId, beforeConversationId: before, indicator: { itemId: target.key, edge: half } });
+    }
+    return drop('join', { groupId, beforeConversationId: before, indicator: { itemId: target.key, edge: half } });
+  }
+
+  if (target.kind === 'head') {
+    const groupId = target.groupId;
+    const members = membersOf(groupId);
+    const toTop = half === 'after' && target.open === true && members.length > 0;
+    if (draggedGroupId === groupId) {
+      if (draggedIsHead || !toTop || members[0] === id) return NO_DROP;
+      return drop('reorder', { groupId, beforeConversationId: members[0], indicator: { itemId: target.key, edge: 'after' } });
+    }
+    if (toTop) return drop('join', { groupId, beforeConversationId: members[0], indicator: { itemId: target.key, edge: 'after' } });
+    return drop('join', { groupId, beforeConversationId: null, indicator: { itemId: target.key, edge: 'inside' } });
+  }
+
+  // A loose row.
+  if (!draggedGroupId) {
+    if (y < EDGE || y > 1 - EDGE) return NO_DROP;
+    return drop('new-group', {
+      indicator: { itemId: target.key, edge: 'inside' },
+      targetConversationId: target.conversationId,
+    });
+  }
+  return drop('leave', { indicator: { itemId: target.key, edge: half } });
+}
+
+/**
+ * "Move up" / "Move down" in a group's hand order: the `beforeConversationId`
+ * for the move, or null at the end it cannot pass. `memberIds` are the rows
+ * after the head, in list order.
+ */
+export function groupMoveStep(memberIds, conversationId, direction) {
+  const members = Array.isArray(memberIds) ? memberIds : [];
+  const index = members.indexOf(toText(conversationId));
+  if (index < 0) return null;
+  if (direction === 'up') return index > 0 ? { beforeConversationId: members[index - 1] } : null;
+  if (direction === 'down') return index < members.length - 1 ? { beforeConversationId: members[index + 2] ?? null } : null;
+  return null;
+}
+
+/**
+ * Pixels to scroll the list by in one frame while dragging: negative near
+ * the top, positive near the bottom, faster toward (and past) the edge, 0
+ * outside the zones.
+ */
+export function autoScrollStep(pointerY, top, bottom, { zone = 48, maxStep = 18 } = {}) {
+  const y = Number(pointerY);
+  if (!Number.isFinite(y) || !(bottom > top)) return 0;
+  const reach = Math.min(zone, (bottom - top) / 2);
+  if (!(reach > 0)) return 0;
+  const fromTop = y - top;
+  const fromBottom = bottom - y;
+  const speed = (distance) => {
+    const t = Math.min(1, Math.max(0, (reach - distance) / reach));
+    return Math.max(1, Math.ceil(maxStep * t * t));
+  };
+  if (fromTop < reach && fromTop <= fromBottom) return -speed(fromTop);
+  if (fromBottom < reach) return speed(fromBottom);
+  return 0;
+}
+
+function quoted(text) {
+  return `“${toText(text) || 'Untitled'}”`;
+}
+
+/** What a screen reader hears after a drop. */
+export function dropAnnouncement(action, { title = '', groupName = '', otherTitle = '' } = {}) {
+  if (action === 'reorder') return `Moved ${quoted(title)} within ${quoted(groupName)}`;
+  if (action === 'join') return `Moved ${quoted(title)} to ${quoted(groupName)}`;
+  if (action === 'leave') return `Removed ${quoted(title)} from its group`;
+  if (action === 'new-group') return `New group with ${quoted(otherTitle)} and ${quoted(title)}`;
+  return '';
+}