@oar-sh/oar 0.9.2 → 0.9.4

package/server/public/index.html

@@ -210,6 +210,13 @@
     document.documentElement.style.setProperty('--font-scale', String(value));
     document.documentElement.style.setProperty('--font-scale-percent', `${Math.round(value * 100)}%`);
   })();
+  // Mirrored by syncScreenShortSide in app/store.js.
+  (function applyScreenShortSideEarly() {
+    const shortSide = Math.min(Number(screen.width) || 0, Number(screen.height) || 0);
+    if (!shortSide) return;
+    document.documentElement.style.setProperty('--screen-short-side', `${shortSide}px`);
+    document.documentElement.toggleAttribute('data-phone-screen', shortSide <= 500);
+  })();
 </script>
 <style>
   * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -318,6 +325,20 @@
 
   html {
     font-size: var(--font-scale-percent, 100%);
+    /* Mobile browsers otherwise inflate text on rotation. */
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+  /* A rotated phone must keep its portrait text size. Portrait scales with
+     the width (3.4vw, phone rule below), which is the screen's short side;
+     landscape uses that short side directly. No viewport unit or height
+     works here: with interactive-widget=resizes-content the on-screen
+     keyboard shrinks the viewport, and would shrink the text with it (and
+     make a portrait phone match this landscape query mid-typing). :root
+     outranks the later width-based html rule, which a narrow phone still
+     matches in landscape. */
+  @media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
+    :root[data-phone-screen] { font-size: calc(clamp(12px, calc(var(--screen-short-side) * 0.034), 14px) * var(--font-scale, 1)); }
   }
   html, body {
     height: 100%;
@@ -508,6 +529,65 @@
     box-shadow: 0 0 0 1px rgba(210, 153, 34, 0.42), 0 0 8px rgba(210, 153, 34, 0.35);
   }
 
+  #conv-filter-row {
+    position: relative;
+    padding: 10px 16px;
+  }
+  #conv-filter-input {
+    width: 100%;
+    box-sizing: border-box;
+    height: 36px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg2);
+    color: var(--text);
+    padding: 0 38px 0 10px;
+    font-size: var(--fs-meta-md);
+  }
+  /* iOS Safari zooms the page on focus for inputs under 16px, and the mobile
+     root font is 12-14px, so 1rem alone is not enough. */
+  @media (pointer: coarse), (max-width: 680px) {
+    #conv-filter-input { font-size: max(16px, 1rem); }
+  }
+  #conv-filter-input:focus {
+    outline: none;
+    border-color: var(--accent);
+  }
+  #conv-filter-clear {
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    transform: translateY(-50%);
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--muted);
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 1;
+    padding: 0;
+  }
+  #conv-filter-clear:hover { color: var(--text); background: var(--bg3); }
+  /* The display rule above outranks the UA [hidden] rule, same trap as the
+     other [hidden] overrides in this file. */
+  #conv-filter-clear[hidden] { display: none; }
+  #conv-filter-status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   #new-conv-btn {
     margin: 0; padding: 10px 14px; background: var(--accent); color: #000;
     border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: var(--fs-meta-md);
@@ -1408,14 +1488,58 @@
     width: 100%; max-width: 100%; box-sizing: border-box;
     min-width: 0;
   }
+  /* Sticky inside the scroller: Stop on the live bubble is the only way to
+     stop a turn, and a long turn must stay stoppable without scrolling back
+     up. It sticks within its own bubble only, so it never rides over the
+     messages steered in below it. The bubble's background keeps streamed
+     text from showing through; `top` cancels #messages' padding-top (sticky
+     insets start at the padding edge), so nothing scrolls visibly above it. */
   .thinking-bubble-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 4px;
+    position: sticky;
+    top: -20px;
+    z-index: 2;
+    background: var(--bot-bg);
+    padding: 4px 0;
   }
   .thinking-bubble-header:empty { display: none; margin-bottom: 0; }
+  /* Follow buttons (thinking-follow.js): 💭 thoughts, 📃 answer, 🛠️ tools.
+     Chips on the right of the header, Stop stays left; the armed one gets
+     the accent ring. */
+  .thinking-follow-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+    margin-left: auto; /* right edge even when there is no Stop button */
+  }
+  .thinking-follow-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 30px;
+    height: 26px;
+    padding: 0 6px;
+    font-size: var(--fs-meta-md);
+    line-height: 1;
+    color: var(--muted);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
+  }
+  .thinking-follow-btn:hover { background: rgba(127, 127, 127, 0.12); }
+  .thinking-follow-btn.active,
+  .thinking-follow-btn[aria-pressed="true"] {
+    color: var(--accent);
+    border-color: var(--accent);
+    background: color-mix(in srgb, var(--accent) 16%, transparent);
+  }
   .bubble-action-btn {
     display: inline-flex;
     align-items: center;
@@ -2239,6 +2363,61 @@
     pointer-events: none;
   }
   #relay-toast.visible { display: block; }
+  #relay-toast.has-action { pointer-events: auto; }
+  .relay-toast-action {
+    margin-left: 10px;
+    border: 1px solid var(--warn);
+    background: transparent;
+    color: var(--warn);
+    border-radius: 999px;
+    padding: 4px 12px;
+    font-size: var(--fs-meta-sm);
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .relay-toast-action:hover { background: rgba(210, 153, 34, 0.2); }
+  /* Persistent app-wide banner for a queued host suspend / relay restart
+     (host-suspend-ui.js). Same look as the toast, one row per pending action,
+     sits just below the toast so both stay readable; takes pointer input for
+     its Cancel buttons. */
+  #pending-action-banner {
+    display: none;
+    position: fixed;
+    top: calc(var(--header-safe-top, 0px) + 10px);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 12590;
+    max-width: min(640px, calc(100vw - 24px));
+    background: var(--bg2);
+    background: color-mix(in srgb, var(--warn) 14%, var(--bg2));
+    border: 1px solid var(--warn);
+    color: var(--warn);
+    border-radius: 10px;
+    padding: 6px 12px;
+    font-size: var(--fs-meta-sm);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+    pointer-events: auto;
+  }
+  #pending-action-banner.visible { display: flex; flex-direction: column; gap: 4px; }
+  #relay-toast.visible ~ #app #pending-action-banner,
+  #relay-toast.visible + #pending-action-banner { top: calc(var(--header-safe-top, 0px) + 56px); }
+  .pending-action-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    text-align: center;
+  }
+  .pending-action-text { overflow-wrap: anywhere; }
+  .pending-action-cancel { margin-left: 0; }
+  .suspend-host-blockers {
+    margin: 6px 0 10px;
+    padding-left: 20px;
+    color: var(--text);
+    font-size: var(--fs-meta-md);
+  }
+  .suspend-host-blockers li { margin: 2px 0; overflow-wrap: anywhere; }
   #model-metadata-blocker {
     display: none;
     align-items: center;
@@ -2337,8 +2516,11 @@
     gap: 6px;
   }
   /* Slash-command autocompletion: same composer-anchored overlay as the emoji
-     popup, but list-shaped. Row highlight follows the arrow keys only. */
-  #slash-autocomplete-popup {
+     popup, but list-shaped. Row highlight follows the arrow keys only. The
+     @relay mention popup (mention-autocomplete.mjs) is its twin; the two are
+     never open at once. */
+  #slash-autocomplete-popup,
+  #mention-autocomplete-popup {
     display: none;
     position: absolute;
     left: 16px;
@@ -2353,7 +2535,9 @@
     box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
     z-index: 30;
   }
-  #slash-autocomplete-popup.visible { display: block; }
+  #slash-autocomplete-popup.visible,
+  #mention-autocomplete-popup.visible { display: block; }
+  .mention-item { align-items: center; }
   .slash-item {
     display: flex; align-items: baseline; gap: 10px;
     padding: 6px 8px; border-radius: 8px; cursor: pointer;
@@ -2365,7 +2549,8 @@
   .slash-item-hint { cursor: default; }
   .slash-item-hint:hover { background: transparent; }
   .slash-item-hint .slash-item-name { color: var(--muted); }
-  body.shared-reader-mode #slash-autocomplete-popup { display: none; }
+  body.shared-reader-mode #slash-autocomplete-popup,
+  body.shared-reader-mode #mention-autocomplete-popup { display: none; }
   #emoji-popup.visible {
     display: grid;
   }
@@ -2439,6 +2624,16 @@
      (badge above tokens/elapsed/Stop) so the badge cannot float mid-row when
      the wrapped description spans two lines. */
   .bg-task-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
+  .bg-task-side-head { display: flex; align-items: center; gap: 8px; }
+  .bg-task-model { color: var(--text); font-size: var(--fs-meta-sm); white-space: nowrap; }
+  /* Many tasks or previews must not push the composer off-screen: both lists
+     scroll together inside the panel while the summary line stays put. The dvh term keeps the whole
+     composer on screen in phone landscape, where 45vh alone left the input
+     row clipped below the fold (header + the rest of the composer take ~296px). */
+  #background-panel-body {
+    max-height: clamp(64px, calc(100dvh - 296px), min(45vh, 420px));
+    overflow-y: auto; overscroll-behavior: contain;
+  }
   .bg-task-side-status { display: flex; align-items: center; gap: 10px; }
   /* Mobile readability: bounded wrapping instead of single-line ellipsis.
      Long text clamps to two lines so the tail (the part that distinguishes
@@ -2454,6 +2649,19 @@
     background: var(--bg3); white-space: nowrap;
   }
   .bg-task-detail { color: var(--muted); font-size: var(--fs-meta-sm); }
+  /* A live tool call is one line cropped to the row: the command's head is
+     what identifies it, and wrapping would make rows jump on every call. */
+  .bg-task-detail.bg-task-toolcall {
+    display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
+  }
+  /* A phone row is too narrow for one line to say anything; two clamped lines
+     fit beside the side column's height anyway. */
+  @media (max-width: 680px) {
+    .bg-task-detail.bg-task-toolcall {
+      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+      white-space: normal; overflow-wrap: anywhere;
+    }
+  }
   .bg-task-tokens { color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
   .bg-task-elapsed { color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
   .bg-task-stop {
@@ -2492,6 +2700,68 @@
   .preview-close:hover:not(:disabled) { border-color: #f85149; color: #f85149; }
   .preview-close:disabled { opacity: 0.5; cursor: default; }
   #settings-previews-empty { color: var(--muted); font-size: var(--fs-meta-sm); }
+  /* Remote relays (Settings → Relays, the @mention popup): a health dot —
+     online green, unreachable/refused red, never checked grey. */
+  .remote-relay-dot {
+    width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0;
+    background: var(--relay-tone-offline);
+  }
+  .remote-relay-dot[data-status="online"] { background: var(--relay-tone-online); }
+  .remote-relay-dot[data-status="offline"],
+  .remote-relay-dot[data-status="unauthorized"],
+  .remote-relay-dot[data-status="error"] { background: #f85149; }
+  #remote-relays-list { width: 100%; }
+  .remote-relay-tag {
+    border: 1px solid var(--border); border-radius: 999px; padding: 0 7px;
+    font-size: var(--fs-meta-sm); color: var(--muted); background: var(--bg3); white-space: nowrap;
+  }
+  .remote-relay-error { color: #f85149; overflow-wrap: anywhere; }
+  .remote-relay-http-warning { color: var(--warn); opacity: 1; }
+  label.remote-relay-permission { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta-sm); color: var(--muted); font-weight: normal; }
+  .remote-relay-permission select {
+    background: var(--bg); color: var(--text); border: 1px solid var(--border);
+    border-radius: 6px; padding: 2px 6px; font-size: var(--fs-meta-sm);
+  }
+  .remote-relays-self-name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+  .remote-relays-self-name { font-family: var(--mono, monospace); color: var(--text); }
+  #remote-relays-public-url-input,
+  #remote-relays-add-url-input,
+  #remote-relays-add-token-input {
+    background: var(--bg); color: var(--text); border: 1px solid var(--border);
+    border-radius: 6px; padding: 6px 12px; outline: none; font-size: var(--fs-meta-md);
+    width: min(420px, 100%); box-sizing: border-box;
+  }
+  .remote-relays-add-token-row { display: flex; flex-direction: column; gap: 6px; width: 100%; }
+  .remote-relays-add-token-row[hidden] { display: none; }
+  .remote-relays-add-token-row label { font-weight: normal; color: var(--muted); font-size: var(--fs-meta-sm); }
+  .remote-relays-link-btn {
+    background: none; border: none; padding: 0; cursor: pointer;
+    color: var(--accent); font-size: var(--fs-meta-sm); text-decoration: underline;
+  }
+  .remote-relays-link-btn[hidden] { display: none; }
+  .settings-row label.remote-relays-pair-back { display: flex; align-items: center; gap: 8px; font-weight: normal; }
+  #remote-relays-add-status[data-state="working"] { color: var(--muted); }
+  #remote-relays-add-status[data-state="added"],
+  #remote-relays-add-status[data-state="paired"] { color: #3fb950; }
+  #remote-relays-add-status[data-state="pair-failed"],
+  #remote-relays-add-status[data-state="needs-token"] { color: var(--warn); }
+  #remote-relays-add-status[data-state="self"],
+  #remote-relays-add-status[data-state="error"] { color: #f85149; }
+  /* Provenance of a prompt another relay's agent sent (remote-relay-origin-view.mjs). */
+  .msg-origin { margin-bottom: 6px; max-width: 100%; }
+  .msg-origin-badge {
+    display: inline-block; max-width: 100%; box-sizing: border-box;
+    padding: 1px 8px; border-radius: 999px; font-size: var(--fs-meta-sm); line-height: 1.5;
+    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
+    background: color-mix(in srgb, currentColor 12%, transparent);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .msg.user .msg-bubble a.msg-origin-badge { text-decoration: none; }
+  .msg.user .msg-bubble a.msg-origin-badge:hover { text-decoration: underline; }
+  .conv-origin-marker {
+    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    color: var(--muted); font-size: var(--fs-ui-chip);
+  }
   /* Transcript card: a preview published during this turn, pinned into the
      response bubble. Compact single row; closed previews keep the label but
      lose the dead link. */
@@ -2535,6 +2805,30 @@
     background: rgba(63, 185, 80, 0.12); color: var(--relay-tone-online);
     border-radius: 6px; padding: 0 6px; font-size: var(--fs-meta-sm);
   }
+  /* Mid-turn steering. The CLI usually FOLDS a steered message into the
+     running turn and answers everything with one reply; the steered row then
+     settles as a compact marker under its own message (kind='folded'). More
+     rarely the turn is handed off: the interrupted reply settles as
+     kind='absorbed' and the steered message carries the continuing reply. A
+     steer cut off by Stop settles as kind='stopped' with a Resend button.
+     Markers are notes, not answers, so they render muted and compact.
+     steered-turn-merge.mjs adds the adjacency classes. */
+  .msg.assistant.msg-absorbed .msg-bubble,
+  .msg.assistant.msg-folded .msg-bubble,
+  .msg.assistant.msg-steer-stopped .msg-bubble {
+    font-size: var(--fs-meta-md); color: var(--muted); font-style: italic;
+    padding: 6px 12px; opacity: 0.85;
+  }
+  .msg.assistant.msg-absorbed { margin-top: -4px; }
+  /* Attached to the steered message above it (the transcript gap is 12px). */
+  .msg.assistant.msg-folded,
+  .msg.assistant.msg-steer-stopped { margin-top: -8px; }
+  .msg.assistant.msg-folded .msg-label,
+  .msg.assistant.msg-steer-stopped .msg-label { display: none; }
+  .msg.assistant.msg-steer-stopped .msg-bubble-actions { font-style: normal; }
+  .msg.user.msg-steered .msg-bubble { border-style: dashed; }
+  .msg.user.msg-steered .msg-label::after { content: ' · steered mid-turn'; }
+  .msg.assistant.msg-steered-continuation { margin-top: -2px; }
   body.shared-reader-mode #background-tasks-panel { display: none; }
   #model-pricing-details {
     display: none; margin-top: 6px; color: var(--muted); font-size: var(--fs-meta-sm);
@@ -4197,6 +4491,43 @@
     color: #000;
     font-weight: 700;
   }
+  /* Multi-select cards: the same pills, with a checkmark instead of one-shot
+     buttons, so several answers can be ticked before one Reply. */
+  .relay-question-choice-check {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    user-select: none;
+  }
+  .relay-question-choice-check input[type="checkbox"] {
+    margin: 0;
+    width: 16px;
+    height: 16px;
+    accent-color: var(--accent);
+    cursor: pointer;
+  }
+  .relay-question-choice-check:has(input:checked) {
+    border-color: var(--accent);
+    background: rgba(88, 166, 255, 0.12);
+  }
+  /* The "Select several" switch on Copilot choice cards. */
+  .relay-question-multi-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 8px;
+    font-size: var(--fs-meta-sm);
+    color: var(--muted, var(--text));
+    cursor: pointer;
+    user-select: none;
+  }
+  .relay-question-multi-toggle input[type="checkbox"] {
+    margin: 0;
+    width: 16px;
+    height: 16px;
+    accent-color: var(--accent);
+    cursor: pointer;
+  }
   .relay-question-reply {
     display: flex;
     gap: 8px;
@@ -4397,10 +4728,12 @@
       font-size: var(--fs-meta-md);
       min-height: 36px;
     }
-    .thinking-bubble-header { margin-bottom: 6px; }
+    .thinking-bubble-header { margin-bottom: 6px; top: -12px; }
     .sidebar-header { padding: var(--sidebar-header-top-pad-mobile) 12px 12px; gap: 8px; }
     #new-conv-btn { padding: 9px 12px; border-radius: 8px; font-size: var(--fs-meta-md); }
     #status-btn { min-width: 72px; padding: 9px 10px; font-size: var(--fs-meta-md); }
+    #conv-filter-row { padding: 8px 12px; }
+    #conv-filter-clear { right: 16px; }
     #conv-list { padding: 0 5px 8px; }
     .conv-item { padding: 6px 11px; border-radius: 8px; }
     .conv-title {
@@ -4916,6 +5249,7 @@
 <div id="chat-actions-menu-backdrop" onclick="window.closeChatActionsMenu && window.closeChatActionsMenu()"></div>
 <div id="font-scale-indicator" aria-live="polite" aria-atomic="true" hidden>100%</div>
 <div id="relay-toast" role="status" aria-live="polite"></div>
+<div id="pending-action-banner" role="status" aria-live="polite" hidden></div>
 
 <!-- Main App -->
   <div id="app">
@@ -4928,6 +5262,11 @@
         <button id="install-btn" class="header-icon-btn" onclick="promptInstallApp()" title="Install app to home screen" aria-label="Install app">⬇</button>
       </div>
     </div>
+    <div id="conv-filter-row">
+      <input id="conv-filter-input" type="text" placeholder="Filter conversations…" autocomplete="off" spellcheck="false" aria-label="Filter conversations by title">
+      <button id="conv-filter-clear" type="button" title="Clear filter" aria-label="Clear filter" hidden>×</button>
+      <div id="conv-filter-status" role="status" aria-live="polite"></div>
+    </div>
     <div id="conv-list"></div>
   </div>
   <div id="sidebar-resizer" role="separator" aria-orientation="vertical" aria-label="Resize conversations sidebar"></div>
@@ -4991,15 +5330,18 @@
       <div id="image-edit-target" aria-live="polite"></div>
       <div id="emoji-popup" aria-hidden="true"></div>
       <div id="slash-autocomplete-popup" aria-hidden="true" role="listbox"></div>
+      <div id="mention-autocomplete-popup" aria-hidden="true" role="listbox" aria-label="Remote relays"></div>
       <details id="background-tasks-panel" hidden>
         <summary id="background-tasks-summary"></summary>
-        <div id="background-previews-list"></div>
-        <div id="background-tasks-list"></div>
+        <div id="background-panel-body">
+          <div id="background-previews-list"></div>
+          <div id="background-tasks-list"></div>
+        </div>
       </details>
       <div class="input-row">
         <input id="image-input" type="file" multiple hidden onchange="handleAttachmentInput(this.files); this.value='';">
         <button id="emoji-btn" onclick="toggleEmojiPicker()" title="Emoji picker (Tip: Win + .)">🙂</button>
-        <textarea id="msg-input" placeholder="Message Copilot…" rows="1" onkeydown="handleKey(event)" oninput="autoResize(this); updateComposerSlashMenu(this)"></textarea>
+        <textarea id="msg-input" placeholder="Message Copilot…" rows="1" aria-autocomplete="list" onkeydown="handleKey(event)" oninput="autoResize(this); updateComposerSlashMenu(this)"></textarea>
         <select id="mode-select" title="Mode">
           <option value="agent" selected>Agent</option>
           <option value="ask">Ask</option>
@@ -5136,6 +5478,16 @@
         tabindex="-1"
         data-settings-tab="providers"
       >Providers</button>
+      <button
+        id="settings-tab-relays"
+        class="settings-tab"
+        type="button"
+        role="tab"
+        aria-selected="false"
+        aria-controls="settings-panel-relays"
+        tabindex="-1"
+        data-settings-tab="relays"
+      >Relays</button>
       <button
         id="settings-tab-previews"
         class="settings-tab"
@@ -5214,20 +5566,20 @@
         </div>
         <div class="settings-help" style="margin-top: 6px;">A hard cap on how long one turn may run before the relay requeues it. Turns are already kept alive by worker heartbeats, and a turn waiting on your answer to a question is never cut off — so this only catches a worker that has hung. Set to 0 for no limit.</div>
         <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
-          <label for="background-task-timeout-slider">Background task timeout <span id="background-task-timeout-value">No limit</span></label>
+          <label for="background-task-timeout-slider">Background task timeout <span id="background-task-timeout-value">4 h</span></label>
           <input
             id="background-task-timeout-slider"
             type="range"
             min="0"
             max="600"
             step="5"
-            value="0"
+            value="240"
             aria-label="Background task timeout in minutes"
             oninput="previewBackgroundTaskTimeoutSetting(this.value)"
             onchange="updateBackgroundTaskTimeoutSetting(this.value)"
           >
         </div>
-        <div class="settings-help" style="margin-top: 6px;">How long background tasks (backgrounded commands, subagents, monitors) may keep a Claude session's CLI process alive after its turn ends. When the limit is reached the tasks are stopped and the agent reports what they left behind. Set to 0 for no limit — tasks then run until they finish or you stop them from the composer panel.</div>
+        <div class="settings-help" style="margin-top: 6px;">How long background tasks may keep a session alive after its turn ends: backgrounded commands, subagents and monitors on Claude; background agents and detached shells on Copilot's SDK engine. When the limit is reached the tasks are stopped. Set to 0 for no limit — tasks then run until they finish or you stop them from the composer panel.</div>
         <div id="windows-autostart-setting" hidden>
           <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
             <label>Autostart (Windows)</label>
@@ -5251,16 +5603,16 @@
           </div>
         </div>
         <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
-          <label for="pwa-app-name-input">Install app name</label>
+          <label for="pwa-app-name-input">Relay name</label>
           <input
             id="pwa-app-name-input"
             type="text"
             maxlength="60"
             placeholder="OAR"
-            aria-label="Install app name"
+            aria-label="Relay name"
             onchange="updatePwaAppName(this.value)"
           >
-          <div class="settings-help">Used for the installed PWA app label on every device connecting to this relay. On Android, a rename reaches an already-installed app after a short delay, with one confirmation prompt showing the new name.</div>
+          <div class="settings-help">Shown to other relays and used as the installed app's name. On Android, a rename reaches an already-installed app after a short delay, with one confirmation prompt showing the new name.</div>
         </div>
         <div class="settings-row" style="margin-top: 12px; margin-bottom: 0;">
           <label for="update-auto-check-toggle">Check for updates automatically</label>
@@ -5402,14 +5754,14 @@
           <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
             <label for="copilot-engine-select">Copilot engine</label>
             <select id="copilot-engine-select" aria-label="Copilot engine">
-              <option value="extension">Extension — current</option>
-              <option value="sdk">SDK — experimental</option>
+              <option value="extension">Extension</option>
+              <option value="sdk">SDK — default</option>
             </select>
             <div id="copilot-settings-status" class="settings-help settings-provider-status">Loading Copilot settings…</div>
             <div style="display: flex; gap: 8px; margin-top: 8px;">
               <button id="copilot-save-btn" type="button" class="summary-btn" onclick="saveCopilotSettings()">Save Copilot settings</button>
             </div>
-            <div class="settings-help">Chooses how GitHub Copilot conversations run. <strong>Extension</strong> is the current default: the Copilot CLI in a terminal session, which you can attach to with the tmux inspector. <strong>SDK</strong> is experimental and headless — no CLI extension to install, but no tmux inspector for those sessions. Applies to newly started conversations; sessions already running keep their engine until their worker restarts.</div>
+            <div class="settings-help">Chooses how GitHub Copilot conversations run. <strong>SDK</strong> is the default: a headless worker per conversation with mid-turn steering and background task cards — no CLI extension to install, but no tmux inspector for those sessions. <strong>Extension</strong> runs the Copilot CLI in a terminal session, which you can attach to with the tmux inspector. A relay that cannot run the SDK engine uses Extension. Applies to newly started conversations; sessions already running keep their engine until their worker restarts.</div>
           </div>
         </div>
         <div
@@ -5752,6 +6104,96 @@
           </div>
         </div>
       </div>
+      <div
+        id="settings-panel-relays"
+        class="settings-panel"
+        role="tabpanel"
+        tabindex="0"
+        aria-labelledby="settings-tab-relays"
+        data-settings-panel="relays"
+        hidden
+      >
+        <div id="remote-relays-self-section" class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
+          <label>This relay</label>
+          <div class="remote-relays-self-name-row">
+            <span id="remote-relays-self-name" class="remote-relays-self-name">—</span>
+            <span class="settings-help">Change it under General → Relay name.</span>
+          </div>
+        </div>
+        <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
+          <label for="remote-relays-public-url-input">Public address</label>
+          <input
+            id="remote-relays-public-url-input"
+            type="url"
+            inputmode="url"
+            autocomplete="off"
+            autocapitalize="off"
+            spellcheck="false"
+            placeholder="https://…"
+            aria-label="Public address of this relay"
+            onchange="saveRemoteRelayPublicUrl(this.value)"
+          >
+          <div class="settings-help">How other relays reach this one — the address you open this relay at from another device. Needed for "Also add this relay there".</div>
+          <div id="remote-relays-self-status" class="settings-help settings-provider-status" role="status" aria-live="polite" hidden></div>
+        </div>
+        <div class="settings-row" style="margin-top: 12px; margin-bottom: 0;">
+          <label for="remote-relays-inbound-toggle">Accept prompts from other relays' agents</label>
+          <input
+            id="remote-relays-inbound-toggle"
+            type="checkbox"
+            onchange="toggleRemoteRelayInbound(this.checked)"
+            aria-label="Accept prompts from other relays' agents"
+            checked
+          >
+        </div>
+        <div class="settings-help" style="margin-top: 6px;">When off, agents on paired relays can still read sessions here, but cannot send prompts, start sessions, answer questions or stop turns. The relay token stays the real boundary: anyone holding it has full access.</div>
+        <div id="remote-relays-list-section" class="settings-row settings-row-column" style="margin-top: 16px; margin-bottom: 0;">
+          <label>Remote relays</label>
+          <div id="remote-relays-list"></div>
+          <div id="remote-relays-empty" class="settings-help">Loading remote relays…</div>
+          <div id="remote-relays-status" class="settings-help settings-provider-status" role="status" aria-live="polite" hidden></div>
+          <div class="settings-help">Agents in any session here can work on these relays once you mention one in the conversation (for example <code>@name</code>). "Agents may" limits what they can do there.</div>
+        </div>
+        <div id="remote-relays-add-section" class="settings-row settings-row-column" style="margin-top: 16px; margin-bottom: 0;">
+          <label for="remote-relays-add-url-input">Add a relay</label>
+          <input
+            id="remote-relays-add-url-input"
+            type="url"
+            inputmode="url"
+            autocomplete="off"
+            autocapitalize="off"
+            spellcheck="false"
+            placeholder="Paste the other relay's web address"
+            aria-label="Paste the other relay's web address"
+            onkeydown="if (event.key === 'Enter') { event.preventDefault(); addRemoteRelayFromForm(); }"
+          >
+          <div id="remote-relays-add-token-row" class="remote-relays-add-token-row" hidden>
+            <label for="remote-relays-add-token-input">Token of the other relay</label>
+            <input
+              id="remote-relays-add-token-input"
+              type="password"
+              autocomplete="off"
+              autocapitalize="off"
+              spellcheck="false"
+              placeholder="Only needed when it differs from this relay's token"
+              aria-label="Token of the other relay"
+              onkeydown="if (event.key === 'Enter') { event.preventDefault(); addRemoteRelayFromForm(); }"
+            >
+          </div>
+          <button id="remote-relays-use-token-btn" class="remote-relays-link-btn" type="button" onclick="showRemoteRelayTokenField()">Use a different token</button>
+          <label class="remote-relays-pair-back">
+            <input id="remote-relays-pair-back-toggle" type="checkbox" checked>
+            Also add this relay there
+          </label>
+          <div id="remote-relays-pair-back-hint" class="settings-help">
+            The other relay gets this relay's public address and, if it uses a different token, this
+            relay's token too: its agents can then work here. Removing a relay here does not revoke
+            that; rotate this relay's token to lock it out.
+          </div>
+          <button id="remote-relays-add-btn" class="chat-title-action-btn" type="button" onclick="addRemoteRelayFromForm()">Add</button>
+          <div id="remote-relays-add-status" class="settings-help settings-provider-status" role="status" aria-live="polite" hidden></div>
+        </div>
+      </div>
       <div
         id="settings-panel-previews"
         class="settings-panel"
@@ -5821,6 +6263,10 @@
             <label for="push-event-cli-offline-toggle">CLI went offline</label>
             <input id="push-event-cli-offline-toggle" type="checkbox" onchange="updatePushPreferencesFromControls()" disabled>
           </div>
+          <div class="settings-row" style="width: 100%; margin-top: 6px; margin-bottom: 0;">
+            <label for="push-event-host-suspend-toggle">Host suspend fired or was dropped</label>
+            <input id="push-event-host-suspend-toggle" type="checkbox" onchange="updatePushPreferencesFromControls()" checked disabled>
+          </div>
           <label style="margin-top: 10px;">Devices</label>
           <div id="push-device-list" style="width: 100%;"></div>
           <div class="settings-help">Notifications are only sent while no device has the app in the foreground. Content defaults to generic text; message previews are opt-in per device.</div>