@oar-sh/oar 0.9.24 → 0.9.26

package/server/public/index.html

@@ -211,18 +211,17 @@
 <title>OAR — Open Agent Relay</title>
 <script>document.write('<scr'+'ipt src="'+__APP_BASE+'/socket.io/socket.io.js"><\/scr'+'ipt>');</script>
 <script src="https://cdn.jsdelivr.net/npm/marked@15.0.12/marked.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css">
-<script src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/mhchem.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/auto-render.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.19.1/dist/katex.min.css" integrity="sha384-WwGtaC6ywCHxA5cstpj/3+xIZvTez8dq2IcBQaXRkenHZ7FVVq1ZROtURwfbtTlG" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/katex@0.19.1/dist/katex.min.js" integrity="sha384-a1WQdjRj162i159OYq041X6I4K8NenkrI09LlPmiHg0YOb7CR+wJOraXwK9abpnE" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.19.1/dist/contrib/mhchem.min.js" integrity="sha384-fB8BH//9nBzROkMUsu/Dr35jWHIbnKesUo9rW0hfEgw8mZGnkAyBAjKX9F98OVuo" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/nginx.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/powershell.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/x86asm.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.5.0/css/xterm.min.css">
-<script src="https://cdn.jsdelivr.net/npm/xterm@5.5.0/lib/xterm.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.10.0/lib/xterm-addon-fit.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css" integrity="sha384-8Xk9wy/gzEDUKrXtrmCFa2bBuK3BpjpDuL/p0SeKQX19Khl/M+lHOgD/CyYf7efP" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.js" integrity="sha384-M169f14mRZOXm3hD/v2Ti0ThIT/RnAQagXA9nlE15yHAtrW19gdePJh/HaTzUOe/" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.js" integrity="sha384-iF+jqbuti4XlB64clWgFWYEscb+UnSRv3VgVikGYZu+otNFnSHr7y7NcKfBnGizn" crossorigin="anonymous"></script>
 <script>
   if (window.hljs && typeof window.hljs.registerAliases === 'function') {
     window.hljs.registerAliases(['pwsh', 'ps1'], { languageName: 'powershell' });
@@ -891,6 +890,8 @@
   .inbox-count.is-urgent { background: var(--danger); color: #fff; }
   body.inbox-view-active #input-area { display: none; }
   body.inbox-view-active #pending-question-banner { display: none; }
+  body.media-view-active #input-area { display: none; }
+  body.media-view-active #pending-question-banner { display: none; }
   .inbox-view { display: grid; gap: calc(7px * var(--ui-scale)); padding: calc(4px * var(--ui-scale)) 0 calc(12px * var(--ui-scale)); }
   .inbox-filter { display: flex; gap: calc(3px * var(--ui-scale)); flex-wrap: wrap; }
   .inbox-filter-option {
@@ -1837,6 +1838,31 @@
   /* Two classes: .settings-help, later in this sheet, would grey it out. */
   .settings-help.claude-api-field-error { color: var(--danger); }
   .settings-help.claude-api-field-error[hidden] { display: none; }
+  /* OpenAI's image cap and presets (openai-image-cost-ui.js). */
+  .settings-help.openai-image-field-error { color: var(--danger); }
+  .settings-help.openai-image-field-error[hidden] { display: none; }
+  #openai-image-cap-input {
+    background: var(--bg);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: calc(6px * var(--ui-scale));
+    padding: calc(3px * var(--ui-scale)) calc(7px * var(--ui-scale));
+    outline: none;
+    font-size: var(--fs-meta-md);
+    width: min(calc(140px * var(--ui-scale)), 100%);
+  }
+  #openai-image-cap-input[aria-invalid="true"] { border-color: var(--danger); }
+  .openai-image-cap-row { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui-scale)); align-items: center; }
+  #openai-image-spend-line[data-state="warning"] { color: var(--warn); }
+  #openai-image-spend-line[data-state="error"] { color: var(--danger); }
+  #openai-image-allow-today-btn[hidden],
+  #openai-image-stop-allowing-btn[hidden] { display: none; }
+  .openai-image-presets-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: calc(4px * var(--ui-scale)); }
+  .openai-image-preset-row { display: flex; align-items: center; gap: calc(6px * var(--ui-scale)); min-width: 0; }
+  .openai-image-preset-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
+  .openai-image-preset-text strong { font-weight: 600; overflow-wrap: anywhere; }
+  .openai-image-preset-details { color: var(--muted); font-size: var(--fs-meta-sm); overflow-wrap: anywhere; }
+  .openai-image-preset-tag { color: var(--muted); font-size: var(--fs-meta-xs); flex: 0 0 auto; }
   /* The native spin buttons of a number field follow the theme: light ones
      on a dark field read as a glitch. */
   :root:not([data-theme="light"]) input[type="number"] { color-scheme: dark; }
@@ -1951,6 +1977,8 @@
   }
   .settings-section:first-child .settings-section-title { margin-top: 0; }
   .settings-section-title + .settings-row { margin-top: 0; }
+  /* Settings → Appearance: the one line saying where its settings live. */
+  #appearance-browser-note { margin-bottom: calc(8px * var(--ui-scale)); }
   /* A row inside a column block: the block's full width; the lead row (the
      provider's on/off toggle) keeps a small gap to the fields below. */
   .settings-row-full { width: 100%; }
@@ -2402,6 +2430,9 @@
      The anchor class comes from JS rather than :has() so positioning works
      everywhere the transcript renders. */
   pre.has-code-copy { position: relative; }
+  /* The button gets a strip of its own above the first line, so a long line
+     never runs under it. */
+  pre.has-code-copy > code { padding-top: calc(0.72rem + 12px * var(--ui-scale) + 4px); }
   .code-copy-btn {
     position: absolute;
     top: calc(4px * var(--ui-scale));
@@ -2443,8 +2474,8 @@
     vertical-align: bottom;
     -webkit-overflow-scrolling: touch;
   }
-  .katex-error {
-    color: var(--danger);
+  /* A formula KaTeX could not set is shown as its source, line breaks kept. */
+  .math-source {
     white-space: pre-wrap;
   }
   .msg-bubble code:not(pre code) {
@@ -2499,6 +2530,27 @@
     width: 100%; max-width: 100%; box-sizing: border-box;
     min-width: 0;
   }
+  /* A running image turn in the live bubble (image-turn-placeholder.mjs): the
+     image area keeps the size's aspect ratio from the first second, so a
+     partial arriving does not move the transcript. */
+  .image-turn-placeholder { display: flex; flex-direction: column; gap: calc(4px * var(--ui-scale)); margin: calc(2px * var(--ui-scale)) 0 calc(6px * var(--ui-scale)); }
+  .thinking-bubble:has(> .image-turn-placeholder) > .dots { display: none; }
+  .image-turn-placeholder-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(6px * var(--ui-scale)); color: var(--text); font-size: var(--fs-meta-md); }
+  .image-turn-placeholder-timer { font-variant-numeric: tabular-nums; color: var(--muted); }
+  .image-turn-placeholder-retry { color: var(--muted); font-style: italic; }
+  .image-turn-placeholder-retry[hidden] { display: none; }
+  .image-turn-placeholder-details { color: var(--muted); font-size: var(--fs-meta-sm); overflow-wrap: anywhere; }
+  .image-turn-placeholder-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(6px * var(--ui-scale)); width: min(100%, calc(360px * var(--ui-scale))); }
+  .image-turn-placeholder-grid:not([data-count="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .image-turn-placeholder-tile {
+    position: relative; overflow: hidden; border-radius: calc(10px * var(--ui-scale));
+    border: 1px solid var(--border); background: var(--bg3);
+    animation: image-turn-pulse 1.8s ease-in-out infinite;
+  }
+  .image-turn-placeholder-tile.has-preview { animation: none; }
+  .image-turn-placeholder-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
+  @keyframes image-turn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+  @media (prefers-reduced-motion: reduce) { .image-turn-placeholder-tile { animation: none; } }
   /* 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
@@ -3315,6 +3367,190 @@
     border-color: var(--accent);
     color: var(--accent);
   }
+  /* The media gallery (media-gallery-ui.js): the 🧠 Media tab and the global
+     Media view. A messenger's shared media: square tiles under month
+     headers, 3 columns on a phone; a Files tab as a list. */
+  .media-gallery {
+    display: flex;
+    flex-direction: column;
+    gap: calc(8px * var(--ui-scale));
+    min-width: 0;
+  }
+  .media-gallery[data-scope="global"] {
+    padding: calc(12px * var(--ui-scale));
+    max-width: calc(1100px * var(--ui-scale));
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .media-gallery-tabs,
+  .media-gallery-chips,
+  .context-tab-strip {
+    display: flex;
+    align-items: center;
+    gap: calc(4px * var(--ui-scale));
+    flex-wrap: wrap;
+  }
+  .media-gallery-tab,
+  .media-gallery-chip,
+  .context-tab {
+    flex: 0 0 auto;
+    border: 1px solid var(--border);
+    background: var(--bg2);
+    color: var(--text);
+    border-radius: calc(8px * var(--ui-scale));
+    height: calc(28px * var(--ui-scale));
+    padding: 0 calc(10px * var(--ui-scale));
+    font-size: var(--fs-meta-md);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  .media-gallery-tab[aria-selected="true"],
+  .media-gallery-chip[aria-pressed="true"],
+  .context-tab[aria-selected="true"] {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+  .context-tab-count {
+    margin-left: calc(4px * var(--ui-scale));
+    color: var(--muted);
+  }
+  .context-tab-strip {
+    margin-bottom: calc(10px * var(--ui-scale));
+  }
+  .media-gallery-filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(6px * var(--ui-scale));
+  }
+  .media-gallery-select,
+  .media-gallery-search {
+    height: calc(28px * var(--ui-scale));
+    border: 1px solid var(--border);
+    border-radius: calc(8px * var(--ui-scale));
+    background: var(--bg2);
+    color: var(--text);
+    font-size: var(--fs-meta-md);
+    padding: 0 calc(6px * var(--ui-scale));
+    max-width: 100%;
+  }
+  .media-gallery-select[data-media-filter="session"] {
+    max-width: calc(260px * var(--ui-scale));
+  }
+  .media-gallery-search {
+    flex: 1 1 calc(180px * var(--ui-scale));
+    min-width: 0;
+  }
+  .media-gallery-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(4px * var(--ui-scale));
+    font-size: var(--fs-meta-md);
+    color: var(--muted);
+  }
+  .media-gallery-status p {
+    margin: calc(4px * var(--ui-scale)) 0;
+    color: var(--muted);
+    font-size: var(--fs-meta-md);
+  }
+  .media-month-label {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    margin: 0;
+    padding: calc(6px * var(--ui-scale)) calc(2px * var(--ui-scale));
+    background: var(--bg);
+    color: var(--muted);
+    font-size: var(--fs-meta-md);
+    font-weight: 600;
+  }
+  .media-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(calc(140px * var(--ui-scale)), 1fr));
+    gap: 2px;
+  }
+  .media-tile {
+    position: relative;
+    aspect-ratio: 1;
+    padding: 0;
+    border: 0;
+    background: var(--bg3);
+    overflow: hidden;
+    cursor: pointer;
+    content-visibility: auto;
+    contain-intrinsic-size: calc(140px * var(--ui-scale));
+  }
+  .media-tile img,
+  .media-tile video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    pointer-events: none;
+  }
+  .media-tile:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+  }
+  .media-tile-archived img,
+  .media-tile-archived video {
+    opacity: 0.6;
+  }
+  .media-tile-badge,
+  .media-tile-play {
+    position: absolute;
+    font-size: calc(12px * var(--ui-scale));
+    line-height: 1;
+    padding: calc(3px * var(--ui-scale)) calc(4px * var(--ui-scale));
+    border-radius: calc(6px * var(--ui-scale));
+    background: rgba(0, 0, 0, 0.55);
+    color: #fff;
+  }
+  .media-tile-badge { right: calc(4px * var(--ui-scale)); bottom: calc(4px * var(--ui-scale)); }
+  .media-tile-play { left: calc(4px * var(--ui-scale)); bottom: calc(4px * var(--ui-scale)); }
+  .media-file-list {
+    display: flex;
+    flex-direction: column;
+  }
+  .media-file-row {
+    display: flex;
+    align-items: center;
+    gap: calc(10px * var(--ui-scale));
+    padding: calc(8px * var(--ui-scale)) calc(4px * var(--ui-scale));
+    border: 0;
+    border-bottom: 1px solid var(--border);
+    background: transparent;
+    color: var(--text);
+    text-align: left;
+    cursor: pointer;
+  }
+  .media-file-icon { font-size: calc(22px * var(--ui-scale)); }
+  .media-file-text { display: flex; flex-direction: column; min-width: 0; }
+  .media-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .media-file-meta { color: var(--muted); font-size: var(--fs-meta-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .media-gallery-more {
+    align-self: center;
+    border: 1px solid var(--border);
+    background: var(--bg2);
+    color: var(--text);
+    border-radius: calc(8px * var(--ui-scale));
+    padding: calc(4px * var(--ui-scale)) calc(12px * var(--ui-scale));
+    cursor: pointer;
+  }
+  .media-gallery-sentinel { height: 1px; }
+  @media (max-width: 680px) {
+    .media-grid { grid-template-columns: repeat(3, 1fr); }
+    .media-gallery[data-scope="global"] { padding: calc(8px * var(--ui-scale)) calc(4px * var(--ui-scale)); }
+    .media-gallery-select[data-media-filter="session"] { max-width: 100%; flex: 1 1 100%; }
+    .media-gallery-tabs,
+    .media-gallery-chips,
+    .context-tab-strip {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+  }
   .plan-usage-card-titles {
     display: flex;
     flex-direction: column;
@@ -3411,6 +3647,17 @@
     background: var(--bg3);
   }
   .plan-usage-meter-secondary .plan-usage-bar { height: calc(6px * var(--ui-scale)); border-radius: calc(3px * var(--ui-scale)); }
+  /* A bar with a mark on it (the OpenAI images card's 80 % warning line). */
+  .plan-usage-bar-marked { position: relative; }
+  .plan-usage-bar-mark {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    margin-left: -1px;
+    background: var(--text);
+    opacity: 0.55;
+  }
   .plan-usage-bar-fill {
     display: block;
     height: 100%;
@@ -4294,7 +4541,12 @@
   #mode-select,
   #model-select,
   #reasoning-effort-select,
-  #context-tier-select {
+  #context-tier-select,
+  #image-size-custom-input,
+  #image-preset-select,
+  #image-count-select,
+  #image-format-select,
+  #image-background-select {
     background: var(--bg3); border: 1px solid var(--border); color: var(--text);
     border-radius: calc(8px * var(--ui-scale)); height: calc(30px * var(--ui-scale)); padding: 0 calc(8px * var(--ui-scale)); font-size: var(--fs-core-control);
     width: 100%; min-width: 0; outline: none;
@@ -4302,7 +4554,64 @@
   #mode-select:focus,
   #model-select:focus,
   #reasoning-effort-select:focus,
-  #context-tier-select:focus { border-color: var(--accent); }
+  #context-tier-select:focus,
+  #image-size-custom-input:focus,
+  #image-preset-select:focus,
+  #image-count-select:focus,
+  #image-format-select:focus,
+  #image-background-select:focus { border-color: var(--accent); }
+  /* An image model's custom W×H under the Size select, and Count, Format and
+     Background side by side: three narrow selects fit the 340px popover and
+     the phone's bottom sheet alike. */
+  #image-size-custom-input { box-sizing: border-box; font-family: var(--mono, monospace); }
+  /* No iOS focus zoom (see #conv-filter-input). */
+  @media (pointer: coarse), (max-width: 680px) {
+    #image-size-custom-input { font-size: max(16px, 1rem); }
+  }
+  #image-size-custom-input[aria-invalid="true"] { border-color: var(--danger); }
+  .image-size-custom-row { display: flex; flex-direction: column; gap: calc(3px * var(--ui-scale)); margin-top: calc(4px * var(--ui-scale)); }
+  .image-size-custom-row[hidden],
+  .image-size-custom-error[hidden],
+  .composer-settings-image-row[hidden],
+  .composer-settings-image-row .composer-settings-field[hidden] { display: none; }
+  .image-size-custom-error { color: var(--danger); font-size: var(--fs-meta-sm); overflow-wrap: anywhere; }
+  .composer-settings-image-row { display: flex; gap: calc(6px * var(--ui-scale)); min-width: 0; }
+  /* An image model's Preset select with "Save as preset…" beside it, and
+     what a pick skipped or a save answered under them. */
+  #image-preset-field[hidden],
+  .image-preset-note[hidden] { display: none; }
+  .image-preset-row { display: flex; gap: calc(6px * var(--ui-scale)); min-width: 0; align-items: center; }
+  .image-preset-row #image-preset-select { flex: 1 1 auto; }
+  .image-preset-save-btn {
+    flex: 0 0 auto;
+    background: var(--bg3); border: 1px solid var(--border); color: var(--text);
+    border-radius: calc(8px * var(--ui-scale)); height: calc(30px * var(--ui-scale)); padding: 0 calc(8px * var(--ui-scale));
+    font-size: var(--fs-core-control); cursor: pointer; white-space: nowrap;
+  }
+  .image-preset-save-btn:hover { border-color: var(--accent); }
+  .image-preset-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .image-preset-note { color: var(--muted); font-size: var(--fs-meta-sm); overflow-wrap: anywhere; }
+  .image-preset-note[data-state="error"] { color: var(--danger); }
+  /* Today's OpenAI image spend in an image chat: amber from the warning
+     mark, red once the cap stops image turns. */
+  #openai-image-spend-banner {
+    background: var(--bg2);
+    background: color-mix(in srgb, var(--warn) 14%, var(--bg2));
+    border: 1px solid var(--warn);
+    color: var(--warn);
+    border-radius: calc(8px * var(--ui-scale));
+    padding: calc(3px * var(--ui-scale)) calc(8px * var(--ui-scale));
+    margin-bottom: calc(5px * var(--ui-scale));
+    font-size: var(--fs-meta-sm);
+    overflow-wrap: anywhere;
+  }
+  #openai-image-spend-banner[hidden] { display: none; }
+  #openai-image-spend-banner[data-kind="reached"] {
+    background: color-mix(in srgb, var(--danger) 14%, var(--bg2));
+    border-color: var(--danger);
+    color: var(--danger);
+  }
+  .composer-settings-image-row .composer-settings-field { flex: 1 1 0; }
   /* Live background-task fold above the composer. The summary reuses the
      relay tones so its running state matches the sidebar dot / burger bars. */
   #background-tasks-panel {
@@ -4761,8 +5070,7 @@
     background: var(--bg); color: var(--text); border: 1px solid var(--border);
     border-radius: calc(6px * var(--ui-scale)); padding: calc(2px * var(--ui-scale)) calc(4px * var(--ui-scale)); font-size: var(--fs-meta-sm);
   }
-  .remote-relays-self-name-row { display: flex; align-items: baseline; gap: calc(5px * var(--ui-scale)); flex-wrap: wrap; }
-  .remote-relays-self-name { font-family: var(--mono, monospace); color: var(--text); }
+  #settings-panel-relays #pwa-app-name-input,
   #remote-relays-public-url-input,
   #remote-relays-add-url-input,
   #remote-relays-add-token-input {
@@ -6790,6 +7098,10 @@
   /* CWD-pick mode is launched from the summary / new-chat modals (z 12050),
      so the browser must stack above them; #relay-toast stays on top at 12600. */
   #repo-browser-modal.cwd-pick-mode { z-index: 12400; }
+  /* A picture opened from the 🧠 Media tab shows above that modal, and its
+     annotate editor above the picture. */
+  #file-preview-modal.over-summary { z-index: 12200; }
+  body:has(#file-preview-modal.over-summary) #image-annotate-modal { z-index: 12300; }
   .repo-cwd-pick-bar {
     display: flex;
     align-items: center;
@@ -7872,19 +8184,22 @@
        width is the scroll padding too, so a tab scrolled into view (the
        selected one, a focused one) clears it. */
     .settings-tab-strip,
-    .plan-usage-tab-strip {
+    .plan-usage-tab-strip,
+    .context-tab-strip,
+    .media-gallery-tabs,
+    .media-gallery-chips {
       --tab-strip-fade: calc(44px * var(--ui-scale));
       scroll-padding-inline: var(--tab-strip-fade);
     }
-    :is(.settings-tab-strip, .plan-usage-tab-strip)[data-fade="right"] {
+    :is(.settings-tab-strip, .plan-usage-tab-strip, .context-tab-strip, .media-gallery-tabs, .media-gallery-chips)[data-fade="right"] {
       -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--tab-strip-fade));
       mask-image: linear-gradient(to left, transparent, #000 var(--tab-strip-fade));
     }
-    :is(.settings-tab-strip, .plan-usage-tab-strip)[data-fade="both"] {
+    :is(.settings-tab-strip, .plan-usage-tab-strip, .context-tab-strip, .media-gallery-tabs, .media-gallery-chips)[data-fade="both"] {
       -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tab-strip-fade), #000 calc(100% - var(--tab-strip-fade)), transparent);
       mask-image: linear-gradient(to right, transparent, #000 var(--tab-strip-fade), #000 calc(100% - var(--tab-strip-fade)), transparent);
     }
-    :is(.settings-tab-strip, .plan-usage-tab-strip)[data-fade="left"] {
+    :is(.settings-tab-strip, .plan-usage-tab-strip, .context-tab-strip, .media-gallery-tabs, .media-gallery-chips)[data-fade="left"] {
       -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tab-strip-fade));
       mask-image: linear-gradient(to right, transparent, #000 var(--tab-strip-fade));
     }
@@ -8266,6 +8581,7 @@
             <button id="chat-menu-watching" class="chat-actions-menu-item chat-menu-meta-chip" type="button" role="menuitem" hidden>👁 Watching sessions…</button>
             <button id="chat-menu-schedules" class="chat-actions-menu-item chat-menu-meta-chip" type="button" role="menuitem" hidden>⏰ Schedules…</button>
             <button id="chat-menu-origin" class="chat-actions-menu-item chat-menu-meta-chip" type="button" role="menuitem" hidden>↗ Started by an agent</button>
+            <div id="chat-menu-image-cost" class="chat-actions-menu-meta" data-testid="chat-menu-image-cost" hidden><span id="chat-menu-image-cost-value" class="chat-actions-menu-meta-secondary">OpenAI images: …</span></div>
             <button id="chat-menu-edit-title" class="chat-actions-menu-item" type="button" role="menuitem">✍️ Edit conversation title</button>
             <button id="chat-menu-questions" class="chat-actions-menu-item chat-menu-twin" type="button" role="menuitem" hidden>📓 Questions</button>
             <button id="chat-menu-pins" class="chat-actions-menu-item chat-menu-twin" type="button" role="menuitem" hidden>📍 Pinned messages</button>
@@ -8287,7 +8603,8 @@
             <button id="chat-menu-change-cwd" class="chat-actions-menu-item" type="button" role="menuitem">🗂️ Change CWD</button>
             <button id="chat-menu-git-changes" class="chat-actions-menu-item" type="button" role="menuitem">🌿 Git changes</button>
             <button id="chat-menu-open-cloud-session" class="chat-actions-menu-item" type="button" role="menuitem" hidden>☁️ Open on claude.ai</button>
-            <button id="chat-menu-settings" class="chat-actions-menu-item" type="button" role="menuitem">⚙️ Settings</button>
+            <button id="chat-menu-media" class="chat-actions-menu-item" type="button" role="menuitem">🖼️ Media</button>
+    <button id="chat-menu-settings" class="chat-actions-menu-item" type="button" role="menuitem">⚙️ Settings</button>
             <button id="chat-menu-about" class="chat-actions-menu-item" type="button" role="menuitem">ℹ️ About OAR</button>
             <button id="chat-menu-restart-relay" class="chat-actions-menu-item" type="button" role="menuitem">🌄 Restart web relay</button>
             <button id="chat-menu-suspend-host" class="chat-actions-menu-item" type="button" role="menuitem" onclick="openSuspendHostConfirmation()">💤 Suspend host</button>
@@ -8310,6 +8627,8 @@
       <div id="share-preview-banner" role="note"></div>
       <div id="model-banner"></div>
       <div id="usage-limit-banner" role="status" aria-live="polite" hidden></div>
+      <!-- Today's OpenAI image spend in an image chat (openai-image-cost-ui.js). -->
+      <div id="openai-image-spend-banner" data-testid="openai-image-spend-banner" role="status" aria-live="polite" hidden></div>
       <div id="cloud-session-line" aria-label="Cloud session" hidden></div>
       <div id="model-metadata-blocker" aria-live="polite">
         <span id="model-metadata-blocker-text">Model metadata is unavailable. Refresh to choose a model and reasoning effort.</span>
@@ -8367,6 +8686,15 @@
             </select>
             <div id="model-lock-note" hidden></div>
           </div>
+          <!-- An image model's presets (image-composer-ui.js). -->
+          <div id="image-preset-field" class="composer-settings-field" data-field="image-preset" hidden>
+            <label class="composer-settings-field-label" for="image-preset-select">Preset</label>
+            <div class="image-preset-row">
+              <select id="image-preset-select" data-testid="image-preset-select" title="Image preset"><option value="">None</option></select>
+              <button id="image-preset-save-btn" data-testid="image-preset-save" type="button" class="image-preset-save-btn" title="Save the image options below as a preset">Save as preset…</button>
+            </div>
+            <div id="image-preset-note" data-testid="image-preset-note" class="image-preset-note" role="status" aria-live="polite" hidden></div>
+          </div>
           <div class="composer-settings-field" data-field="effort">
             <label id="reasoning-effort-label" class="composer-settings-field-label" for="reasoning-effort-select">Effort</label>
             <select id="reasoning-effort-select" title="Reasoning effort" disabled>
@@ -8378,6 +8706,26 @@
             <select id="context-tier-select" title="Context window">
               <option value="default">—</option>
             </select>
+            <!-- An image model's "Custom…" size (image-composer-ui.js). -->
+            <div id="image-size-custom-row" class="image-size-custom-row" hidden>
+              <input id="image-size-custom-input" type="text" inputmode="text" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="2048x1152" aria-label="Custom image size, width x height" aria-describedby="image-size-custom-error">
+              <div id="image-size-custom-error" class="image-size-custom-error" role="alert" hidden></div>
+            </div>
+          </div>
+          <!-- An image model's Count, Format and Background (image-composer-ui.js). -->
+          <div id="image-options-row" class="composer-settings-image-row" hidden>
+            <div class="composer-settings-field" data-field="image-count">
+              <label class="composer-settings-field-label" for="image-count-select">Count</label>
+              <select id="image-count-select" title="Images per turn"></select>
+            </div>
+            <div class="composer-settings-field" data-field="image-format">
+              <label class="composer-settings-field-label" for="image-format-select">Format</label>
+              <select id="image-format-select" title="Image format"></select>
+            </div>
+            <div class="composer-settings-field" data-field="image-background">
+              <label class="composer-settings-field-label" for="image-background-select">Background</label>
+              <select id="image-background-select" title="Image background"></select>
+            </div>
           </div>
           <!-- Subscription | API key in a Claude chat (claude-billing-toggle-ui.js). -->
           <div id="claude-billing-toggle" class="claude-billing-toggle composer-settings-field" data-field="billing" hidden></div>
@@ -8499,6 +8847,16 @@
         tabindex="0"
         data-settings-tab="general"
       >General</button>
+      <button
+        id="settings-tab-appearance"
+        class="settings-tab"
+        type="button"
+        role="tab"
+        aria-selected="false"
+        aria-controls="settings-panel-appearance"
+        tabindex="-1"
+        data-settings-tab="appearance"
+      >Appearance</button>
       <button
         id="settings-tab-providers"
         class="settings-tab"
@@ -8569,68 +8927,6 @@
         aria-labelledby="settings-tab-general"
         data-settings-panel="general"
       >
-        <section class="settings-section" id="settings-section-appearance" aria-labelledby="settings-section-appearance-title">
-          <h3 class="settings-section-title" id="settings-section-appearance-title">Appearance</h3>
-          <div class="settings-row">
-            <label for="theme-select">Theme</label>
-            <select id="theme-select" onchange="updateTheme(this.value)">
-              <option value="dark">Dark</option>
-              <option value="light">Light</option>
-            </select>
-          </div>
-          <div class="settings-row" style="margin-bottom: 0;">
-            <label for="font-scale-select">Text scaling</label>
-            <select id="font-scale-select" onchange="updateFontScaleFromSelect(this.value)" aria-label="Text scaling"></select>
-          </div>
-          <div class="settings-row settings-gap">
-            <label for="thoughts-expanded-toggle">Expand thoughts while an agent works</label>
-            <input
-              id="thoughts-expanded-toggle"
-              type="checkbox"
-              onchange="updateThoughtsExpandedSetting(this.checked)"
-              aria-label="Expand thoughts while an agent works"
-              checked
-            >
-          </div>
-          <div class="settings-help settings-gap-xs">Open thoughts in the live turn, in sub-agent bubbles and in the sub-agent viewer. Saved in this browser.</div>
-          <div class="settings-row settings-row-column settings-gap">
-            <label for="live-activity-cap-slider">Tool lines shown while an agent works <span id="live-activity-cap-value">50 lines</span></label>
-            <input
-              id="live-activity-cap-slider"
-              type="range"
-              min="10"
-              max="510"
-              step="10"
-              value="50"
-              aria-label="Tool lines shown while an agent works"
-              aria-valuetext="50 lines"
-              oninput="previewLiveActivityCap(this.value)"
-              onchange="updateLiveActivityCap(this.value)"
-            >
-          </div>
-          <div class="settings-help settings-gap-xs">Per agent: the main agent and each sub-agent keep this many of their newest tool lines in the live bubble. The relay keeps up to 500 per agent. Saved in this browser.</div>
-          <div class="settings-row settings-gap">
-            <label for="stream-view-toggle">Stream view: thoughts, tool calls and the reply in order</label>
-            <input
-              id="stream-view-toggle"
-              type="checkbox"
-              onchange="updateStreamViewSetting(this.checked)"
-              aria-label="Stream view: thoughts, tool calls and the reply in order"
-            >
-          </div>
-          <div class="settings-help settings-gap-xs">Turns recorded before this version keep the grouped layout. Saved in this browser.</div>
-          <div class="settings-row settings-gap">
-            <label for="show-suspend-host-toggle">Show Suspend host action</label>
-            <input
-              id="show-suspend-host-toggle"
-              type="checkbox"
-              onchange="updateShowSuspendHostSetting(this.checked)"
-              aria-label="Show Suspend host action"
-              checked
-            >
-          </div>
-          <div class="settings-help settings-gap-xs">Shows or hides the menu action in this browser only. Suspend works only when the relay runs on Windows; a queued suspend still shows its banner here either way.</div>
-        </section>
         <section class="settings-section" id="settings-section-reading" aria-labelledby="settings-section-reading-title">
           <h3 class="settings-section-title" id="settings-section-reading-title">Reading</h3>
           <div class="settings-row settings-gap">
@@ -8745,44 +9041,8 @@
           <div id="model-refresh-providers" class="settings-gap" role="group" aria-label="Providers checked for new models"></div>
           <div class="settings-help settings-gap-xs">The relay asks each switched-on provider for its model list this often. A provider whose list was refreshed in the meantime (Refresh in Select Models, a settings save, a sign-in) waits a full interval again, and a failed check is tried again after an hour at the earliest. Whether a new model starts on is set per provider in Select Models. A setting of this relay.</div>
         </section>
-        <section class="settings-section" id="settings-section-relay" aria-labelledby="settings-section-relay-title">
-          <h3 class="settings-section-title" id="settings-section-relay-title">This relay</h3>
-          <div class="settings-row settings-row-column settings-gap">
-            <label for="pwa-app-name-input">Relay name</label>
-            <input
-              id="pwa-app-name-input"
-              type="text"
-              maxlength="60"
-              placeholder="OAR"
-              aria-label="Relay name"
-              onchange="updatePwaAppName(this.value)"
-            >
-            <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. A setting of this relay.</div>
-          </div>
-          <div class="settings-row settings-gap">
-            <label for="restart-resume-toggle">After a relay restart, tell interrupted sessions to carry on</label>
-            <input
-              id="restart-resume-toggle"
-              type="checkbox"
-              onchange="updateRestartResumeSettingFromToggle(this.checked)"
-              aria-label="After a relay restart, tell interrupted sessions to carry on"
-            >
-          </div>
-          <div class="settings-help settings-gap-xs">Most turns a restart interrupts run again by themselves. A turn that cannot (the agent had already taken the message, or had started on its own after a background task) just stops. With this on, such a session gets one relay note once the relay is back, saying when it restarted and asking the agent to check what it was doing and carry on. Your message is never sent again; idle, archived and usage-limit-paused sessions get nothing. Off by default; a setting of this relay.</div>
-          <div class="settings-row settings-gap">
-            <label for="relay-restart-max-wait-select">Ask after a queued relay restart has waited</label>
-            <select id="relay-restart-max-wait-select" onchange="updateRelayRestartMaxWaitSetting(this.value)" aria-label="Ask after a queued relay restart has waited">
-              <option value="5">5 min</option>
-              <option value="10">10 min</option>
-              <option value="15">15 min</option>
-              <option value="30" selected>30 min</option>
-              <option value="60">1 h</option>
-              <option value="120">2 h</option>
-              <option value="240">4 h</option>
-              <option value="0">No limit</option>
-            </select>
-          </div>
-          <div class="settings-help settings-gap-xs">A queued relay restart waits for the running turns, and new messages wait for the restart. After this long the banner asks whether to restart now, keep waiting or cancel; it never restarts while the turns run, and still restarts as soon as they end. No limit waits until the turns end. A setting of this relay.</div>
+        <section class="settings-section" id="settings-section-computer" aria-labelledby="settings-section-computer-title">
+          <h3 class="settings-section-title" id="settings-section-computer-title">This computer</h3>
           <div class="settings-row settings-row-column settings-gap">
             <label for="default-session-workspace-root-input">Default CWD for new sessions</label>
             <input
@@ -8859,6 +9119,80 @@
           </div>
         </section>
       </div>
+      <div
+        id="settings-panel-appearance"
+        class="settings-panel"
+        role="tabpanel"
+        tabindex="0"
+        aria-labelledby="settings-tab-appearance"
+        data-settings-panel="appearance"
+        hidden
+      >
+        <div id="appearance-browser-note" class="settings-help">These settings are kept in this browser; other devices keep their own.</div>
+        <div class="settings-row">
+          <label for="theme-select">Theme</label>
+          <select id="theme-select" onchange="updateTheme(this.value)" aria-describedby="appearance-browser-note">
+            <option value="dark">Dark</option>
+            <option value="light">Light</option>
+          </select>
+        </div>
+        <div class="settings-row" style="margin-bottom: 0;">
+          <label for="font-scale-select">Text scaling</label>
+          <select id="font-scale-select" onchange="updateFontScaleFromSelect(this.value)" aria-label="Text scaling" aria-describedby="appearance-browser-note"></select>
+        </div>
+        <div class="settings-row settings-gap">
+          <label for="thoughts-expanded-toggle">Expand thoughts while an agent works</label>
+          <input
+            id="thoughts-expanded-toggle"
+            aria-describedby="appearance-browser-note"
+            type="checkbox"
+            onchange="updateThoughtsExpandedSetting(this.checked)"
+            aria-label="Expand thoughts while an agent works"
+            checked
+          >
+        </div>
+        <div class="settings-help settings-gap-xs">Open thoughts in the live turn, in sub-agent bubbles and in the sub-agent viewer.</div>
+        <div class="settings-row settings-row-column settings-gap">
+          <label for="live-activity-cap-slider">Tool lines shown while an agent works <span id="live-activity-cap-value">50 lines</span></label>
+          <input
+            id="live-activity-cap-slider"
+            aria-describedby="appearance-browser-note"
+            type="range"
+            min="10"
+            max="510"
+            step="10"
+            value="50"
+            aria-label="Tool lines shown while an agent works"
+            aria-valuetext="50 lines"
+            oninput="previewLiveActivityCap(this.value)"
+            onchange="updateLiveActivityCap(this.value)"
+          >
+        </div>
+        <div class="settings-help settings-gap-xs">Per agent: the main agent and each sub-agent keep this many of their newest tool lines in the live bubble. The relay keeps up to 500 per agent.</div>
+        <div class="settings-row settings-gap">
+          <label for="stream-view-toggle">Stream view: thoughts, tool calls and the reply in order</label>
+          <input
+            id="stream-view-toggle"
+            aria-describedby="appearance-browser-note"
+            type="checkbox"
+            onchange="updateStreamViewSetting(this.checked)"
+            aria-label="Stream view: thoughts, tool calls and the reply in order"
+          >
+        </div>
+        <div class="settings-help settings-gap-xs">Turns recorded before this version keep the grouped layout.</div>
+        <div class="settings-row settings-gap">
+          <label for="show-suspend-host-toggle">Show Suspend host action</label>
+          <input
+            id="show-suspend-host-toggle"
+            aria-describedby="appearance-browser-note"
+            type="checkbox"
+            onchange="updateShowSuspendHostSetting(this.checked)"
+            aria-label="Show Suspend host action"
+            checked
+          >
+        </div>
+        <div class="settings-help settings-gap-xs">Shows or hides the menu action in this browser only. Suspend works only when the relay runs on Windows; a queued suspend still shows its banner here either way.</div>
+      </div>
       <div
         id="settings-panel-providers"
         class="settings-panel"
@@ -9036,6 +9370,37 @@
             </div>
             <div class="settings-help">Leave the key blank to keep the saved key, or enter a new one to replace it. Provider changes also update conversations that have not sent a message yet. The Base URL is useful for OpenAI-compatible endpoints or for pointing to the capture proxy (<code>node server/tools/capture-proxy.mjs</code>) to inspect requests.</div>
           </div>
+          <!-- Image turns: the daily cap, today's spend and the presets (openai-image-cost-ui.js). -->
+          <div id="openai-image-spend-section" class="settings-row settings-row-column settings-gap" data-testid="openai-image-spend-section">
+            <label for="openai-image-cap-input">Daily image cap (USD)</label>
+            <div class="openai-image-cap-row">
+              <input
+                id="openai-image-cap-input"
+                data-testid="openai-image-cap-input"
+                type="number"
+                inputmode="decimal"
+                min="0"
+                max="10000"
+                step="0.01"
+                value="5"
+                aria-label="Daily image cap in US dollars, 0 for no cap"
+                aria-describedby="openai-image-spend-error openai-image-cap-help"
+              >
+              <button id="openai-image-cap-save-btn" data-testid="openai-image-cap-save" type="button" class="summary-btn">Save cap</button>
+            </div>
+            <div id="openai-image-spend-error" data-testid="openai-image-spend-error" class="settings-help openai-image-field-error" role="alert" hidden></div>
+            <div id="openai-image-cap-help" class="settings-help">What image turns may cost this relay per day (relay time), estimates included. Once today's spend reaches it, new image turns are refused until tomorrow or until you allow more for today; a running turn finishes. 0 means no cap.</div>
+            <div id="openai-image-spend-line" data-testid="openai-image-spend-line" class="settings-help settings-provider-status" role="status">Today's image spend is not known yet.</div>
+            <div class="settings-actions">
+              <button id="openai-image-allow-today-btn" data-testid="openai-image-allow-today" type="button" class="summary-btn" hidden>Allow past the cap for today</button>
+              <button id="openai-image-stop-allowing-btn" data-testid="openai-image-stop-allowing" type="button" class="summary-btn" hidden>Stop allowing</button>
+            </div>
+            <div id="openai-image-spend-status" class="settings-help" role="status" aria-live="polite"></div>
+            <label class="settings-gap-sm" id="openai-image-presets-label">Image presets</label>
+            <ul id="openai-image-presets-list" data-testid="openai-image-presets-list" class="openai-image-presets-list" aria-labelledby="openai-image-presets-label"></ul>
+            <div id="openai-image-presets-error" class="settings-help openai-image-field-error" role="alert" hidden></div>
+            <div id="openai-image-presets-note" class="settings-help"></div>
+          </div>
         </div>
         <div
           id="settings-provider-panel-claude"
@@ -9560,11 +9925,16 @@
         hidden
       >
         <div id="remote-relays-self-section" class="settings-row settings-row-column settings-gap">
-          <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>
+          <label for="pwa-app-name-input">Relay name</label>
+          <input
+            id="pwa-app-name-input"
+            type="text"
+            maxlength="60"
+            placeholder="OAR"
+            aria-label="Relay name"
+            onchange="updatePwaAppName(this.value)"
+          >
+          <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. A setting of this relay.</div>
         </div>
         <div class="settings-row settings-row-column settings-gap">
           <label for="remote-relays-public-url-input">Public address</label>
@@ -9582,6 +9952,30 @@
           <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 settings-gap">
+          <label for="restart-resume-toggle">After a relay restart, tell interrupted sessions to carry on</label>
+          <input
+            id="restart-resume-toggle"
+            type="checkbox"
+            onchange="updateRestartResumeSettingFromToggle(this.checked)"
+            aria-label="After a relay restart, tell interrupted sessions to carry on"
+          >
+        </div>
+        <div class="settings-help settings-gap-xs">Most turns a restart interrupts run again by themselves. A turn that cannot (the agent had already taken the message, or had started on its own after a background task) just stops. With this on, such a session gets one relay note once the relay is back, saying when it restarted and asking the agent to check what it was doing and carry on. Your message is never sent again; idle, archived and usage-limit-paused sessions get nothing. Off by default; a setting of this relay.</div>
+        <div class="settings-row settings-gap">
+          <label for="relay-restart-max-wait-select">Ask after a queued relay restart has waited</label>
+          <select id="relay-restart-max-wait-select" onchange="updateRelayRestartMaxWaitSetting(this.value)" aria-label="Ask after a queued relay restart has waited">
+            <option value="5">5 min</option>
+            <option value="10">10 min</option>
+            <option value="15">15 min</option>
+            <option value="30" selected>30 min</option>
+            <option value="60">1 h</option>
+            <option value="120">2 h</option>
+            <option value="240">4 h</option>
+            <option value="0">No limit</option>
+          </select>
+        </div>
+        <div class="settings-help settings-gap-xs">A queued relay restart waits for the running turns, and new messages wait for the restart. After this long the banner asks whether to restart now, keep waiting or cancel; it never restarts while the turns run, and still restarts as soon as they end. No limit waits until the turns end. A setting of this relay.</div>
         <div class="settings-row settings-gap">
           <label for="remote-relays-inbound-toggle">Accept prompts from other relays' agents</label>
           <input