@oar-sh/oar 0.9.10 → 0.9.11

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

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

@@ -0,0 +1,265 @@
+// The order of the conversation list once sessions can form groups, shared by
+// the list route (paging) and the sidebar (rendering) so both agree row for
+// row. DOM-free.
+//
+// A grouped row sorts by its group's activity time: the newest `updatedAt`
+// among the group's rows in the list at hand (the live list, the Archived
+// view, or both). So an active member lifts its whole group. Inside a group
+// the head comes first, then the members the owner placed by hand (their
+// `groupPosition`, ascending), then the others newest first. An ungrouped row
+// sorts by its own time. Ties fall back to ids, descending, as the list
+// always has.
+//
+// A page never ends inside a group: the server extends it to the group's last
+// row, so a client always holds whole groups and can count and fold them.
+
+function toText(value) {
+  return String(value ?? '').trim();
+}
+
+/** `updatedAt` as milliseconds: ISO, SQLite's "YYYY-MM-DD HH:MM:SS" (UTC), or a number. */
+export function parseConversationTimeMs(value) {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
+  const text = toText(value);
+  if (!text) return 0;
+  const sqliteUtcLike = /^(\d{4}-\d{2}-\d{2})[ T](\d{2}:\d{2}:\d{2}(?:\.\d{1,6})?)$/;
+  const hasExplicitTimezone = /(?:Z|[+-]\d{2}:?\d{2})$/i.test(text);
+  let normalized = text;
+  if (!hasExplicitTimezone && sqliteUtcLike.test(text)) {
+    const [, day, time] = text.match(sqliteUtcLike) || [];
+    normalized = `${day}T${time}Z`;
+  }
+  const parsed = Date.parse(normalized);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function rowId(row) {
+  return toText(row?.id);
+}
+
+function rowGroupId(row) {
+  return toText(row?.groupId ?? row?.group_id);
+}
+
+function rowOwnTimeMs(row) {
+  return parseConversationTimeMs(row?.updatedAt ?? row?.updated_at);
+}
+
+/** A row's hand-set place in its group (`groupPosition` / `group_position`), or null. */
+export function conversationGroupPosition(row) {
+  const raw = row?.groupPosition ?? row?.group_position;
+  if (raw === null || raw === undefined || raw === '') return null;
+  const value = Number(raw);
+  return Number.isFinite(value) ? value : null;
+}
+
+/**
+ * The order of two rows of the same group after the head: a placed row
+ * before an unplaced one, placed rows by position, unplaced ones newest
+ * first; ties by id, descending. The sidebar and the relay sort members
+ * with it.
+ */
+export function compareGroupMembers(a, b) {
+  const pa = conversationGroupPosition(a);
+  const pb = conversationGroupPosition(b);
+  if (pa !== null && pb === null) return -1;
+  if (pa === null && pb !== null) return 1;
+  if (pa !== null && pb !== null && pa !== pb) return pa - pb;
+  const ua = rowOwnTimeMs(a);
+  const ub = rowOwnTimeMs(b);
+  if (ua !== ub) return ub - ua;
+  return rowId(b).localeCompare(rowId(a));
+}
+
+function groupOf(groups, groupId) {
+  if (!groups || !groupId) return null;
+  if (typeof groups.get === 'function') return groups.get(groupId) || null;
+  return groups[groupId] || null;
+}
+
+/** 'head' | 'member' | null for a row, from the groups' `parentConversationId`. */
+export function conversationGroupRole(row, groups) {
+  const groupId = rowGroupId(row);
+  if (!groupId) return null;
+  const group = groupOf(groups, groupId);
+  const head = toText(group?.parentConversationId ?? group?.parent_conversation_id);
+  return head && head === rowId(row) ? 'head' : 'member';
+}
+
+/** `Map<groupId, ms>`: the newest row time of each group among `rows`. */
+export function groupActivityTimes(rows) {
+  const times = new Map();
+  for (const row of Array.isArray(rows) ? rows : []) {
+    const groupId = rowGroupId(row);
+    if (!groupId) continue;
+    const ms = rowOwnTimeMs(row);
+    if (ms > (times.get(groupId) || 0)) times.set(groupId, ms);
+  }
+  return times;
+}
+
+function makeContext(rows, groups) {
+  const activity = groupActivityTimes(rows);
+  return {
+    timeOf(row) {
+      const groupId = rowGroupId(row);
+      return groupId ? Math.max(activity.get(groupId) || 0, rowOwnTimeMs(row)) : rowOwnTimeMs(row);
+    },
+    keyOf(row) {
+      return rowGroupId(row) || rowId(row);
+    },
+    roleRank(row) {
+      return conversationGroupRole(row, groups) === 'head' ? 0 : 1;
+    },
+  };
+}
+
+function compareWith(ctx) {
+  return (a, b) => {
+    const ta = ctx.timeOf(a);
+    const tb = ctx.timeOf(b);
+    if (ta !== tb) return tb - ta;
+    const ka = ctx.keyOf(a);
+    const kb = ctx.keyOf(b);
+    if (ka !== kb) return kb.localeCompare(ka);
+    const ra = ctx.roleRank(a);
+    const rb = ctx.roleRank(b);
+    if (ra !== rb) return ra - rb;
+    // Same group (or the same ungrouped row): the hand order, then time.
+    if (rowGroupId(a)) return compareGroupMembers(a, b);
+    const ua = rowOwnTimeMs(a);
+    const ub = rowOwnTimeMs(b);
+    if (ua !== ub) return ub - ua;
+    return rowId(b).localeCompare(rowId(a));
+  };
+}
+
+/** The rows in list order (a sorted copy). `groups`: Map or object by id. */
+export function orderConversationRows(rows, groups = null) {
+  const list = (Array.isArray(rows) ? rows : []).filter(Boolean);
+  return list.slice().sort(compareWith(makeContext(list, groups)));
+}
+
+/**
+ * One page of the ordered list. The cursor names the last row of the page
+ * before (`beforeConversationId`); when that row is gone, `beforeUpdatedAt`
+ * (its sort time) and the id stand in. The page holds `limit` rows, extended
+ * to the end of the group its last row is in.
+ */
+export function pageConversationRows(rows, groups = null, { limit = 40, beforeConversationId = '', beforeUpdatedAt = '', beforeGroupId = '' } = {}) {
+  const list = (Array.isArray(rows) ? rows : []).filter(Boolean);
+  const ctx = makeContext(list, groups);
+  const ordered = list.slice().sort(compareWith(ctx));
+  const pageLimit = Math.max(1, Math.trunc(Number(limit) || 0) || 40);
+  const cursorId = toText(beforeConversationId);
+  const cursorGroupId = toText(beforeGroupId);
+  let older = ordered;
+  if (cursorId || toText(beforeUpdatedAt)) {
+    const index = cursorId ? ordered.findIndex((row) => rowId(row) === cursorId) : -1;
+    if (index >= 0) {
+      // A cursor inside a group (a member moved up in the hand order since
+      // the page was served): the page held the whole group, so the next
+      // one starts after the group's last row.
+      let end = index;
+      const cursorRowGroup = rowGroupId(ordered[index]);
+      while (cursorRowGroup && end + 1 < ordered.length && rowGroupId(ordered[end + 1]) === cursorRowGroup) end += 1;
+      older = ordered.slice(end + 1);
+    } else {
+      // The cursor row is gone (archived or deleted since). Its sort time
+      // and key place the next page; a row inside a group stood for that
+      // group, which is served again whole rather than cut short.
+      const cursorMs = parseConversationTimeMs(beforeUpdatedAt);
+      const cursorKey = cursorGroupId || cursorId;
+      older = ordered.filter((row) => {
+        const ms = ctx.timeOf(row);
+        if (ms < cursorMs) return true;
+        if (ms > cursorMs || !cursorKey) return false;
+        const key = ctx.keyOf(row);
+        if (cursorGroupId && key === cursorGroupId) return true;
+        return key.localeCompare(cursorKey) < 0;
+      });
+    }
+  }
+  let end = Math.min(pageLimit, older.length);
+  const lastGroup = end > 0 ? rowGroupId(older[end - 1]) : '';
+  while (lastGroup && end < older.length && rowGroupId(older[end]) === lastGroup) end += 1;
+  const pageRows = older.slice(0, end);
+  const last = pageRows[pageRows.length - 1] || null;
+  const lastMs = last ? ctx.timeOf(last) : 0;
+  return {
+    rows: pageRows,
+    pageInfo: {
+      hasMore: older.length > pageRows.length,
+      nextCursor: last ? {
+        beforeConversationId: rowId(last),
+        beforeUpdatedAt: lastMs ? new Date(lastMs).toISOString() : (toText(last.updatedAt ?? last.updated_at) || null),
+        ...(rowGroupId(last) ? { beforeGroupId: rowGroupId(last) } : {}),
+      } : null,
+    },
+  };
+}
+
+/**
+ * The sidebar's items, in order: `{ kind: 'row' }` for an ungrouped row,
+ * `{ kind: 'head' }` for a group's first line (with `conversation` when the
+ * head row is in the list, else a synthetic head), then `{ kind: 'member' }`
+ * for each member while the group is open. Every head item carries
+ * `group: { id, info, members, activityMs, open }`; `members` holds the
+ * group's rows after the head, in the group's order (hand-placed first).
+ *
+ * `isOpen(groupId, group)` decides the fold; `matches(row)` keeps rows that
+ * match a filter (a group shows when any row matches: its head as context
+ * with the matching members, or whole when the head or its name matches).
+ */
+export function arrangeConversationList(rows, groups = null, {
+  isOpen = () => true,
+  matches = null,
+  groupNameMatches = null,
+} = {}) {
+  const ordered = orderConversationRows(rows, groups);
+  const activity = groupActivityTimes(ordered);
+  const items = [];
+  let index = 0;
+  while (index < ordered.length) {
+    const row = ordered[index];
+    const groupId = rowGroupId(row);
+    if (!groupId) {
+      if (!matches || matches(row)) items.push({ kind: 'row', conversation: row });
+      index += 1;
+      continue;
+    }
+    let end = index;
+    while (end < ordered.length && rowGroupId(ordered[end]) === groupId) end += 1;
+    const groupRows = ordered.slice(index, end);
+    index = end;
+    const info = groupOf(groups, groupId);
+    const headId = toText(info?.parentConversationId ?? info?.parent_conversation_id);
+    const headRow = groupRows.find((candidate) => rowId(candidate) === headId) || null;
+    const members = groupRows.filter((candidate) => candidate !== headRow);
+    let shownMembers = members;
+    let headMatches = true;
+    let contextOnly = false;
+    if (matches) {
+      headMatches = (headRow ? matches(headRow) : false) || (typeof groupNameMatches === 'function' && groupNameMatches(info, headRow));
+      if (!headMatches) {
+        shownMembers = members.filter((candidate) => matches(candidate));
+        if (!shownMembers.length) continue;
+        contextOnly = true;
+      }
+    }
+    const group = {
+      id: groupId,
+      info: info || null,
+      head: headRow,
+      members,
+      activityMs: activity.get(groupId) || 0,
+      open: contextOnly ? true : isOpen(groupId, { info, head: headRow, members }) !== false,
+      contextOnly,
+    };
+    items.push({ kind: 'head', conversation: headRow, group });
+    if (group.open) {
+      for (const member of shownMembers) items.push({ kind: 'member', conversation: member, group });
+    }
+  }
+  return items;
+}

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

@@ -0,0 +1,100 @@
+// The combined state of a session group, from what each member row already
+// knows, and the fold rule of a group in the sidebar. DOM-free.
+
+export const MEMBER_STATE_ORDER = Object.freeze(['waiting', 'running', 'error', 'idle']);
+
+/**
+ * A member's class: 'waiting' (a question or approval card sits in it),
+ * 'running' (a turn or background work), 'error', or 'idle'.
+ */
+export function memberStateClass({
+  pendingCount = 0,
+  visualState = '',
+  processing = false,
+  activeTurn = false,
+  sessionState = '',
+} = {}) {
+  const visual = String(visualState || '').trim().toLowerCase();
+  if (Number(pendingCount) > 0 || visual === 'question') return 'waiting';
+  const session = String(sessionState || '').trim().toLowerCase();
+  if (processing === true || activeTurn === true || session === 'running_turn' || session === 'background_only') return 'running';
+  if (visual === 'error') return 'error';
+  return 'idle';
+}
+
+/** Counts per class and the strongest class among the members. */
+export function summarizeGroupMembers(states = []) {
+  const summary = { count: 0, waiting: 0, running: 0, error: 0, idle: 0, strongest: 'idle' };
+  for (const state of states) {
+    const key = MEMBER_STATE_ORDER.includes(state) ? state : 'idle';
+    summary[key] += 1;
+    summary.count += 1;
+  }
+  summary.strongest = MEMBER_STATE_ORDER.find((key) => summary[key] > 0) || 'idle';
+  return summary;
+}
+
+/**
+ * "3 · 1 waiting for you, 2 running" or "3 sessions"; "" for an empty group.
+ * The waiting part comes first: it is the reason to look, and a narrow
+ * sidebar cuts the end.
+ */
+export function groupSummaryText(summary) {
+  const count = Number(summary?.count || 0);
+  if (!count) return '';
+  const parts = [];
+  if (summary.waiting > 0) parts.push(`${summary.waiting} waiting for you`);
+  if (summary.running > 0) parts.push(`${summary.running} running`);
+  if (summary.error > 0) parts.push(`${summary.error} failed`);
+  if (!parts.length) return `${count} session${count === 1 ? '' : 's'}`;
+  return `${count} · ${parts.join(', ')}`;
+}
+
+/** Whether a group has something going on: a member runs or waits. */
+export function groupIsActive(summary) {
+  return Number(summary?.running || 0) > 0 || Number(summary?.waiting || 0) > 0;
+}
+
+/**
+ * Open or folded. The user's choice ('open' | 'folded') wins; otherwise a
+ * group is open while active and folded once everything is finished. The
+ * group that holds the open conversation, and every group under a title
+ * filter, is always open.
+ */
+export function resolveGroupFold({ choice = null, active = false, holdsOpenConversation = false, filterActive = false } = {}) {
+  if (holdsOpenConversation || filterActive) return true;
+  if (choice === 'open') return true;
+  if (choice === 'folded') return false;
+  return active === true;
+}
+
+/** The choice to store after a toggle from the current state. */
+export function toggledGroupFoldChoice(currentlyOpen) {
+  return currentlyOpen ? 'folded' : 'open';
+}
+
+/** `{ [groupId]: 'open' | 'folded' }` from storage text; anything else is dropped. */
+export function parseGroupFoldChoices(text) {
+  let parsed = null;
+  try {
+    parsed = JSON.parse(String(text || ''));
+  } catch {
+    return {};
+  }
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {};
+  const choices = {};
+  for (const [groupId, choice] of Object.entries(parsed)) {
+    if (choice === 'open' || choice === 'folded') choices[String(groupId)] = choice;
+  }
+  return choices;
+}
+
+/** The choices to keep: only those of groups still listed. */
+export function pruneGroupFoldChoices(choices, knownGroupIds) {
+  const known = new Set((Array.isArray(knownGroupIds) ? knownGroupIds : []).map((id) => String(id)));
+  const kept = {};
+  for (const [groupId, choice] of Object.entries(choices || {})) {
+    if (known.has(groupId)) kept[groupId] = choice;
+  }
+  return kept;
+}