@oar-sh/oar 0.9.20 → 0.9.21

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

@@ -1,4 +1,4 @@
-// The header's ⋯ menu: one decision for its trigger and for every entry, with
+// 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, About OAR,
@@ -12,10 +12,27 @@
 //
 // 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
-// conversation failed to load.
+// conversation failed to load. Once Day/Night fits in the header the shared
+// menu is empty and the trigger hides.
+//
+// The twins of the header's priority+ actions (pins, hidden, search, context,
+// Day/Night, Check Usage, fullscreen) show only while their header button
+// does not fit; the header's fit pass hands in which ones that is.
+//
+// A phone on its side hides the header's meta line, and with it the chips
+// that open something (the watching chip's list, the schedule chip's list,
+// the origin's conversation). There, and only for a chip the conversation
+// has, the menu carries an entry that does the same.
 
 export const CHAT_ACTIONS_MENU_TRIGGER_ID = 'chat-actions-menu-btn';
 
+/** The stand-ins for the meta line's chips in phone landscape, by chip. */
+export const CHAT_ACTIONS_MENU_META_CHIP_IDS = Object.freeze({
+  watching: 'chat-menu-watching',
+  schedules: 'chat-menu-schedules',
+  origin: 'chat-menu-origin',
+});
+
 /** Entries that are text, not actions: `hidden` is applied, nothing else. */
 export const CHAT_ACTIONS_MENU_META_IDS = Object.freeze([
   'chat-menu-pwa-version',
@@ -26,9 +43,17 @@ export const CHAT_ACTIONS_MENU_META_IDS = Object.freeze([
 export const CHAT_ACTIONS_MENU_ENTRY_IDS = Object.freeze([
   'chat-menu-pwa-version',
   'chat-menu-queue-status',
+  'chat-menu-watching',
+  'chat-menu-schedules',
+  'chat-menu-origin',
   'chat-menu-edit-title',
+  'chat-menu-pins',
+  'chat-menu-hidden',
+  'chat-menu-search',
+  'chat-menu-context',
   'chat-menu-theme-toggle',
   'chat-menu-usage',
+  'chat-menu-fullscreen',
   'chat-menu-compact',
   'chat-menu-share-conversation',
   'chat-menu-stop-sharing',
@@ -51,6 +76,35 @@ export const CHAT_ACTIONS_MENU_ENTRY_IDS = Object.freeze([
 /** Entries that are never shown: retired actions kept in the markup. */
 const ALWAYS_HIDDEN_IDS = new Set(['chat-menu-compact', 'chat-menu-refresh-history']);
 
+/**
+ * The twins of the header's priority+ actions (header-priority-actions.mjs):
+ * each shows here only while its header button does not fit. Kept in sync
+ * with HEADER_PRIORITY_MENU_IDS by the tests.
+ */
+export const CHAT_ACTIONS_MENU_TWIN_IDS = Object.freeze([
+  'chat-menu-pins',
+  'chat-menu-hidden',
+  'chat-menu-search',
+  'chat-menu-context',
+  'chat-menu-usage',
+  'chat-menu-theme-toggle',
+  'chat-menu-fullscreen',
+]);
+
+// Before the header was ever measured, the menu keeps the reach it always
+// had: Day/Night and Check Usage. The other twins stay hidden, their header
+// buttons show as they always did.
+const UNMEASURED_TWIN_IDS = new Set(['chat-menu-theme-toggle', 'chat-menu-usage']);
+
+// The shared read-only view offers Day/Night and nothing else.
+const SHARED_TWIN_IDS = new Set(['chat-menu-theme-toggle']);
+
+function twinShown(id, { sharedMode, headerMenuIds }) {
+  if (sharedMode && !SHARED_TWIN_IDS.has(id)) return false;
+  if (!Array.isArray(headerMenuIds)) return UNMEASURED_TWIN_IDS.has(id);
+  return headerMenuIds.includes(id);
+}
+
 const shown = (disabled = false) => ({ hidden: false, disabled: !!disabled });
 const hidden = () => ({ hidden: true, disabled: true });
 
@@ -65,6 +119,17 @@ const hidden = () => ({ hidden: true, disabled: true });
  * @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
+ * @param {string[]|null} [input.headerMenuIds] the twin entries the header's
+ *   fit pass put into the menu (available and not fitting); null before the
+ *   header was measured
+ * @param {boolean} [input.fullscreenSupported] the browser can go fullscreen
+ *   (requestFullscreen exists); the twin is disabled otherwise, as the header
+ *   button is
+ * @param {boolean} [input.phoneLandscape] :root[data-phone-landscape], where
+ *   the header's meta line is hidden
+ * @param {{ watching?: boolean, schedules?: boolean, origin?: boolean }} [input.metaChips]
+ *   the meta line's chips the conversation has (a watching chip, a schedule
+ *   chip, an origin that opens its conversation)
  * @returns {{ trigger: { hidden: boolean, disabled: boolean }, entries: Record<string, { hidden: boolean, disabled: boolean }> }}
  */
 export function resolveChatActionsMenuState({
@@ -77,12 +142,19 @@ export function resolveChatActionsMenuState({
   editing = false,
   suspendVisible = false,
   hasActiveShare = false,
+  headerMenuIds = null,
+  fullscreenSupported = true,
+  phoneLandscape = false,
+  metaChips = null,
 } = {}) {
   const entries = {};
+  const twins = { sharedMode: !!sharedMode, headerMenuIds };
   if (sharedMode) {
     for (const id of CHAT_ACTIONS_MENU_ENTRY_IDS) entries[id] = hidden();
-    entries['chat-menu-theme-toggle'] = shown();
-    return { trigger: { hidden: false, disabled: false }, entries };
+    for (const id of CHAT_ACTIONS_MENU_TWIN_IDS) entries[id] = twinShown(id, twins) ? shown() : hidden();
+    // With Day/Night in the header there is nothing left to open.
+    const empty = !CHAT_ACTIONS_MENU_ENTRY_IDS.some((id) => !entries[id].hidden);
+    return { trigger: { hidden: empty, disabled: false }, entries };
   }
 
   const convId = String(conversationId || '').trim();
@@ -94,6 +166,14 @@ 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();
+  for (const id of CHAT_ACTIONS_MENU_TWIN_IDS) entries[id] = twinShown(id, twins) ? shown() : hidden();
+  // Offered where the browser has no fullscreen (iPhone): disabled, as its
+  // header button is, rather than a live entry that does nothing.
+  if (!entries['chat-menu-fullscreen'].hidden && !fullscreenSupported) entries['chat-menu-fullscreen'] = shown(true);
+  // The meta line's chips, standing in where that line is hidden.
+  for (const [chip, id] of Object.entries(CHAT_ACTIONS_MENU_META_CHIP_IDS)) {
+    entries[id] = hasConversation && phoneLandscape && !!metaChips?.[chip] ? shown() : hidden();
+  }
   entries['chat-menu-edit-title'] = perConversation();
   entries['chat-menu-share-conversation'] = perConversation();
   // Only a conversation with a live link has something to stop.
@@ -119,6 +199,61 @@ export function resolveChatActionsMenuState({
   };
 }
 
+/**
+ * The labels of the meta line's stand-ins: "👁 Watching 2 sessions…" (from the
+ * watching chip's text), "⏰ Schedules…", and the origin's line ("Started by
+ * an agent in “title”"). An entry with no text gets ''.
+ *
+ * @param {{ watching?: string, origin?: string }} input
+ * @returns {{ watching: string, schedules: string, origin: string }}
+ */
+export function chatActionsMenuMetaChipLabels({ watching = '', origin = '' } = {}) {
+  const watchingText = String(watching || '').trim();
+  const originText = String(origin || '').trim();
+  return {
+    watching: watchingText ? `👁 ${watchingText.charAt(0).toUpperCase()}${watchingText.slice(1)}…` : '',
+    schedules: '⏰ Schedules…',
+    origin: originText ? `↗ ${originText}` : '',
+  };
+}
+
+/**
+ * Where the open menu goes. It hangs from ︙ with its right edge on the
+ * button's; this keeps it inside `bounds` (the viewport and #main, so never
+ * off-screen and never under the sidebar) with `margin` to spare, narrows it
+ * when even that is too wide, and caps its height at what is left below its
+ * top (the menu then scrolls).
+ *
+ * @param {object} input
+ * @param {{ left: number, right: number, top: number }} input.rect the menu's box as CSS placed it
+ * @param {{ left: number, right: number, bottom: number }} input.bounds the area it must stay in
+ * @param {number} [input.margin] the gap it keeps from the bounds
+ * @param {number} [input.minHeight] the height it keeps at least
+ * @returns {{ right: number, maxWidth: number|null, maxHeight: number }}
+ *   `right`: how far to move its right edge to the left of where CSS put it
+ *   (negative: to the right); `maxWidth`: null when it fits as it is
+ */
+export function resolveChatActionsMenuPlacement({ rect, bounds, margin = 8, minHeight = 120 } = {}) {
+  const left = Number(rect?.left) || 0;
+  const right = Number(rect?.right) || 0;
+  const top = Number(rect?.top) || 0;
+  const width = Math.max(0, right - left);
+  const minLeft = (Number(bounds?.left) || 0) + margin;
+  const maxRight = (Number(bounds?.right) || 0) - margin;
+  const room = Math.max(0, maxRight - minLeft);
+  const fitWidth = Math.min(width, room);
+  let nextLeft = right - fitWidth;
+  if (nextLeft + fitWidth > maxRight) nextLeft = maxRight - fitWidth;
+  if (nextLeft < minLeft) nextLeft = minLeft;
+  const nextRight = nextLeft + fitWidth;
+  const bottom = Number(bounds?.bottom) || 0;
+  return {
+    right: Math.round((right - nextRight) * 100) / 100,
+    maxWidth: width > room ? Math.floor(room) : null,
+    maxHeight: Math.floor(Math.max(minHeight, bottom - margin - top)),
+  };
+}
+
 /** The ids of the entries a state shows, in menu order. */
 export function visibleChatActionsMenuEntryIds(state) {
   const entries = state?.entries || {};

package/server/public/app/chat-header-meta.mjs

@@ -0,0 +1,27 @@
+// The lines under the chat title (origin, relay chips, folder) come with a
+// long and a short label. On a desktop the long one shows; on a phone the
+// meta lines share one row that scrolls sideways and show the short one. CSS
+// picks (index.html, .chat-meta-long / .chat-meta-short). DOM-free.
+
+export const CHAT_META_LONG_CLASS = 'chat-meta-long';
+export const CHAT_META_SHORT_CLASS = 'chat-meta-short';
+
+/** Both labels; the arguments are HTML the caller already escaped. */
+export function chatMetaLabelHtml(longHtml, shortHtml) {
+  return `<span class="${CHAT_META_LONG_CLASS}">${longHtml}</span><span class="${CHAT_META_SHORT_CLASS}">${shortHtml}</span>`;
+}
+
+/**
+ * The last folder name of a path, for the phone's folder chip:
+ * "/home/dev/sample-repo/" → "sample-repo", "C:\\work\\api" → "api". A root
+ * ("/", "C:\\") is kept whole; '' for nothing.
+ */
+export function cwdFolderName(path) {
+  const raw = String(path ?? '').trim();
+  if (!raw) return '';
+  const trimmed = raw.replace(/[\\/]+$/, '');
+  if (!trimmed) return raw.slice(0, 1);
+  if (/^[A-Za-z]:$/.test(trimmed)) return raw;
+  const parts = trimmed.split(/[\\/]+/).filter(Boolean);
+  return parts.length ? parts[parts.length - 1] : raw;
+}

package/server/public/app/claude-billing-toggle-ui.js

@@ -1,5 +1,6 @@
 // The composer's billing toggle (claude-billing-toggle.mjs) on the page: a
-// row above the composer, under the lock note, in Claude SDK chats. A press
+// field of the ⚙ panel, under Model, in Claude SDK chats; the label row's
+// billing pill (composer-settings-ui.js) shows its selected side. A press
 // moves the open chat between the subscription and the saved API key through
 // the relay's billing route; the relay's answer and its `conversation_billing`
 // events (usage-limit-ui.js keeps them per chat) redraw it.

package/server/public/app/claude-cloud-conversation-ui.js

@@ -7,7 +7,7 @@
 // and the server's `cloud` payload field), so the one sync function below is
 // idempotent and is simply called whenever the header is synced. A
 // conversation of any other provider gets every element back exactly as it was.
-// The ⋯ menu is not touched here: its entries are decided in one place
+// The ︙ menu is not touched here: its entries are decided in one place
 // (chat-actions-menu-state.mjs), which reads the cloud state through
 // isCurrentConversationClaudeCloud() and currentCloudSessionUrl().
 
@@ -57,7 +57,7 @@ export function syncClaudeCloudConversationUi() {
     line.hidden = !lineHtml;
   }
 
-  // The ⋯ menu entries (no Change CWD for a cloud chat, Open on claude.ai once
+  // The ︙ menu entries (no Change CWD for a cloud chat, Open on claude.ai once
   // there is a link) are decided with the rest of the menu in
   // chat-actions-menu-state.mjs, from `isCloud` and currentCloudSessionUrl().
 

package/server/public/app/composer-settings-label.mjs

@@ -0,0 +1,90 @@
+// The composer's settings label ("🔒 Opus 5.5 · high · Auto · 1M") and
+// its billing pill. Pure and DOM-free: composer-settings-ui.js reads the
+// selects' shown option texts and hands them in.
+
+export const COMPOSER_LABEL_SEPARATOR = ' · ';
+export const COMPOSER_LOCK_GLYPH = '🔒';
+
+// The effort select's placeholder when a model has no effort choice.
+const UNAVAILABLE_EFFORT = 'unavailable';
+
+// Values of the context-window select that are its default: the model's base
+// window, or "auto" when the select is the image-size picker.
+const DEFAULT_TIER_VALUES = new Set(['', 'default', 'auto']);
+
+// Mode names the label shortens; the panel's select keeps the full name.
+const SHORT_MODE_NAMES = new Map([['autopilot', 'Auto']]);
+
+function clean(value) {
+  return String(value ?? '').replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * The label's parts, in order: model, effort, mode, context window.
+ * Each is `{ field, text }`; `field` names the panel field a tap on it opens
+ * ('model' | 'effort' | 'mode' | 'tier'). The model part carries `locked`.
+ *
+ * - `cloud`: a cloud chat has no mode, effort or context window.
+ * - an effort with no value or "Unavailable" is left out.
+ * - the context window shows only when it is not the default.
+ * - a hidden field (`hidden.mode` etc.) is left out.
+ */
+export function composerSettingsLabelParts({
+  model = '',
+  locked = false,
+  effort = '',
+  effortValue = undefined,
+  mode = '',
+  tier = '',
+  tierValue = '',
+  cloud = false,
+  hidden = {},
+} = {}) {
+  const parts = [];
+  const modelText = clean(model);
+  if (modelText && !hidden.model) {
+    parts.push({ field: 'model', text: modelText, locked: locked === true });
+  }
+  if (!cloud && !hidden.effort) {
+    const effortText = clean(effort);
+    const effortEmpty = effortValue !== undefined && clean(effortValue) === '';
+    if (effortText && !effortEmpty && effortText.toLowerCase() !== UNAVAILABLE_EFFORT) {
+      parts.push({ field: 'effort', text: effortText });
+    }
+  }
+  if (!cloud && !hidden.mode) {
+    const modeText = clean(mode);
+    if (modeText) parts.push({ field: 'mode', text: SHORT_MODE_NAMES.get(modeText.toLowerCase()) || modeText });
+  }
+  if (!cloud && !hidden.tier) {
+    const tierText = clean(tier);
+    const value = clean(tierValue).toLowerCase();
+    if (tierText && !DEFAULT_TIER_VALUES.has(value)) parts.push({ field: 'tier', text: tierText });
+  }
+  return parts;
+}
+
+/** A part as it reads in the label: the model gets the lock in front. */
+export function composerSettingsPartText(part) {
+  if (!part) return '';
+  return part.field === 'model' && part.locked ? `${COMPOSER_LOCK_GLYPH} ${part.text}` : part.text;
+}
+
+/** The whole label as one string, e.g. "🔒 Opus 5.5 · high · Autopilot · 1M". */
+export function composerSettingsLabelText(input = {}) {
+  const parts = Array.isArray(input) ? input : composerSettingsLabelParts(input);
+  return parts.map(composerSettingsPartText).filter(Boolean).join(COMPOSER_LABEL_SEPARATOR);
+}
+
+/**
+ * The billing pill beside the label, from the billing toggle's state:
+ * `{ visible, billing, text }`. Hidden when the toggle is hidden or says
+ * no billing.
+ */
+export function composerBillingPill({ toggleVisible = false, billing = '' } = {}) {
+  const value = clean(billing).toLowerCase();
+  if (!toggleVisible || (value !== 'claude' && value !== 'claude-api')) {
+    return { visible: false, billing: '', text: '' };
+  }
+  return { visible: true, billing: value, text: value === 'claude-api' ? 'API key' : 'Subscription' };
+}