@oar-sh/oar 0.9.1 → 0.9.3

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);
@@ -1249,6 +1329,12 @@
     max-width: 100%; min-width: 0; box-sizing: border-box;
     overflow-wrap: anywhere; word-break: break-word;
   }
+  /* Inline-embedded media (markdown images by absolute path) stays inside the
+     bubble and advertises click-to-open; attachment thumbnails override below. */
+  .msg-bubble img { max-width: 100%; height: auto; cursor: zoom-in; border-radius: 8px; }
+  .msg-bubble video { max-width: 100%; height: auto; border-radius: 8px; }
+  .msg-bubble audio { max-width: 100%; }
+  .msg-bubble .msg-attachment img { cursor: pointer; border-radius: initial; }
   .msg-bubble.msg-bubble-media-only {
     display: inline-flex;
     flex-direction: column;
@@ -1402,12 +1488,23 @@
     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; }
   .bubble-action-btn {
@@ -2138,6 +2235,12 @@
     border: none; border-radius: 999px; background: rgba(0,0,0,0.65); color: var(--text);
     cursor: pointer; line-height: 22px; font-size: var(--fs-meta-md);
   }
+  .attachment-preview-annotate {
+    position: absolute; top: 4px; left: 4px; width: 22px; height: 22px;
+    border-radius: 999px; background: rgba(0,0,0,0.65);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 12px; pointer-events: none;
+  }
   .attachment-preview-status {
     position: absolute; inset: 0 0 26px 0;
     display: flex; align-items: center; justify-content: center;
@@ -2184,9 +2287,16 @@
     border-radius: 8px; padding: 8px 14px; margin-bottom: 10px; font-size: var(--fs-meta-sm); text-align: center;
   }
   #offline-banner.visible { display: block; }
+  /* Persistent composer-context banner (model catalog warnings, session
+     binding notes). Stays in normal flow with no z-index hoist: transient
+     notices that must outlive overlays render in #relay-toast instead, so
+     this banner never bleeds through modals or the sidebar. The background
+     is opaque (not alpha over whatever happens to be behind it) for the
+     same reason. */
   #model-banner {
     display: none;
-    background: rgba(210, 153, 34, 0.15);
+    background: var(--bg2);
+    background: color-mix(in srgb, var(--warn) 14%, var(--bg2));
     border: 1px solid var(--warn);
     color: var(--warn);
     border-radius: 8px;
@@ -2196,6 +2306,43 @@
     text-align: center;
   }
   #model-banner.visible { display: block; }
+  /* Transient relay notices (saves, errors, action confirmations) float as a
+     fixed toast above every overlay — the annotation editor's error paths
+     rely on being readable over its full-screen modal. pointer-events: none
+     keeps the modal beneath clickable while the toast lingers. */
+  #relay-toast {
+    display: none;
+    position: fixed;
+    top: calc(var(--header-safe-top, 0px) + 10px);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 12600;
+    max-width: min(560px, 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: 8px 12px;
+    font-size: var(--fs-meta-sm);
+    text-align: center;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+    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); }
   #model-metadata-blocker {
     display: none;
     align-items: center;
@@ -2362,7 +2509,7 @@
     border-radius: 12px; height: 46px; padding: 0 12px; font-size: var(--fs-core-control);
     min-width: 140px; outline: none;
   }
-  #context-tier-select { min-width: 70px; width: 70px; }
+  #context-tier-select { min-width: 84px; width: 84px; } /* aligned with #mode-select above it */
   #reasoning-effort-select { min-width: 0; width: auto; }
   #model-select:focus,
   #reasoning-effort-select:focus,
@@ -2396,6 +2543,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
@@ -2411,6 +2568,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 +2662,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);
@@ -2504,8 +2698,10 @@
   .model-pricing-grid b { color: var(--text); font-weight: 600; }
   #mode-select {
     background: var(--bg3); border: 1px solid var(--border); color: var(--text);
-    border-radius: 12px; height: 46px; padding: 0 12px; font-size: var(--fs-core-control);
-    min-width: 70px; width: 70px; outline: none;
+    border-radius: 12px; height: 46px; padding: 0 8px; font-size: var(--fs-core-control);
+    /* Wide enough for "Autopilot", the longest mode; the model select is the
+       flexible column and its labels are kept short (humanizeModelLabel). */
+    min-width: 84px; width: 84px; outline: none;
   }
   #mode-select:focus { border-color: var(--accent); }
   #send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
@@ -2758,6 +2954,112 @@
     margin-top: 10px;
   }
 
+  /* Annotation editor. Clones the file-preview shell, but sits above it
+     (z-index 11500) so annotating a sent image can layer over the lightbox. */
+  #image-annotate-modal {
+    position: fixed; inset: 0; z-index: 11500;
+    display: none; align-items: center; justify-content: center;
+    background: rgba(0, 0, 0, 0.78);
+    padding: 12px;
+  }
+  #image-annotate-modal.visible { display: flex; }
+  .annotate-dialog {
+    width: min(1100px, 100%);
+    height: min(92vh, 900px);
+    display: flex;
+    flex-direction: column;
+    background: var(--bg2);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    overflow: hidden;
+  }
+  .annotate-header {
+    display: flex; align-items: center; justify-content: space-between; gap: 10px;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg3);
+  }
+  .annotate-title {
+    min-width: 0;
+    font-size: var(--fs-meta-md);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .annotate-close {
+    flex: none;
+    border: 1px solid var(--border);
+    background: var(--bg2);
+    color: var(--text);
+    border-radius: 10px;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+  }
+  #annotate-stage {
+    flex: 1;
+    min-height: 0;          /* lets the stage shrink inside the dialog's height */
+    display: flex; align-items: center; justify-content: center;
+    overflow: hidden;
+    background: #0b0f14;
+    /* The editor owns every gesture: no browser panning, and a pinch at the
+       edge must not scroll the page behind the modal. */
+    touch-action: none;
+    overscroll-behavior: contain;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: crosshair;
+  }
+  #annotate-surface {
+    position: relative;
+    transform-origin: center center;
+    line-height: 0;
+  }
+  #annotate-image {
+    display: block;
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
+  #annotate-canvas {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;   /* the stage is the single gesture surface */
+  }
+  #annotate-toolbar {
+    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
+    padding: 10px 14px;
+    border-top: 1px solid var(--border);
+    background: var(--bg3);
+  }
+  .annotate-color, .annotate-width, .annotate-action {
+    display: inline-flex; align-items: center; justify-content: center;
+    min-width: 40px; height: 40px;   /* thumb-sized targets */
+    padding: 0 8px;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--bg2);
+    color: var(--text);
+    font-size: var(--fs-meta-md);
+    cursor: pointer;
+  }
+  .annotate-color { padding: 0; }
+  .annotate-color.active,
+  .annotate-width.active {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent);
+  }
+  .annotate-width-dot {
+    display: block;
+    border-radius: 50%;
+    background: var(--text);
+  }
+  .annotate-width[data-width="thin"] .annotate-width-dot { width: 5px; height: 5px; }
+  .annotate-width[data-width="medium"] .annotate-width-dot { width: 9px; height: 9px; }
+  .annotate-width[data-width="thick"] .annotate-width-dot { width: 15px; height: 15px; }
+  .annotate-action { font-size: 1.1rem; }
+  .annotate-toolbar-gap { flex: 1 1 auto; min-width: 8px; }
+  #annotate-toolbar button:disabled { opacity: 0.45; cursor: default; }
+
   #settings-modal, #summary-modal, #tmux-inspector-modal, #new-conversation-model-modal {
     position: fixed;
     inset: 0;
@@ -2775,6 +3077,8 @@
   #new-conversation-provider-select,
   #new-conversation-model-select,
   #new-conversation-reasoning-select,
+  #new-conversation-context-select,
+  #new-conversation-size-select,
   #new-conversation-cwd-select,
   #new-conversation-cwd-manual {
     width: 100%;
@@ -3657,7 +3961,7 @@
   }
   #repo-browser-modal.visible { display: flex; }
   /* CWD-pick mode is launched from the summary / new-chat modals (z 12050),
-     so the browser must stack above them; toasts stay on top at 12500. */
+     so the browser must stack above them; #relay-toast stays on top at 12600. */
   #repo-browser-modal.cwd-pick-mode { z-index: 12400; }
   .repo-cwd-pick-bar {
     display: flex;
@@ -4044,6 +4348,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;
@@ -4244,10 +4585,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 {
@@ -4762,6 +5105,7 @@
 <div id="sidebar-overlay" onclick="closeSidebar()"></div>
 <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>
 
 <!-- Main App -->
   <div id="app">
@@ -4774,6 +5118,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>
@@ -4839,8 +5188,10 @@
       <div id="slash-autocomplete-popup" aria-hidden="true" role="listbox"></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='';">
@@ -5002,6 +5353,16 @@
         tabindex="-1"
         data-settings-tab="notifications"
       >Notifications</button>
+      <button
+        id="settings-tab-features"
+        class="settings-tab"
+        type="button"
+        role="tab"
+        aria-selected="false"
+        aria-controls="settings-panel-features"
+        tabindex="-1"
+        data-settings-tab="features"
+      >Features</button>
     </div>
     <div class="summary-body" style="padding: 16px;">
       <div
@@ -5050,31 +5411,41 @@
         </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" style="margin-top: 12px; margin-bottom: 0;">
-            <label for="windows-autostart-toggle">Autostart (Windows)</label>
-            <input
-              id="windows-autostart-toggle"
-              type="checkbox"
-              onchange="updateWindowsAutostartSettingFromToggle(this.checked)"
-              aria-label="Autostart on Windows sign-in"
-            >
+          <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
+            <label>Autostart (Windows)</label>
+            <div role="radiogroup" aria-label="Windows autostart mode" style="display: flex; flex-direction: column; gap: 4px;">
+              <label style="font-weight: normal;">
+                <input type="radio" name="windows-autostart-mode" value="off" onchange="updateWindowsAutostartMode('off')"> Off
+              </label>
+              <label style="font-weight: normal;">
+                <input type="radio" name="windows-autostart-mode" value="signin" onchange="updateWindowsAutostartMode('signin')"> At sign-in — visible terminal after you log on
+              </label>
+              <label style="font-weight: normal;">
+                <input type="radio" name="windows-autostart-mode" value="boot" onchange="updateWindowsAutostartMode('boot')"> At system startup — headless, no logon needed
+              </label>
+            </div>
+          </div>
+          <div class="settings-help" style="margin-top: 6px;">System startup runs the relay as your user via a scheduled task (no password stored), reachable ~60&nbsp;s after boot before anyone signs in. Switching modes asks for one admin confirmation on the PC itself. The task's identity has no network-share credentials — local files and the tunnel are unaffected.</div>
+          <div id="windows-autostart-status" class="settings-help" style="margin-top: 6px;" hidden></div>
+          <div id="windows-autostart-manual" class="settings-help" style="margin-top: 6px;" hidden>
+            Run this from an elevated PowerShell instead:
+            <code id="windows-autostart-manual-command" style="display: block; margin-top: 4px; user-select: all;"></code>
           </div>
-          <div class="settings-help" style="margin-top: 6px;">Open a visible terminal and start only the web relay server when you sign in. A Copilot CLI host must attach separately to process turns.</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>
@@ -5086,7 +5457,42 @@
             aria-label="Install app name"
             onchange="updatePwaAppName(this.value)"
           >
-          <div class="settings-help">Used for the installed PWA app label. Some platforms may require reinstalling the app after a rename.</div>
+          <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>
+        <div class="settings-row" style="margin-top: 12px; margin-bottom: 0;">
+          <label for="update-auto-check-toggle">Check for updates automatically</label>
+          <input
+            id="update-auto-check-toggle"
+            type="checkbox"
+            onchange="updateAutoCheckSetting(this.checked)"
+            aria-label="Check for updates automatically"
+          >
+        </div>
+        <div class="settings-help" style="margin-top: 6px;">Off by default — OAR sends no traffic anywhere unless you opt in. When enabled, the relay asks oar.sh for the latest version about twice a day. Manual checks below work regardless.</div>
+        <div id="update-check-killed-help" class="settings-help" style="margin-top: 6px;" hidden>Update checks are disabled by OAR_NO_UPDATE_CHECK in this relay's environment.</div>
+        <div class="settings-row" style="margin-top: 6px; margin-bottom: 0;">
+          <button id="update-check-now-btn" class="chat-title-action-btn" type="button" onclick="checkForUpdatesNow()">Check for updates</button>
+          <span id="update-last-checked" class="settings-help"></span>
+        </div>
+        <div id="update-available-card" class="settings-help" style="margin-top: 6px;" hidden>
+          <span id="update-available-text"></span>
+          <a id="update-notes-link" target="_blank" rel="noopener" hidden>release notes</a>
+          <div class="settings-row" style="margin-top: 6px; margin-bottom: 0;">
+            <button id="update-apply-btn" class="chat-title-action-btn" type="button" onclick="applyAvailableUpdate()">Update</button>
+            <button id="update-dismiss-btn" class="chat-title-action-btn" type="button" onclick="dismissAvailableUpdate()">Dismiss</button>
+          </div>
+          <div id="update-git-hint" style="margin-top: 4px;" hidden>This relay runs from a git checkout — pull and restart to update.</div>
+        </div>
+        <div id="update-install-status" class="settings-help" style="margin-top: 6px;" hidden></div>
+        <button id="update-cancel-btn" class="chat-title-action-btn" type="button" style="margin-top: 4px;" onclick="cancelRunningUpdate()" hidden>Cancel update</button>
+        <details id="update-install-log" class="cli-install-log" hidden>
+          <summary>Update log</summary>
+          <pre id="update-install-log-pre"></pre>
+        </details>
+        <div id="update-outcome" class="settings-help" style="margin-top: 6px;" hidden>
+          <span id="update-outcome-text"></span>
+          <pre id="update-outcome-log" hidden></pre>
+          <button id="update-outcome-dismiss-btn" class="chat-title-action-btn" type="button" onclick="dismissUpdateOutcome()">Dismiss</button>
         </div>
         <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
           <label for="default-session-workspace-root-input">Default CWD for new sessions</label>
@@ -5193,14 +5599,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
@@ -5617,6 +6023,23 @@
           <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>
         </div>
       </div>
+      <div
+        id="settings-panel-features"
+        class="settings-panel"
+        role="tabpanel"
+        tabindex="0"
+        aria-labelledby="settings-tab-features"
+        data-settings-panel="features"
+        hidden
+      >
+        <div class="settings-help" style="margin-top: 12px;">Feature flags are applied when the relay starts. Changes here are saved immediately, but only take effect after the relay restarts.</div>
+        <div id="features-flag-list"></div>
+        <div id="features-restart-notice" class="settings-help" style="margin-top: 12px;" hidden>
+          Saved changes differ from the running relay.
+          <button id="features-restart-btn" type="button" style="margin-left: 8px;">Restart relay</button>
+        </div>
+        <div id="features-settings-status" class="settings-help" style="margin-top: 12px;" hidden></div>
+      </div>
     </div>
   </div>
 </div>
@@ -5654,6 +6077,11 @@
       <label for="new-conversation-reasoning-select" style="display:block;margin-top:12px;">Reasoning effort</label>
       <select id="new-conversation-reasoning-select"></select>
       <div id="new-conversation-reasoning-status" style="margin-top:8px;font-size:0.78rem;color:var(--muted);">Choose the effort used when this conversation starts.</div>
+      <div id="new-conversation-context-row" style="display:none;">
+        <label for="new-conversation-context-select" style="display:block;margin-top:12px;">Context window</label>
+        <select id="new-conversation-context-select" disabled aria-readonly="true"></select>
+        <div id="new-conversation-context-status" style="margin-top:8px;font-size:0.78rem;color:var(--muted);">Context window of the selected model; the tier can be changed from the composer once the chat is open.</div>
+      </div>
       <div id="new-conversation-size-row" style="display:none;">
         <label for="new-conversation-size-select" style="display:block;margin-top:12px;">Size</label>
         <select id="new-conversation-size-select"></select>
@@ -5724,6 +6152,8 @@
       <button id="file-preview-mode-raw" class="file-preview-btn" onclick="setFilePreviewMode('raw')">Raw</button>
       <button id="file-preview-html-toggle" class="file-preview-btn" onclick="toggleFilePreviewHtml()">Show literal HTML</button>
       <a id="file-preview-open-raw" class="file-preview-btn" download>Download</a>
+      <button id="file-preview-copy-btn" class="file-preview-btn" type="button" onclick="copyFilePreviewImage()" hidden>Copy</button>
+      <button id="file-preview-annotate-btn" class="file-preview-btn" type="button" onclick="openAnnotateEditorForPreview()" hidden>🖍️ Annotate</button>
       <span id="file-preview-warning" class="file-preview-warning">⚠ Safe layout HTML enabled; active content is blocked</span>
     </div>
     <div id="file-preview-meta" class="file-preview-meta"></div>
@@ -5731,6 +6161,35 @@
   </div>
 </div>
 
+<!-- Image annotation editor (all listeners are attached by annotate-editor.js) -->
+<div id="image-annotate-modal" aria-hidden="true">
+  <div class="annotate-dialog" role="dialog" aria-modal="true" aria-label="Annotate image">
+    <div class="annotate-header">
+      <div id="annotate-title" class="annotate-title">Annotate image</div>
+      <button id="annotate-close-btn" class="annotate-close" type="button" aria-label="Close without saving">✖</button>
+    </div>
+    <div id="annotate-stage">
+      <div id="annotate-surface">
+        <img id="annotate-image" alt="Image being annotated">
+        <canvas id="annotate-canvas"></canvas>
+      </div>
+    </div>
+    <div id="annotate-toolbar">
+      <button class="annotate-color active" type="button" data-color="yellow" style="background: #ffdd00;" aria-label="Yellow marker"></button>
+      <button class="annotate-color" type="button" data-color="red" style="background: #ff3b30;" aria-label="Red marker"></button>
+      <button class="annotate-color" type="button" data-color="green" style="background: #34c759;" aria-label="Green marker"></button>
+      <button class="annotate-color" type="button" data-color="blue" style="background: #0a84ff;" aria-label="Blue marker"></button>
+      <button class="annotate-width" type="button" data-width="thin" aria-label="Thin stroke"><span class="annotate-width-dot"></span></button>
+      <button class="annotate-width active" type="button" data-width="medium" aria-label="Medium stroke"><span class="annotate-width-dot"></span></button>
+      <button class="annotate-width" type="button" data-width="thick" aria-label="Thick stroke"><span class="annotate-width-dot"></span></button>
+      <span class="annotate-toolbar-gap"></span>
+      <button id="annotate-undo-btn" class="annotate-action" type="button" aria-label="Undo" disabled>↩️</button>
+      <button id="annotate-reset-btn" class="annotate-action" type="button" aria-label="Clear all" disabled>🗑️</button>
+      <button id="annotate-accept-btn" class="annotate-action" type="button" aria-label="Accept" disabled>✅</button>
+    </div>
+  </div>
+</div>
+
 <script>
   window.__loadCopilotApp().catch((error) => {
     document.getElementById('startup-loading')?.remove();