@oar-sh/oar 0.9.10 → 0.9.12

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

@@ -1,13 +1,14 @@
 // 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, 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, 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 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
@@ -26,11 +27,14 @@ export const CHAT_ACTIONS_MENU_ENTRY_IDS = Object.freeze([
   'chat-menu-pwa-version',
   'chat-menu-queue-status',
   'chat-menu-edit-title',
-  'chat-menu-shared-theme-toggle',
+  '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',
@@ -38,6 +42,7 @@ export const CHAT_ACTIONS_MENU_ENTRY_IDS = Object.freeze([
   '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',
@@ -59,6 +64,7 @@ const hidden = () => ({ hidden: true, disabled: true });
  * @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({
@@ -70,11 +76,12 @@ export function resolveChatActionsMenuState({
   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-shared-theme-toggle'] = shown();
+    entries['chat-menu-theme-toggle'] = shown();
     return { trigger: { hidden: false, disabled: false }, entries };
   }
 
@@ -87,10 +94,13 @@ export function resolveChatActionsMenuState({
 
   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-shared-theme-toggle'] = 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.

package/server/public/app/claude-background-command-limit-options.mjs

@@ -0,0 +1,21 @@
+// Mirrors shared/claude-background-command-limit.mjs, which the browser cannot
+// import (only server/public is served).
+// shared/claude-background-command-limit.test.mjs asserts the two stay
+// identical.
+//
+// The Claude settings slider shows the default until the relay's own value
+// loads; the authoritative bounds come from GET /api/settings/claude.
+
+export const DEFAULT_CLAUDE_BACKGROUND_COMMAND_LIMIT_MINUTES = 120;
+export const CLAUDE_BACKGROUND_COMMAND_LIMIT_MIN_MINUTES = 30;
+export const CLAUDE_BACKGROUND_COMMAND_LIMIT_MAX_MINUTES = 480;
+export const CLAUDE_BACKGROUND_COMMAND_LIMIT_STEP_MINUTES = 30;
+
+export function formatClaudeBackgroundCommandLimitLabel(minutes) {
+  const numeric = Math.round(Number(minutes));
+  const value = Number.isFinite(numeric) && numeric > 0 ? numeric : DEFAULT_CLAUDE_BACKGROUND_COMMAND_LIMIT_MINUTES;
+  if (value < 60) return `${value} min`;
+  const hours = Math.floor(value / 60);
+  const remainder = value % 60;
+  return remainder ? `${hours} h ${remainder} min` : `${hours} h`;
+}

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