@oar-sh/oar 0.9.9 → 0.9.10

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

@@ -0,0 +1,116 @@
+// The header's ⋯ menu: one decision for its trigger and for every entry, with
+// or without a conversation open. No DOM here; bootstrap.js applies the result.
+//
+// The menu holds two kinds of entries. Relay-wide ones (Settings, Restart web
+// relay, Select Models, Check Usage, the queue, Day/Night, the PWA version)
+// are shown whenever the app is signed in, so Settings can be reached on a
+// fresh install, where no conversation exists yet. Per-conversation ones (Edit
+// title, Share, Archive, Inspect tmux, Change CWD, Git changes, Kill session,
+// Open on claude.ai) are hidden, not greyed, while nothing is open: an empty
+// screen offers what can be done there and nothing else.
+//
+// The 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.
+
+export const CHAT_ACTIONS_MENU_TRIGGER_ID = 'chat-actions-menu-btn';
+
+/** Entries that are text, not actions: `hidden` is applied, nothing else. */
+export const CHAT_ACTIONS_MENU_META_IDS = Object.freeze([
+  'chat-menu-pwa-version',
+  'chat-menu-queue-status',
+]);
+
+/** Every entry the resolver decides, in menu order. */
+export const CHAT_ACTIONS_MENU_ENTRY_IDS = Object.freeze([
+  'chat-menu-pwa-version',
+  'chat-menu-queue-status',
+  'chat-menu-edit-title',
+  'chat-menu-shared-theme-toggle',
+  'chat-menu-usage',
+  'chat-menu-compact',
+  'chat-menu-share-conversation',
+  'chat-menu-archive',
+  'chat-menu-refresh-history',
+  'chat-menu-inspect-tmux',
+  'chat-menu-select-models',
+  'chat-menu-change-cwd',
+  'chat-menu-git-changes',
+  'chat-menu-open-cloud-session',
+  'chat-menu-settings',
+  'chat-menu-restart-relay',
+  'chat-menu-suspend-host',
+  'chat-menu-kill-session',
+]);
+
+/** Entries that are never shown: retired actions kept in the markup. */
+const ALWAYS_HIDDEN_IDS = new Set(['chat-menu-compact', 'chat-menu-refresh-history']);
+
+const shown = (disabled = false) => ({ hidden: false, disabled: !!disabled });
+const hidden = () => ({ hidden: true, disabled: true });
+
+/**
+ * @param {object} input
+ * @param {boolean} [input.sharedMode] the shared read-only view
+ * @param {string|null} [input.conversationId] the open conversation, if any
+ * @param {object|null} [input.conversation] its record, if known
+ * @param {string|null} [input.sdkSessionId] its bound session, if any
+ * @param {boolean} [input.isCloud] it runs on Claude Cloud
+ * @param {string|null} [input.cloudSessionUrl] its claude.ai session link, if reported
+ * @param {boolean} [input.editing] its title is being edited
+ * @param {boolean} [input.suspendVisible] the "show Suspend host" setting
+ * @returns {{ trigger: { hidden: boolean, disabled: boolean }, entries: Record<string, { hidden: boolean, disabled: boolean }> }}
+ */
+export function resolveChatActionsMenuState({
+  sharedMode = false,
+  conversationId = null,
+  conversation = null,
+  sdkSessionId = null,
+  isCloud = false,
+  cloudSessionUrl = null,
+  editing = false,
+  suspendVisible = false,
+} = {}) {
+  const entries = {};
+  if (sharedMode) {
+    for (const id of CHAT_ACTIONS_MENU_ENTRY_IDS) entries[id] = hidden();
+    entries['chat-menu-shared-theme-toggle'] = shown();
+    return { trigger: { hidden: false, disabled: false }, entries };
+  }
+
+  const convId = String(conversationId || '').trim();
+  const hasConversation = !!convId;
+  const sessionId = String(sdkSessionId || conversation?.sdkSessionId || '').trim();
+  const cloud = hasConversation && !!isCloud;
+  const sessionUrl = String(cloudSessionUrl || '').trim();
+  const perConversation = () => (hasConversation ? shown() : hidden());
+
+  for (const id of CHAT_ACTIONS_MENU_ENTRY_IDS) entries[id] = shown();
+  for (const id of ALWAYS_HIDDEN_IDS) entries[id] = hidden();
+  entries['chat-menu-shared-theme-toggle'] = hidden();
+  entries['chat-menu-edit-title'] = perConversation();
+  entries['chat-menu-share-conversation'] = perConversation();
+  entries['chat-menu-archive'] = perConversation();
+  entries['chat-menu-inspect-tmux'] = perConversation();
+  entries['chat-menu-git-changes'] = perConversation();
+  // A cloud session has no working directory on the relay host to change.
+  entries['chat-menu-change-cwd'] = hasConversation && !cloud ? shown() : hidden();
+  entries['chat-menu-open-cloud-session'] = cloud && sessionUrl ? shown() : hidden();
+  entries['chat-menu-suspend-host'] = suspendVisible ? shown() : hidden();
+  // Kill needs a bound session; the entry stays visible so the user sees why
+  // it is not available (today's rule).
+  entries['chat-menu-kill-session'] = hasConversation ? shown(!sessionId) : hidden();
+
+  return {
+    // Only a title edit in progress holds the trigger; with nothing open there
+    // is no title, so the trigger can never be stuck disabled.
+    trigger: { hidden: false, disabled: hasConversation && !!editing },
+    entries,
+  };
+}
+
+/** The ids of the entries a state shows, in menu order. */
+export function visibleChatActionsMenuEntryIds(state) {
+  const entries = state?.entries || {};
+  return CHAT_ACTIONS_MENU_ENTRY_IDS.filter((id) => entries[id] && !entries[id].hidden);
+}

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

@@ -7,6 +7,9 @@
 // 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
+// (chat-actions-menu-state.mjs), which reads the cloud state through
+// isCurrentConversationClaudeCloud() and currentCloudSessionUrl().
 
 import { conversations, currentConvId, IS_SHARED_VIEW } from './store.js';
 import { openExternalNavigation } from './external-link-policy.mjs';
@@ -32,21 +35,10 @@ export function isCurrentConversationClaudeCloud() {
   return !IS_SHARED_VIEW && isClaudeCloudConversation(currentConversation());
 }
 
-// Hides an element for cloud chats and gives it back afterwards, without ever
-// un-hiding something another owner (shared view, feature gates) had hidden.
-function setHiddenForCloud(element, hide) {
-  if (!element) return;
-  if (hide) {
-    if (!element.hidden) {
-      element.hidden = true;
-      element.dataset.cloudHidden = '1';
-    }
-    return;
-  }
-  if (element.dataset.cloudHidden === '1') {
-    element.hidden = false;
-    delete element.dataset.cloudHidden;
-  }
+/** The claude.ai link of the open cloud conversation, once the worker reported one. */
+export function currentCloudSessionUrl() {
+  if (!isCurrentConversationClaudeCloud()) return null;
+  return buildCloudLineModel(currentConversation()?.cloud)?.sessionUrl || null;
 }
 
 export function syncClaudeCloudConversationUi() {
@@ -65,13 +57,9 @@ export function syncClaudeCloudConversationUi() {
     line.hidden = !lineHtml;
   }
 
-  // The session has no working directory on the relay host to change.
-  setHiddenForCloud(document.getElementById('chat-menu-change-cwd'), isCloud);
-
-  const openSessionButton = document.getElementById('chat-menu-open-cloud-session');
-  if (openSessionButton) {
-    openSessionButton.hidden = !(isCloud && buildCloudLineModel(conversation?.cloud)?.sessionUrl);
-  }
+  // 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().
 
   const fileInput = document.getElementById('image-input');
   if (fileInput) {

package/server/public/app/composer-control-state.mjs

@@ -22,6 +22,8 @@ export function hasUploadingAttachments(attachments = []) {
 // Why a message sent right now queues instead of steering — worker-reported
 // hold reasons mapped to a human title. Stopping a turn lives on the message
 // bubbles, never here, so every state below is a Send/Steer/Queue shape.
+export const SETUP_REQUIRED_TEXT = 'Set up a provider to start chatting';
+
 const STEERING_HOLD_TITLES = Object.freeze({
   question: 'Will steer in after you answer the question',
   compaction: 'Will steer in once the conversation finishes compacting',
@@ -50,7 +52,21 @@ export function deriveComposerControlState({
   // An archived conversation: its worker is stopped and it is out of the
   // live list; sending would start it again behind the user's back.
   archived = false,
+  // No conversation open and no provider known to be ready (a fresh install):
+  // a send here would create a Copilot chat that cannot run. The composer is
+  // locked, with a placeholder that says what to do, until readiness flips.
+  setupRequired = false,
 } = {}) {
+  if (setupRequired) {
+    return {
+      action: 'send',
+      label: 'Send',
+      title: SETUP_REQUIRED_TEXT,
+      disabled: true,
+      composerDisabled: true,
+      placeholder: SETUP_REQUIRED_TEXT,
+    };
+  }
   if (archived) {
     return {
       action: 'send',

package/server/public/app/composer-keyboard.mjs

@@ -0,0 +1,54 @@
+// When the composer may hold the focus without raising a phone's on-screen
+// keyboard, without the DOM. A focused text field shows no keyboard until the
+// user touches the page; the next tap anywhere that keeps the focus there
+// brings it up. So a phone gets no focus at page load, and a tap that only
+// scrolls (the transcript's ⌄) keeps the focus only while the keyboard is
+// already up.
+//
+// Whether the keyboard is up is read from the visual viewport: with it open
+// the visible area is a keyboard's height shorter than the tallest it has been
+// at the same width. Android shrinks the layout with it
+// (interactive-widget=resizes-content), iOS only the visual viewport; both
+// show here. A rotation changes the width, so each width has its own tallest.
+
+/** A visible area this much shorter than its tallest has a keyboard under it. */
+export const KEYBOARD_MIN_SHRINK_PX = 100;
+export const KEYBOARD_MIN_SHRINK_RATIO = 0.15;
+
+/** The tallest visible height seen at each layout width. */
+export function createViewportBaseline() {
+  const tallestByWidth = new Map();
+  return {
+    note(width, height) {
+      const key = Math.round(Number(width) || 0);
+      const value = Math.max(0, Number(height) || 0);
+      const tallest = Math.max(tallestByWidth.get(key) || 0, value);
+      tallestByWidth.set(key, tallest);
+      return tallest;
+    },
+  };
+}
+
+export function isOnScreenKeyboardOpen({ editableFocused = false, visibleHeight = 0, tallestHeight = 0 } = {}) {
+  if (!editableFocused) return false;
+  const visible = Number(visibleHeight) || 0;
+  const tallest = Number(tallestHeight) || 0;
+  if (!(visible > 0) || !(tallest > 0)) return false;
+  const shrink = tallest - visible;
+  return shrink >= Math.max(KEYBOARD_MIN_SHRINK_PX, tallest * KEYBOARD_MIN_SHRINK_RATIO);
+}
+
+/**
+ * Whether a press on the ⌄ button keeps the focus where it is. A mouse raises
+ * no keyboard, so the composer keeps it as it always has; a touch (or a pen,
+ * or a pointer that does not say) keeps it only while the keyboard is open.
+ */
+export function shouldHoldFocusOnJump({ pointerType = '', keyboardOpen = false } = {}) {
+  if (String(pointerType || '') === 'mouse') return true;
+  return Boolean(keyboardOpen);
+}
+
+/** The composer takes the focus at page load on a desktop only. */
+export function shouldAutofocusComposerOnLoad({ coarsePointer = false, phoneLayout = false } = {}) {
+  return !coarsePointer && !phoneLayout;
+}