@oar-sh/oar 0.9.20 → 0.9.22

package/server/public/app/questions-view.mjs

@@ -0,0 +1,89 @@
+// 📓 Questions of one conversation: the order the panel lists them in, the
+// header icon's count and its labels. Pure: no DOM, no fetch.
+//
+// An ask (relay-ask-service.mjs shape) is pending, or closed: answered,
+// dismissed, withdrawn or cancelled. Pending asks come first, the urgent ones
+// (`urgency: 'now'`) ahead of the rest, each group newest first; then those
+// closed in the last day, the latest close first.
+
+export const QUESTIONS_CLOSED_KEEP_MS = 24 * 60 * 60_000;
+
+function toText(value) {
+  return String(value ?? '').trim();
+}
+
+function timeOf(value) {
+  const ms = Date.parse(toText(value));
+  return Number.isFinite(ms) ? ms : 0;
+}
+
+function newestFirst(a, b) {
+  return timeOf(b.createdAt) - timeOf(a.createdAt) || toText(b.id).localeCompare(toText(a.id));
+}
+
+function closedAt(ask) {
+  return timeOf(ask.answeredAt) || timeOf(ask.updatedAt);
+}
+
+export function isUrgentAsk(ask) {
+  return ask?.urgency === 'now';
+}
+
+/**
+ * The asks of `conversationId`, split and ordered for the panel:
+ * `{ pending, urgent, answered }` where `pending` lists every pending ask
+ * (urgent ones first), `urgent` counts them and `answered` holds the asks
+ * closed within the last day.
+ */
+export function questionsOfConversation(asks, conversationId, now = Date.now()) {
+  const id = toText(conversationId);
+  const mine = (Array.isArray(asks) ? asks : [])
+    .filter((ask) => ask && !ask.relayId && id && toText(ask.conversationId || ask.session?.id) === id);
+  const pending = mine.filter((ask) => ask.status === 'pending');
+  const urgentAsks = pending.filter(isUrgentAsk).sort(newestFirst);
+  const normalAsks = pending.filter((ask) => !isUrgentAsk(ask)).sort(newestFirst);
+  const since = now - QUESTIONS_CLOSED_KEEP_MS;
+  const answered = mine
+    .filter((ask) => ask.status !== 'pending' && closedAt(ask) >= since)
+    .sort((a, b) => closedAt(b) - closedAt(a) || toText(b.id).localeCompare(toText(a.id)));
+  return { pending: [...urgentAsks, ...normalAsks], urgent: urgentAsks.length, answered };
+}
+
+/**
+ * A count badge: nothing at zero; with an urgent one waiting the urgent
+ * count, marked; else the pending count.
+ */
+export function questionsBadge({ pending = 0, urgent = 0 } = {}) {
+  const open = Math.max(0, Number(pending) || 0);
+  const hot = Math.max(0, Number(urgent) || 0);
+  if (hot > 0) return { text: String(hot), urgent: true };
+  if (open > 0) return { text: String(open), urgent: false };
+  return { text: '', urgent: false };
+}
+
+/** The 📓 button's tooltip and label. */
+export function questionsAria({ pending = 0, urgent = 0 } = {}) {
+  const open = Math.max(0, Number(pending) || 0);
+  const hot = Math.max(0, Number(urgent) || 0);
+  if (hot > 0) return `Questions (${hot} urgent of ${open} open)`;
+  if (open > 0) return `Questions (${open} open)`;
+  return 'Questions';
+}
+
+/** The ︙ twin's text: "📓 Questions (2 urgent)" / "(3 open)". */
+export function questionsTwinLabel({ pending = 0, urgent = 0 } = {}) {
+  const open = Math.max(0, Number(pending) || 0);
+  const hot = Math.max(0, Number(urgent) || 0);
+  if (hot > 0) return `📓 Questions (${hot} urgent)`;
+  if (open > 0) return `📓 Questions (${open} open)`;
+  return '📓 Questions';
+}
+
+/** The panel's head line: "📓 Questions · 2 urgent · 5 open". */
+export function questionsPanelTitle({ pending = 0, urgent = 0 } = {}) {
+  const open = Math.max(0, Number(pending) || 0);
+  const hot = Math.max(0, Number(urgent) || 0);
+  return ['📓 Questions', hot > 0 ? `${hot} urgent` : '', open > 0 ? `${open} open` : 'none open']
+    .filter(Boolean)
+    .join(' · ');
+}

package/server/public/app/relay-board-view.js

@@ -77,8 +77,18 @@ async function loadBoardHistory(conversationId) {
 
 /** Where a board is shown: its turn's reply, the live bubble of its turn, or nowhere yet. */
 function findBoardHost(el, board) {
-  const source = String(board?.messageId || board?.queueId || '').trim();
-  if (!source) return null;
+  return findTurnBubble(el, board?.messageId || board?.queueId);
+}
+
+/**
+ * The bubble of the turn that answers queue row `queueId`: its reply
+ * (`{ bubble, live: false }`), else the live bubble while it runs
+ * (`live: true`), else null (not loaded, or not there). Plan boards and 📓
+ * stubs both live there.
+ */
+export function findTurnBubble(el, queueId) {
+  const source = String(queueId || '').trim();
+  if (!el || !source) return null;
   const replies = el.querySelectorAll(`.msg.assistant[data-source-message-id="${CSS.escape(source)}"]`);
   // The turn's own reply is the last row that answers the message; a steer's
   // marker above it is not a reply.

package/server/public/app/relay-event-subscriptions-ui.js

@@ -1,14 +1,19 @@
 // Relay event subscriptions on the page: the header's "watching N sessions"
-// chip with its list and Unsubscribe buttons (on the watcher), and the
-// "watched" badge (on a watched session, in the header and the sidebar).
+// chip with its list and Unsubscribe buttons (on the watcher), the "watched"
+// badge in a watched session's header, and the "Watched by" line in its
+// sidebar row's ⓘ menu.
 // The relay sends the whole active list on every change (socket
 // `relay_event_subscriptions`); the page loads it once at start.
 
 import { apiFetch } from './api-client.js';
+import { FONT_SCALE_CHANGE_EVENT, getUiScale } from './font-scaling.js';
+import { isOpeningGestureClick } from './tap-actions.js';
 import { conversations, currentConvId, escHtml, IS_SHARED_VIEW, showTransientRelayNotice } from './store.js';
 import {
   renderWatchedBadgeHtml,
+  renderWatchingChipHtml,
   renderWatchingPanelHtml,
+  watchedInfoText,
   watchersOf,
   watchingChipHint,
   watchingChipText,
@@ -19,12 +24,40 @@ let subscriptions = [];
 let renderedChipKey = '';
 let panelOpen = false;
 let panelConversationId = '';
+// What the open list hangs from when the chip has no box (phone landscape
+// hides the meta line): the ︙ button its menu entry was picked from.
+let panelAnchor = null;
+// When the list last opened: the touch that opened it from ︙ still has its
+// click to come.
+let panelOpenedAt = 0;
 const changeListeners = new Set();
 
 export function getRelayEventSubscriptions() {
   return subscriptions;
 }
 
+/** The watching chip's text for a conversation ("watching 2 sessions"), or '' when it has none. */
+export function relayWatchingChipText(conversationId) {
+  const id = String(conversationId || '').trim();
+  if (IS_SHARED_VIEW || !id) return '';
+  return watchingChipText(watchingSummary(subscriptions, id));
+}
+
+/**
+ * Opens the watching chip's list, as a tap on the chip does, from elsewhere
+ * (the ︙ entry in phone landscape). `anchor` places it while the chip is
+ * not drawn.
+ */
+export function openRelayWatchPanel({ anchor = null } = {}) {
+  ensurePanel();
+  setPanelOpen(true, { anchor });
+}
+
+/** Closes the watching chip's list (back closes it before anything else). */
+export function closeRelayWatchPanel() {
+  if (panelOpen) setPanelOpen(false);
+}
+
 /** Runs after every change of the list (the sidebar re-renders its badges). */
 export function onRelayEventSubscriptionsChanged(listener) {
   changeListeners.add(listener);
@@ -45,10 +78,10 @@ export async function loadRelayEventSubscriptions() {
   if (response && Array.isArray(response.subscriptions)) applyRelayEventSubscriptions(response.subscriptions);
 }
 
-/** The sidebar's badge for one conversation: listed sessions only. */
-export function relayEventWatchedMarkerHtml(conversationId) {
+/** The line of the sidebar row's ⓘ menu for one conversation, or '': listed sessions only. */
+export function relayEventWatchedInfoText(conversationId) {
   if (IS_SHARED_VIEW) return '';
-  return renderWatchedBadgeHtml(watchersOf(subscriptions, conversationId, { includeAll: false }), { conversations, subscriptions, escHtml });
+  return watchedInfoText(watchersOf(subscriptions, conversationId, { includeAll: false }), { conversations, subscriptions });
 }
 
 async function unsubscribe(subscriptionId, button) {
@@ -66,7 +99,8 @@ async function unsubscribe(subscriptionId, button) {
 
 // The list opens as a fixed popover on <body>, placed under the chip: the
 // title slot clips its overflow (that keeps the title's ellipsis), so a panel
-// inside it would be cut off.
+// inside it would be cut off. Opened from ︙ (phone landscape, no chip
+// drawn), it hangs from ︙ instead.
 function ensurePanel() {
   let panel = document.getElementById('relay-watch-panel');
   if (panel) return panel;
@@ -82,50 +116,68 @@ function ensurePanel() {
     void unsubscribe(unsubscribeButton.getAttribute('data-subscription-id'), unsubscribeButton);
   });
   document.addEventListener('click', (event) => {
-    if (!panelOpen) return;
+    if (!panelOpen || isOpeningGestureClick(event, panelOpenedAt)) return;
     // composedPath: an Unsubscribe click may have re-rendered the panel already.
     const path = event.composedPath();
-    if (path.includes(panel) || path.some((node) => node instanceof Element && node.classList.contains('relay-watch-chip'))) return;
+    if (path.includes(panel) || (panelAnchor && path.includes(panelAnchor)) || path.some((node) => node instanceof Element && node.classList.contains('relay-watch-chip'))) return;
     setPanelOpen(false);
   });
   document.addEventListener('keydown', (event) => {
     if (!panelOpen || event.key !== 'Escape') return;
     event.stopPropagation();
+    const anchor = panelAnchor;
     setPanelOpen(false);
-    document.querySelector('#chat-title-relay-events .relay-watch-chip')?.focus?.();
+    const chip = document.querySelector('#chat-title-relay-events .relay-watch-chip');
+    (chip?.getClientRects?.().length ? chip : anchor || chip)?.focus?.();
   }, true);
   window.addEventListener('resize', () => { if (panelOpen) placePanel(); });
+  window.addEventListener(FONT_SCALE_CHANGE_EVENT, () => { if (panelOpen) placePanel(); });
   return panel;
 }
 
-function setPanelOpen(open) {
+function setPanelOpen(open, { anchor = null } = {}) {
+  if (open && !panelOpen) panelOpenedAt = Date.now();
   panelOpen = Boolean(open);
+  panelAnchor = panelOpen ? anchor : null;
   renderedChipKey = '';
   syncRelayEventHeader();
 }
 
+// A box to place against, or null: an element that is not drawn has none.
+function drawnRect(element) {
+  const rect = element?.getBoundingClientRect?.();
+  return rect && (rect.width || rect.height) ? rect : null;
+}
+
 function placePanel() {
   const panel = document.getElementById('relay-watch-panel');
   const chip = document.querySelector('#chat-title-relay-events .relay-watch-chip');
   if (!panel || panel.hidden) return;
-  const rect = chip?.getBoundingClientRect?.();
-  if (!rect || (!rect.width && !rect.height)) {
+  // Under the chip; with no chip drawn, under the anchor, right edges lined up.
+  const chipRect = drawnRect(chip);
+  const rect = chipRect || drawnRect(panelAnchor);
+  if (!rect) {
     panel.hidden = true;
     return;
   }
-  const margin = 8;
+  // 8px edge, 4px gap and a 120px floor at 100 %, scaled with the zoom.
+  const scale = getUiScale();
+  const margin = 8 * scale;
   const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-  const top = Math.round(rect.bottom + 4);
+  const top = Math.round(rect.bottom + 4 * scale);
   panel.style.top = `${top}px`;
-  panel.style.maxHeight = `${Math.max(120, window.innerHeight - top - margin)}px`;
+  panel.style.maxHeight = `${Math.round(Math.max(120 * scale, window.innerHeight - top - margin))}px`;
   panel.style.left = '0px';
   const width = panel.offsetWidth;
-  const left = Math.max(margin, Math.min(rect.left, viewportWidth - width - margin));
+  const preferred = chipRect ? rect.left : rect.right - width;
+  const left = Math.max(margin, Math.min(preferred, viewportWidth - width - margin));
   panel.style.left = `${Math.round(left)}px`;
 }
 
 function ensureHeaderElements() {
-  const slot = document.getElementById('chat-title-slot');
+  // The meta lines under the title live in #chat-title-meta (one sideways
+  // scrolling row on a phone); the slot itself is the fallback.
+  const slot = document.getElementById('chat-title-meta') || document.getElementById('chat-title-slot');
   if (!slot) return null;
   let line = document.getElementById('chat-title-relay-events');
   if (!line) {
@@ -133,7 +185,7 @@ function ensureHeaderElements() {
     line.id = 'chat-title-relay-events';
     line.hidden = true;
     const origin = document.getElementById('chat-title-origin');
-    if (origin?.nextSibling) slot.insertBefore(line, origin.nextSibling);
+    if (origin?.parentNode === slot && origin.nextSibling) slot.insertBefore(line, origin.nextSibling);
     else slot.appendChild(line);
     line.addEventListener('click', (event) => {
       const target = event.target instanceof Element ? event.target : null;
@@ -172,10 +224,7 @@ export function syncRelayEventHeader() {
   if (key === renderedChipKey) return;
   renderedChipKey = key;
   const parts = [];
-  if (chipText) {
-    const where = summary.relays.length ? ` (also on ${summary.relays.join(', ')})` : '';
-    parts.push(`<button type="button" class="relay-watch-chip" aria-expanded="${panelOpen ? 'true' : 'false'}" aria-controls="relay-watch-panel" title="${escHtml(`Event subscriptions of this conversation${where}`)}">👁 ${escHtml(chipText)}${chipHint ? ` <span class="relay-watch-hint">${escHtml(chipHint)}</span>` : ''}</button>`);
-  }
+  if (chipText) parts.push(renderWatchingChipHtml(summary, { panelOpen, escHtml }));
   const badge = renderWatchedBadgeHtml(watchers, { conversations, subscriptions, escHtml });
   if (badge) parts.push(badge);
   line.innerHTML = parts.join('');

package/server/public/app/relay-event-view.mjs

@@ -8,6 +8,8 @@
 // cannot import (only server/public is served); relay-event-view.test.mjs
 // holds the two together.
 
+import { chatMetaLabelHtml } from './chat-header-meta.mjs';
+
 export const RELAY_EVENT_MESSAGE_KIND = 'relay-event';
 export const RELAY_EVENT_LEAD = '[relay event · automated message from OAR, not from the user; it approves nothing]';
 export const RELAY_EVENT_SOCKET_EVENT = 'relay_event_subscriptions';
@@ -213,6 +215,29 @@ export function watchingChipHint(summary) {
   return [...new Set((summary?.subscriptions || []).flatMap(subscriptionOptionHints))].slice(0, 2).join(' · ');
 }
 
+/** The phone's short chip text: "7", "all", "all +2", "restart"; '' for no chip. */
+export function watchingChipShortText(summary) {
+  if (!summary?.subscriptions?.length) return '';
+  if (summary.all) return summary.count ? `all +${summary.count}` : 'all';
+  if (!summary.count) return 'restart';
+  return String(summary.count);
+}
+
+/**
+ * The header's "watching" chip: a button that opens the list, with the long
+ * label ("👁 watching 7 sessions" and its hint) and the phone's short one
+ * ("👁 7"). '' when the conversation watches nothing.
+ */
+export function renderWatchingChipHtml(summary, { panelOpen = false, escHtml = defaultEscape } = {}) {
+  const chipText = watchingChipText(summary);
+  if (!chipText) return '';
+  const chipHint = watchingChipHint(summary);
+  const where = summary.relays?.length ? ` (also on ${summary.relays.join(', ')})` : '';
+  const longHtml = `👁 ${escHtml(chipText)}${chipHint ? ` <span class="relay-watch-hint">${escHtml(chipHint)}</span>` : ''}`;
+  const shortHtml = `👁 ${escHtml(watchingChipShortText(summary))}`;
+  return `<button type="button" class="relay-watch-chip" aria-expanded="${panelOpen ? 'true' : 'false'}" aria-controls="relay-watch-panel" title="${escHtml(`Event subscriptions of this conversation${where}`)}">${chatMetaLabelHtml(longHtml, shortHtml)}</button>`;
+}
+
 function conversationTitle(conversations, id) {
   const title = String(conversations?.[id]?.title || '').trim();
   return title || `session ${String(id).slice(0, 8)}`;
@@ -261,6 +286,19 @@ function watcherName(id, conversations, subscriptions) {
   return `${title} on ${relay}`;
 }
 
+/**
+ * The line of the sidebar row's ⓘ menu for a watched conversation: "Watched
+ * by title" for one watcher, "Watched by 3 sessions: a, b, c" for more (each
+ * named, as the header's list does); '' for none. Plain text, for the menu
+ * to escape.
+ */
+export function watchedInfoText(watcherIds, { conversations = null, subscriptions = [] } = {}) {
+  if (!watcherIds?.length) return '';
+  const names = watcherIds.map((id) => watcherName(id, conversations, subscriptions));
+  if (names.length > 1) return `Watched by ${names.length} sessions: ${names.join(', ')}`;
+  return `Watched by ${names[0]}`;
+}
+
 export function renderWatchedBadgeHtml(watcherIds, { conversations = null, subscriptions = [], escHtml = defaultEscape } = {}) {
   if (!watcherIds?.length) return '';
   const names = watcherIds.map((id) => watcherName(id, conversations, subscriptions)).join(', ');

package/server/public/app/relay-restart-ui.js

@@ -313,7 +313,7 @@ let applyState = () => {};
 let inFlight = false;
 // What an open "now" button acts on: the action shown (a queued shutdown
 // stays a shutdown) and the queued request it was shown for, or null from
-// the ⋯ menu with nothing queued. The relay refuses a request that is gone.
+// the ︙ menu with nothing queued. The relay refuses a request that is gone.
 let nowTarget = { action: 'restart', requestedAt: null };
 
 function targetFrom(state) {
@@ -379,7 +379,7 @@ async function loadPictureInto({ kind, title, subtitle, render }) {
   renderSummaryModalContent({ title, subtitle, kind, bodyHtml: render(result || {}) });
 }
 
-/** ⋯ → Restart web relay: shows what the restart would wait for first. */
+/** ︙ → Restart web relay: shows what the restart would wait for first. */
 export function openRestartRelayConfirmation() {
   nowTarget = { action: 'restart', requestedAt: null };
   const title = 'Restart web relay';

package/server/public/app/relay-schedule-view.mjs

@@ -1,5 +1,5 @@
-// Relay schedules in the browser: the "scheduled" marker on a conversation's
-// sidebar row and the header's "N scheduled" chip with its list and Cancel
+// Relay schedules in the browser: the "Scheduled" line in the ⓘ menu of a
+// conversation's sidebar row and the header's "N scheduled" chip with its list and Cancel
 // buttons.
 //
 // DOM-free on purpose, like relay-event-view.mjs: the callers own the
@@ -9,6 +9,8 @@
 // cannot import (only server/public is served); relay-schedule-view.test.mjs
 // holds the two together.
 
+import { chatMetaLabelHtml } from './chat-header-meta.mjs';
+
 export const RELAY_SCHEDULE_SOCKET_EVENT = 'relay_schedules';
 export const RELAY_SCHEDULE_MESSAGE_KIND = 'relay-schedule';
 
@@ -76,18 +78,42 @@ export function scheduleChipText(schedules) {
   return count ? `${count} scheduled` : '';
 }
 
+/** The phone's short chip text: the next time ("04:15"), else the count; '' for no chip. */
+export function scheduleChipShortText(schedules, { nextText = '' } = {}) {
+  const count = activeList(schedules).length;
+  if (!count) return '';
+  return String(nextText || '').trim() || String(count);
+}
+
+/**
+ * The header's chip: a button that opens the list, with the long label
+ * ("⏰ 1 scheduled next 04:15 AM") and the phone's short one ("⏰ 04:15 AM").
+ * `nextText` is the next fire time as the caller formats it. '' for none.
+ */
+export function renderScheduleChipHtml(schedules, { panelOpen = false, nextText = '', escHtml = defaultEscape } = {}) {
+  const chipText = scheduleChipText(schedules);
+  if (!chipText) return '';
+  const longHtml = `⏰ ${escHtml(chipText)}${nextText ? ` <span class="relay-watch-hint">next ${escHtml(nextText)}</span>` : ''}`;
+  const shortHtml = `⏰ ${escHtml(scheduleChipShortText(schedules, { nextText }))}`;
+  return `<button type="button" class="relay-watch-chip relay-schedule-chip" aria-expanded="${panelOpen ? 'true' : 'false'}" aria-controls="relay-schedule-panel" title="Prompts the relay queues at set times (agents set them with relay_tool schedule)">${chatMetaLabelHtml(longHtml, shortHtml)}</button>`;
+}
+
 function conversationTitle(conversations, id, fallback = '') {
   const title = String(conversations?.[id]?.title || fallback || '').trim();
   return title || `session ${String(id).slice(0, 8)}`;
 }
 
-/** The sidebar's marker for a conversation a schedule fires into, or ''. */
-export function renderScheduledBadgeHtml(schedules, conversationId, { escHtml = defaultEscape, formatTime = defaultFormatTime } = {}) {
+/**
+ * The line of the sidebar row's ⓘ menu for a conversation schedules fire
+ * into: "Scheduled · next 04:15", "2 schedules · next 04:15"; '' for none.
+ * Plain text, for the menu to escape.
+ */
+export function scheduledInfoText(schedules, conversationId, { formatTime = defaultFormatTime } = {}) {
   const into = schedulesInto(schedules, conversationId);
   if (!into.length) return '';
   const next = nextScheduledAt(into);
-  const hint = `${into.length} schedule${into.length === 1 ? '' : 's'}${next ? ` · next ${formatTime(next)}` : ''}`;
-  return `<span class="conv-scheduled-badge" title="${escHtml(hint)}">scheduled</span>`;
+  const what = into.length === 1 ? 'Scheduled' : `${into.length} schedules`;
+  return next ? `${what} · next ${formatTime(next)}` : what;
 }
 
 /**

package/server/public/app/relay-schedules-ui.js

@@ -1,16 +1,19 @@
 // Relay schedules on the page: the header's "N scheduled" chip with its list
 // and Cancel buttons (on a conversation a schedule fires into or that set
-// one), and the "scheduled" marker on the sidebar row of a conversation a
-// schedule fires into. The relay sends the whole active list on every change
+// one), and the "Scheduled" line in the sidebar row's ⓘ menu of a
+// conversation a schedule fires into. The relay sends the whole active list on every change
 // (socket `relay_schedules`); the page loads it once at start.
 
 import { apiFetch } from './api-client.js';
+import { FONT_SCALE_CHANGE_EVENT, getUiScale } from './font-scaling.js';
+import { isOpeningGestureClick } from './tap-actions.js';
 import { conversations, currentConvId, escHtml, IS_SHARED_VIEW, showTransientRelayNotice } from './store.js';
 import {
   nextScheduledAt,
-  renderScheduledBadgeHtml,
+  renderScheduleChipHtml,
   renderSchedulePanelHtml,
   scheduleChipText,
+  scheduledInfoText,
   schedulesOf,
 } from './relay-schedule-view.mjs';
 
@@ -18,8 +21,36 @@ let schedules = [];
 let renderedChipKey = '';
 let panelOpen = false;
 let panelConversationId = '';
+// What the open list hangs from when the chip has no box (phone landscape
+// hides the meta line): the ︙ button its menu entry was picked from.
+let panelAnchor = null;
+// When the list last opened: the touch that opened it from ︙ still has its
+// click to come.
+let panelOpenedAt = 0;
 const changeListeners = new Set();
 
+/** The schedule chip's text for a conversation ("2 scheduled"), or '' when it has none. */
+export function relayScheduleChipText(conversationId) {
+  const id = String(conversationId || '').trim();
+  if (IS_SHARED_VIEW || !id) return '';
+  return scheduleChipText(schedulesOf(schedules, id));
+}
+
+/**
+ * Opens the schedule chip's list, as a tap on the chip does, from elsewhere
+ * (the ︙ entry in phone landscape). `anchor` places it while the chip is
+ * not drawn.
+ */
+export function openRelaySchedulePanel({ anchor = null } = {}) {
+  ensurePanel();
+  setPanelOpen(true, { anchor });
+}
+
+/** Closes the schedule chip's list (back closes it before anything else). */
+export function closeRelaySchedulePanel() {
+  if (panelOpen) setPanelOpen(false);
+}
+
 /** Runs after every change of the list (the sidebar re-renders its markers). */
 export function onRelaySchedulesChanged(listener) {
   changeListeners.add(listener);
@@ -40,10 +71,10 @@ export async function loadRelaySchedules() {
   if (response && Array.isArray(response.schedules)) applyRelaySchedules(response.schedules);
 }
 
-/** The sidebar's marker for one conversation. */
-export function relayScheduleMarkerHtml(conversationId) {
+/** The line of the sidebar row's ⓘ menu for one conversation, or ''. */
+export function relayScheduleInfoText(conversationId) {
   if (IS_SHARED_VIEW) return '';
-  return renderScheduledBadgeHtml(schedules, conversationId, { escHtml });
+  return scheduledInfoText(schedules, conversationId);
 }
 
 async function cancelSchedule(scheduleId, button) {
@@ -60,7 +91,8 @@ async function cancelSchedule(scheduleId, button) {
 }
 
 // A fixed popover on <body>, placed under the chip, like the subscriptions'
-// list: the title slot clips its overflow.
+// list: the title slot clips its overflow. Opened from ︙ (phone landscape,
+// no chip drawn), it hangs from ︙ instead.
 function ensurePanel() {
   let panel = document.getElementById('relay-schedule-panel');
   if (panel) return panel;
@@ -76,50 +108,67 @@ function ensurePanel() {
     void cancelSchedule(cancelButton.getAttribute('data-schedule-id'), cancelButton);
   });
   document.addEventListener('click', (event) => {
-    if (!panelOpen) return;
+    if (!panelOpen || isOpeningGestureClick(event, panelOpenedAt)) return;
     // composedPath: a Cancel click may have re-rendered the panel already.
     const path = event.composedPath();
-    if (path.includes(panel) || path.some((node) => node instanceof Element && node.classList.contains('relay-schedule-chip'))) return;
+    if (path.includes(panel) || (panelAnchor && path.includes(panelAnchor)) || path.some((node) => node instanceof Element && node.classList.contains('relay-schedule-chip'))) return;
     setPanelOpen(false);
   });
   document.addEventListener('keydown', (event) => {
     if (!panelOpen || event.key !== 'Escape') return;
     event.stopPropagation();
+    const anchor = panelAnchor;
     setPanelOpen(false);
-    document.querySelector('#chat-title-relay-schedules .relay-schedule-chip')?.focus?.();
+    const chip = document.querySelector('#chat-title-relay-schedules .relay-schedule-chip');
+    (chip?.getClientRects?.().length ? chip : anchor || chip)?.focus?.();
   }, true);
   window.addEventListener('resize', () => { if (panelOpen) placePanel(); });
+  window.addEventListener(FONT_SCALE_CHANGE_EVENT, () => { if (panelOpen) placePanel(); });
   return panel;
 }
 
-function setPanelOpen(open) {
+function setPanelOpen(open, { anchor = null } = {}) {
+  if (open && !panelOpen) panelOpenedAt = Date.now();
   panelOpen = Boolean(open);
+  panelAnchor = panelOpen ? anchor : null;
   renderedChipKey = '';
   syncRelayScheduleHeader();
 }
 
+// A box to place against, or null: an element that is not drawn has none.
+function drawnRect(element) {
+  const rect = element?.getBoundingClientRect?.();
+  return rect && (rect.width || rect.height) ? rect : null;
+}
+
 function placePanel() {
   const panel = document.getElementById('relay-schedule-panel');
   const chip = document.querySelector('#chat-title-relay-schedules .relay-schedule-chip');
   if (!panel || panel.hidden) return;
-  const rect = chip?.getBoundingClientRect?.();
-  if (!rect || (!rect.width && !rect.height)) {
+  // Under the chip; with no chip drawn, under the anchor, right edges lined up.
+  const chipRect = drawnRect(chip);
+  const rect = chipRect || drawnRect(panelAnchor);
+  if (!rect) {
     panel.hidden = true;
     return;
   }
-  const margin = 8;
+  // 8px edge, 4px gap and a 120px floor at 100 %, scaled with the zoom.
+  const scale = getUiScale();
+  const margin = 8 * scale;
   const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-  const top = Math.round(rect.bottom + 4);
+  const top = Math.round(rect.bottom + 4 * scale);
   panel.style.top = `${top}px`;
-  panel.style.maxHeight = `${Math.max(120, window.innerHeight - top - margin)}px`;
+  panel.style.maxHeight = `${Math.round(Math.max(120 * scale, window.innerHeight - top - margin))}px`;
   panel.style.left = '0px';
   const width = panel.offsetWidth;
-  const left = Math.max(margin, Math.min(rect.left, viewportWidth - width - margin));
+  const preferred = chipRect ? rect.left : rect.right - width;
+  const left = Math.max(margin, Math.min(preferred, viewportWidth - width - margin));
   panel.style.left = `${Math.round(left)}px`;
 }
 
 function ensureHeaderElements() {
-  const slot = document.getElementById('chat-title-slot');
+  // Beside the other meta lines in #chat-title-meta; the slot is the fallback.
+  const slot = document.getElementById('chat-title-meta') || document.getElementById('chat-title-slot');
   if (!slot) return null;
   let line = document.getElementById('chat-title-relay-schedules');
   if (!line) {
@@ -127,7 +176,7 @@ function ensureHeaderElements() {
     line.id = 'chat-title-relay-schedules';
     line.hidden = true;
     const after = document.getElementById('chat-title-relay-events') || document.getElementById('chat-title-origin');
-    if (after?.nextSibling) slot.insertBefore(line, after.nextSibling);
+    if (after?.parentNode === slot && after.nextSibling) slot.insertBefore(line, after.nextSibling);
     else slot.appendChild(line);
     line.addEventListener('click', (event) => {
       const target = event.target instanceof Element ? event.target : null;
@@ -164,7 +213,7 @@ export function syncRelayScheduleHeader() {
   }
   const next = nextScheduledAt(mine);
   const nextText = next ? new Date(next).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
-  line.innerHTML = `<button type="button" class="relay-watch-chip relay-schedule-chip" aria-expanded="${panelOpen ? 'true' : 'false'}" aria-controls="relay-schedule-panel" title="Prompts the relay queues at set times (agents set them with relay_tool schedule)">⏰ ${escHtml(chipText)}${nextText ? ` <span class="relay-watch-hint">next ${escHtml(nextText)}</span>` : ''}</button>`;
+  line.innerHTML = renderScheduleChipHtml(mine, { panelOpen, nextText, escHtml });
   line.hidden = false;
   panel.innerHTML = panelOpen ? renderSchedulePanelHtml(schedules, id, { conversations, escHtml }) : '';
   panel.hidden = !panelOpen;