@oar-sh/oar 0.9.19 → 0.9.21

package/server/public/app/remote-relay-origin-view.mjs

@@ -1,16 +1,17 @@
 // Provenance of work another relay's agent started here: the badge on a user
 // bubble ("↗ from win-test · “report builder” · claude-sonnet-5", linking back
-// to the source session) and the "↗ win-test" marker on the sidebar row of a
+// to the source session) and the line in the sidebar row's ⓘ menu of a
 // conversation such an agent created. Both read the `origin` the relay stores
 // with the message or conversation (docs/plans/2026-09-27-remote-relays.md §4).
 //
 // An agent on THIS relay can start sessions too. Such an origin carries
-// `local: true` and names the conversation the agent runs in: the marker then
-// reads "via agent · “title”" and opens that conversation inside the app
+// `local: true` and names the conversation the agent runs in: the header
+// marker then reads "via agent · “title”" and opens that conversation inside the app
 // (window.openOriginConversation, journal-view.js) instead of linking to
 // another relay. An origin without `local` renders exactly as before.
 
 import { remoteConversationUrl } from './remote-relay-shared.mjs';
+import { chatMetaLabelHtml } from './chat-header-meta.mjs';
 
 function escapeHtml(value) {
   return String(value ?? '')
@@ -81,8 +82,8 @@ export function localAgentOriginModel(origin, {
 
 // A button while the orchestrating conversation can be opened, plain text
 // otherwise. `tooltip` is a full sentence.
-function localAgentElementHtml(model, { className, text = model.text, tooltip }) {
-  const label = escapeHtml(text);
+function localAgentElementHtml(model, { className, text = model.text, tooltip, labelHtml = null }) {
+  const label = labelHtml ?? escapeHtml(text);
   if (model.linkable) {
     return `<button type="button" class="${className}" data-origin-conversation-id="${escapeHtml(model.conversationId)}" title="${escapeHtml(`${tooltip} Opens that conversation.`)}" onclick="openOriginConversation(event, this)">${label}</button>`;
   }
@@ -159,34 +160,51 @@ export function renderRemoteOriginBadgeHtml(origin, { linkable = true, conversat
 }
 
 /**
- * The sidebar marker for a conversation an agent created: "↗ win-test" for
- * another relay's agent, "via agent · “title”" for one on this relay.
+ * The line of the sidebar row's ⓘ menu for a conversation an agent created,
+ * or null. Plain text, for the menu to escape:
+ * - an agent on this relay: `{ kind: 'local', label: 'Started by an agent in
+ *   “title”', conversationId, linkable }` with the whole title, never cut;
+ *   while linkable, the line opens that conversation;
+ * - another relay's agent: `{ kind: 'remote', label: 'Started by an agent on
+ *   relay “name”', href }`; with an href, the line opens its session there.
+ * `linkable: false` (the shared view) gives lines without an action.
  */
-export function renderConversationOriginMarkerHtml(conversation, { conversations = null, linkable = true } = {}) {
-  const local = localAgentOriginModel(conversation?.origin, {
-    conversations,
-    linkable,
-    ownId: conversation?.id,
-    maxTitleLength: ORIGIN_TITLE_MAX_SIDEBAR,
-  });
+export function conversationOriginInfo(conversation, { conversations = null, linkable = true } = {}) {
+  const local = localAgentOriginModel(conversation?.origin, { conversations, linkable, ownId: conversation?.id });
   if (local) {
-    return localAgentElementHtml(local, {
-      className: 'conv-origin-marker conv-origin-agent',
-      tooltip: startedByTooltip(local),
-    });
+    return {
+      kind: 'local',
+      // The whole title: the menu wraps its lines, and nothing else in the
+      // list shows it.
+      label: local.fullTitle ? `Started by an agent in “${local.fullTitle}”` : 'Started by an agent in another conversation',
+      conversationId: local.conversationId,
+      linkable: local.linkable,
+    };
   }
   const normalized = normalizeRemoteOrigin(conversation?.origin);
-  if (!normalized) return '';
-  const name = escapeHtml(normalized.relayName);
-  return `<span class="conv-origin-marker" title="Started by an agent on relay ${name}">↗ ${name}</span>`;
+  if (!normalized) return null;
+  return {
+    kind: 'remote',
+    label: `Started by an agent on relay “${normalized.relayName}”`,
+    href: linkable !== false ? remoteOriginLink(normalized) : '',
+  };
+}
+
+/** The phone's short header label: "↗ title" (the sidebar's length), or "↗ agent". */
+export function conversationHeaderOriginShortText(model) {
+  if (!model) return '';
+  const title = truncateOriginTitle(model.fullTitle, ORIGIN_TITLE_MAX_SIDEBAR);
+  return title ? `↗ ${title}` : '↗ agent';
 }
 
 /**
  * The same marker for the conversation header, with room for more of the
- * title. Only a local origin has one; '' for everything else.
+ * title. Only a local origin has one; '' for everything else. It carries a
+ * long and a short label (chat-header-meta.mjs); CSS shows one of them.
  */
 export function renderConversationHeaderOriginHtml(conversation, { conversations = null, linkable = true } = {}) {
   const local = localAgentOriginModel(conversation?.origin, { conversations, linkable, ownId: conversation?.id });
   if (!local) return '';
-  return localAgentElementHtml(local, { className: 'conv-origin-agent', tooltip: startedByTooltip(local) });
+  const labelHtml = chatMetaLabelHtml(escapeHtml(local.text), escapeHtml(conversationHeaderOriginShortText(local)));
+  return localAgentElementHtml(local, { className: 'conv-origin-agent', tooltip: startedByTooltip(local), labelHtml });
 }

package/server/public/app/session-history-ui.js

@@ -0,0 +1,250 @@
+// Wires session-history.mjs to the page: the popstate listener, the
+// overlays it watches, the document title, and the hooks the open path calls
+// (journal-view.js). Before initSessionHistory() runs (the shared reader, the
+// unit tests) every hook here does nothing.
+
+import { conversations } from './store.js';
+import { closeContextMenu } from './context-menu.mjs';
+import { isStatusViewActive, toggleStatusView } from './status-view.mjs';
+import {
+  armVisitBaseOnFirstInteraction,
+  createGoneList,
+  createOverlayWatch,
+  createSessionHistory,
+} from './session-history.mjs';
+
+const PHONE_QUERY = '(max-width: 680px)';
+
+let sessionHistory = null;
+let baseTitle = '';
+// The relay knew no conversation the page tried to open, and said so: the
+// empty screen stays until the reader opens one (no question jumps in).
+let autoOpenHeld = false;
+
+function tabStorage() {
+  try {
+    return typeof sessionStorage === 'undefined' ? null : sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
+// Kept in the tab across reloads, as its history is.
+const goneConversationIds = createGoneList({ storage: tabStorage() });
+
+function isPhone() {
+  try {
+    return !!window.matchMedia?.(PHONE_QUERY)?.matches;
+  } catch {
+    return false;
+  }
+}
+
+function titleFor(id) {
+  if (!id) return baseTitle;
+  return String(conversations[id]?.title || '').trim() || baseTitle;
+}
+
+function setDocumentTitle(id) {
+  const next = titleFor(id);
+  if (document.title !== next) document.title = next;
+}
+
+const isVisible = (element) => !!element?.classList?.contains('visible');
+const isShown = (element) => !!element && !element.hidden;
+const byId = (id) => () => document.getElementById(id);
+
+/**
+ * The Inbox's and Status's closer, told where to go back to: the session the
+ * history stands on. One view opened from the other has no session of its
+ * own to return to (the first one had already left it).
+ */
+function backToSession(close) {
+  if (typeof close !== 'function') return undefined;
+  return () => close({ returnTo: sessionHistory?.conversation || '' });
+}
+
+/**
+ * Each overlay back closes before it switches sessions: `find()` names its
+ * element (null while there is none: some are built on first use), `isOpen`
+ * reads it. `closers` come from bootstrap.js, which holds most of them.
+ * Opened in the same moment, the earlier one in this list lies below.
+ */
+function overlayDescriptors(closers) {
+  return [
+    { name: 'sidebar', find: byId('sidebar'), isOpen: (el) => isPhone() && !!el?.classList?.contains('open'), close: closers.closeSidebar },
+    // The Inbox takes the transcript's place: back leaves it for the session it came from.
+    { name: 'inbox', find: () => document.body, isOpen: (el) => !!el?.classList?.contains('inbox-view-active'), close: backToSession(closers.closeInboxView) },
+    // Status the same way.
+    { name: 'status', find: () => document.body, isOpen: (el) => !!el?.classList?.contains('status-view-active'), close: backToSession(closers.closeStatusView) },
+    { name: 'composer-settings', find: byId('composer-settings'), isOpen: isShown, close: closers.closeComposerSettings },
+    { name: 'chat-actions-menu', find: byId('chat-actions-menu'), isOpen: isShown, close: closers.closeChatActionsMenu },
+    { name: 'summary-modal', find: byId('summary-modal'), isOpen: isVisible, close: closers.closeSummaryModal },
+    // The Change CWD dialog's list of known folders (inside the summary modal).
+    {
+      name: 'change-cwd-menu',
+      find: byId('change-cwd-menu'),
+      isOpen: (el) => isShown(el) && isVisible(document.getElementById('summary-modal')),
+      close: closers.closeChangeCwdMenu,
+    },
+    { name: 'settings-modal', find: byId('settings-modal'), isOpen: isVisible, close: closers.closeSettingsModal },
+    { name: 'message-search-modal', find: byId('message-search-modal'), isOpen: isVisible, close: closers.closeMessageSearchModal },
+    { name: 'repo-browser-modal', find: byId('repo-browser-modal'), isOpen: isVisible, close: closers.closeRepoBrowser },
+    { name: 'new-conversation-model-modal', find: byId('new-conversation-model-modal'), isOpen: isVisible, close: closers.closeNewConversationModelModal },
+    { name: 'git-changes-modal', find: byId('git-changes-modal'), isOpen: isVisible, close: closers.closeGitChangesModal },
+    { name: 'git-diff-modal', find: byId('git-diff-modal'), isOpen: isVisible, close: closers.closeGitDiffViewer },
+    { name: 'tmux-inspector-modal', find: byId('tmux-inspector-modal'), isOpen: isVisible, close: closers.closeTmuxInspector },
+    { name: 'image-annotate-modal', find: byId('image-annotate-modal'), isOpen: isVisible, close: closers.closeAnnotateEditor },
+    { name: 'relay-watch-panel', find: byId('relay-watch-panel'), isOpen: isShown, close: closers.closeRelayWatchPanel },
+    { name: 'relay-schedule-panel', find: byId('relay-schedule-panel'), isOpen: isShown, close: closers.closeRelaySchedulePanel },
+    { name: 'emoji-popup', find: byId('emoji-popup'), isOpen: isVisible, close: closers.closeEmojiPicker },
+    // A row's menu (right-click, long press, ⓘ): on <body> while open.
+    { name: 'context-menu', find: () => document.querySelector('body > .context-menu'), isOpen: (el) => !!el, close: closeContextMenu },
+  ];
+}
+
+// Where the overlays built on first use appear: the panels and the row menu
+// on <body>, the folder list inside the summary modal.
+const OVERLAY_HOSTS = [
+  ['body', { attributes: true, attributeFilter: ['class'], childList: true }],
+  ['summary-modal', { attributes: true, attributeFilter: ['class', 'hidden'], childList: true, subtree: true }],
+];
+
+function watchOverlays(closers) {
+  const overlays = overlayDescriptors(closers)
+    .filter((descriptor) => typeof descriptor.close === 'function')
+    .map((descriptor) => ({
+      name: descriptor.name,
+      find: descriptor.find,
+      isOpen: () => {
+        const element = descriptor.find();
+        return !!element && descriptor.isOpen(element);
+      },
+      close: () => descriptor.close(),
+    }));
+  const watch = createOverlayWatch({
+    overlays,
+    onOpened: (overlay) => sessionHistory?.overlayOpened(overlay),
+    onClosed: (name) => sessionHistory?.overlayClosed(name),
+  });
+  if (typeof MutationObserver === 'function') {
+    const observed = new WeakSet();
+    let observer = null;
+    const observe = (element, options = { attributes: true, attributeFilter: ['class', 'hidden'] }) => {
+      if (!element || observed.has(element)) return;
+      observed.add(element);
+      observer.observe(element, options);
+    };
+    // An overlay's element built since: watched from now on.
+    const observeOverlays = () => {
+      for (const overlay of overlays) {
+        const element = overlay.find();
+        if (element && element !== document.body) observe(element);
+      }
+    };
+    observer = new MutationObserver(() => {
+      observeOverlays();
+      watch.check();
+    });
+    for (const [id, options] of OVERLAY_HOSTS) {
+      observe(id === 'body' ? document.body : document.getElementById(id), options);
+    }
+    observeOverlays();
+  }
+  // The sidebar is an overlay on a phone only.
+  try {
+    window.matchMedia?.(PHONE_QUERY)?.addEventListener?.('change', () => watch.check());
+  } catch {}
+}
+
+// Leaving Status goes back to the conversation it was opened from, or else
+// to `returnTo`.
+function closeStatusViewDefault({ returnTo = '' } = {}) {
+  if (isStatusViewActive()) void toggleStatusView({ returnTo });
+}
+
+export function initSessionHistory({ openConversation, ...given } = {}) {
+  if (sessionHistory || typeof window === 'undefined' || !window.history) return sessionHistory;
+  const closers = { closeStatusView: closeStatusViewDefault, ...given };
+  baseTitle = document.title;
+  sessionHistory = createSessionHistory({
+    history: window.history,
+    location: window.location,
+    open: (id) => {
+      void Promise.resolve(openConversation?.(id, { history: 'none' })).catch(() => {});
+    },
+    isGone: (id) => goneConversationIds.has(id),
+    // Only where the list is an overlay: on a wide screen (a phone turned)
+    // openSidebar would un-collapse the desktop sidebar for good.
+    onList: () => { if (isPhone()) closers.openSidebar?.(); },
+    onLeaveList: () => closers.closeSidebar?.(),
+    setTitle: setDocumentTitle,
+    schedule: (fn, ms) => window.setTimeout(fn, ms),
+    cancel: (handle) => window.clearTimeout(handle),
+  });
+  window.addEventListener('popstate', () => sessionHistory.onPopState());
+  watchOverlays(closers);
+  return sessionHistory;
+}
+
+/** After the back guard's arming, so the list entry lies above its floor. */
+export function armSessionHistoryOnFirstInteraction(target = window) {
+  if (!sessionHistory) return null;
+  return armVisitBaseOnFirstInteraction({ target, sessionHistory, isPhone });
+}
+
+/** The entry the back guard pushes again above its floor. */
+export function sessionHistoryEntryAgain() {
+  return sessionHistory ? sessionHistory.entryAgain() : null;
+}
+
+/** openConversation's hook: `mode` is 'push' (default), 'replace' or 'none'. */
+export function noteConversationShown(id, mode = 'push') {
+  if (String(id || '').trim()) autoOpenHeld = false;
+  sessionHistory?.shown(id, { mode: mode || 'push' });
+}
+
+/** Nothing is open any more (the open one was deleted). */
+export function noteConversationCleared() {
+  sessionHistory?.shown(null, { mode: 'replace' });
+}
+
+/** A deleted conversation: back and forward step over its entries. */
+export function noteConversationGone(id) {
+  goneConversationIds.add(id);
+}
+
+/**
+ * The relay knows no conversation `id` (deleted elsewhere, a wrong link):
+ * its entries are stepped over from now on. True when back or forward led
+ * onto it and history steps on past it; false when the caller clears the
+ * view (and with it the entry and the address).
+ */
+export function noteConversationMissing(id) {
+  goneConversationIds.add(id);
+  // Nothing opens by itself after the notice, until the reader opens one.
+  autoOpenHeld = true;
+  return sessionHistory ? sessionHistory.missing(id) : false;
+}
+
+/**
+ * True after an unknown conversation left the view empty and said so, until
+ * the next conversation opens: a waiting question does not open its own in
+ * the meantime (ask-user-view.js).
+ */
+export function isConversationAutoOpenHeld() {
+  return autoOpenHeld;
+}
+
+/**
+ * The session the history stands on: the one the Inbox or Status was opened
+ * over, though the store holds none while either shows.
+ */
+export function sessionHistoryConversation() {
+  return sessionHistory?.conversation || '';
+}
+
+/** The open conversation was renamed. */
+export function syncSessionDocumentTitle() {
+  if (sessionHistory) setDocumentTitle(sessionHistory.conversation);
+}