@oar-sh/oar 0.9.19 → 0.9.21

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

@@ -1,5 +1,6 @@
 import {
   IS_SHARED_VIEW,
+  conversations,
   currentConvId,
   escHtml,
   relayBoards,
@@ -12,9 +13,11 @@ import {
   boardsOfConversation,
 } from './relay-board-inline.mjs';
 import {
+  loadRelayBoard as loadRelayBoardApi,
   loadRelayBoards as loadRelayBoardsApi,
   submitRelayBoardAction as submitRelayBoardActionApi,
 } from './api-client.js';
+import { planBoardConfirmText } from './plan-board-shared.mjs';
 import { renderMarkdownPreview } from './router.js';
 import { attachCodeCopyButtons } from './code-copy.mjs';
 import { beginOwnSend, followsTranscriptEnd, refreshJumpButton, scrollAfterOwnSend } from './transcript-jump-bottom-view.mjs';
@@ -203,27 +206,52 @@ export function renderRelayBoards() {
   return added;
 }
 
-export async function submitRelayBoardAction(boardId, actionId) {
+/**
+ * Settle a board, from its card or from the Inbox (`board`: what the caller
+ * shows, when the store has no copy; `controls`: the buttons to hold while
+ * it goes). On a plan-only session an action that leaves plan mode asks
+ * first. A board the other view settled meanwhile is shown as settled, with
+ * no alert. Returns the board as it is now, or null when nothing was done.
+ */
+export async function actOnRelayBoard(boardId, actionId, { board: shown = null, controls = [] } = {}) {
   const id = String(boardId || '').trim();
   const nextActionId = String(actionId || '').trim();
-  if (!id || !nextActionId) return;
-  const card = document.querySelector(`.relay-board-inline[data-board-id="${CSS.escape(id)}"]`);
-  const controls = card ? card.querySelectorAll('button') : [];
+  if (!id || !nextActionId) return null;
+  const board = relayBoards.get(id) || shown;
+  // The flag as the page knows it now; the board's own copy otherwise.
+  const conversation = conversations[String(board?.conversationId || shown?.session?.id || '').trim()] || null;
+  const planOnly = typeof conversation?.planOnly === 'boolean' ? conversation.planOnly : board?.planOnly === true;
+  const action = (Array.isArray(board?.actions) ? board.actions : [])
+    .find((item) => String(item?.id || '').trim().toLowerCase() === nextActionId.toLowerCase());
+  const question = planBoardConfirmText({ planOnly, actionId: nextActionId, label: action?.label });
+  if (question && !window.confirm(question)) return null;
   controls.forEach((control) => { control.disabled = true; });
-  const send = beginOwnSend();
-
+  let status = 0;
   try {
-    const r = await submitRelayBoardActionApi(id, nextActionId);
-    if (!r?.board) throw new Error('Failed to submit board action');
+    const r = await submitRelayBoardActionApi(id, nextActionId, { onErrorResponse: (response) => { status = response.status; } });
+    let settled = r?.board || null;
+    // Settled by the other view (or another page) meanwhile: show what was chosen.
+    if (!settled && status === 409) settled = (await loadRelayBoardApi(id))?.board || null;
+    if (!settled) throw new Error('Failed to submit board action');
     // Kept once it is settled: the reply goes on showing the plan and says
     // what was chosen.
-    relayBoards.set(id, r.board);
+    relayBoards.set(id, settled);
     window.renderConvList?.();
     renderRelayBoards();
-    scrollAfterOwnSend(send);
+    return settled;
   } catch (error) {
     controls.forEach((control) => { control.disabled = false; });
     alert(error.message || 'Failed to submit board action');
+    return null;
   }
 }
 
+export async function submitRelayBoardAction(boardId, actionId) {
+  const id = String(boardId || '').trim();
+  if (!id || !String(actionId || '').trim()) return;
+  const card = document.querySelector(`.relay-board-inline[data-board-id="${CSS.escape(id)}"]`);
+  const controls = card ? [...card.querySelectorAll('button')] : [];
+  const send = beginOwnSend();
+  if (await actOnRelayBoard(id, actionId, { controls })) scrollAfterOwnSend(send);
+}
+

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,12 +8,15 @@
 // 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';
 
 const EVENT_TYPES = new Set([
   'question_asked',
+  'question_answered',
   'error',
   'turn_end',
   'task_started',
@@ -21,6 +24,7 @@ const EVENT_TYPES = new Set([
   'task_failed',
   'stalled',
   'all_idle',
+  'board_settled',
   'heartbeat',
   'link_lost',
   'link_restored',
@@ -35,6 +39,7 @@ const LINE_PREFIX = '[relay event] ';
 
 const TYPE_LABELS = Object.freeze({
   question_asked: 'question',
+  question_answered: 'answer',
   error: 'error',
   turn_end: 'reply',
   task_started: 'task started',
@@ -42,6 +47,7 @@ const TYPE_LABELS = Object.freeze({
   task_failed: 'task failed',
   stalled: 'stalled',
   all_idle: 'all idle',
+  board_settled: 'plan card settled',
   heartbeat: 'heartbeat',
   link_lost: 'link lost',
   link_restored: 'link back',
@@ -209,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)}`;
@@ -257,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;