@oar-sh/oar 0.9.8 → 0.9.10

package/server/public/index.html

@@ -572,6 +572,23 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+  /* An icon with a number beside it (📍 3) grows with the number. */
+  .header-icon-btn.has-count {
+    width: auto;
+    min-width: 32px;
+    padding: 0 7px;
+    gap: 4px;
+  }
+  .header-icon-count {
+    font-size: var(--fs-meta-sm);
+    font-variant-numeric: tabular-nums;
+  }
+  .header-icon-count:empty { display: none; }
+  /* The display rule above outranks the UA [hidden] rule, same trap as the
+     other [hidden] overrides in this file. */
+  #pinned-messages-btn[hidden] { display: none; }
+  /* Same trap: without this the ⋯ trigger stays drawn as a dead button. */
+  #chat-actions-menu-btn[hidden] { display: none; }
   #cli-dot {
     width: 12px;
     height: 12px;
@@ -853,7 +870,8 @@
   /* The conversation context menu (context-menu.mjs): right-click / long press. */
   .context-menu {
     position: fixed;
-    z-index: 1200;
+    /* Above every modal: the explorer (10001, 12400 as a CWD picker) opens one too. */
+    z-index: 13000;
     min-width: 200px;
     max-width: min(320px, calc(100vw - 8px));
     padding: 4px;
@@ -1427,7 +1445,27 @@
   }
   .empty-state .icon { font-size: 3rem; margin-bottom: 12px; }
   .empty-state h3 { font-size: var(--fs-core-chat-title); margin-bottom: 8px; color: var(--text); }
-  .empty-state p { font-size: var(--fs-meta-md); line-height: 1.5; }
+  .empty-state p { font-size: var(--fs-meta-md); line-height: 1.5; max-width: 36em; }
+  /* The actions of the "no conversation open" screen: Settings, New chat, the
+     list on the phone. Same shapes as .summary-btn and #new-conv-btn. */
+  .empty-state-actions {
+    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
+    margin-top: 18px;
+  }
+  .empty-state-btn {
+    border: 1px solid var(--border); background: var(--bg2); color: var(--text);
+    border-radius: 8px; height: 36px; padding: 0 14px; font-size: var(--fs-meta-md);
+    cursor: pointer;
+  }
+  .empty-state-btn:hover { border-color: var(--accent); color: var(--accent); }
+  .empty-state-btn.empty-state-btn-accent {
+    background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600;
+  }
+  .empty-state-btn.empty-state-btn-accent:hover { color: #000; opacity: 0.85; }
+  .empty-state-btn.empty-state-link {
+    border-color: transparent; background: transparent; color: var(--muted); text-decoration: underline;
+  }
+  .empty-state-btn.empty-state-link:hover { color: var(--accent); }
 
   .msg {
     display: flex;
@@ -1771,8 +1809,13 @@
     opacity: 0;
     pointer-events: none;
   }
+  /* `.msg-actions-revealed`: a tap on the bubble on a touch screen. The tap
+     also leaves an emulated :hover behind, but Chromium drops that hover at
+     the next scroll or layout change (seen on Linux), which left the row
+     untappable; the class holds the reveal until a tap lands elsewhere. */
   .msg-bubble:hover .msg-share-visibility-btn[data-hidden-from-shares="false"],
-  .msg-bubble:focus-within .msg-share-visibility-btn[data-hidden-from-shares="false"] {
+  .msg-bubble:focus-within .msg-share-visibility-btn[data-hidden-from-shares="false"],
+  .msg-bubble.msg-actions-revealed .msg-share-visibility-btn[data-hidden-from-shares="false"] {
     opacity: 1;
     pointer-events: auto;
   }
@@ -1780,7 +1823,46 @@
   .msg.user .msg-share-visibility-btn { color: var(--user-bubble-fg); opacity: 0.8; }
   .msg.user .msg-share-visibility-btn[data-hidden-from-shares="false"] { opacity: 0; }
   .msg.user .msg-bubble:hover .msg-share-visibility-btn[data-hidden-from-shares="false"],
-  .msg.user .msg-bubble:focus-within .msg-share-visibility-btn[data-hidden-from-shares="false"] { opacity: 0.8; }
+  .msg.user .msg-bubble:focus-within .msg-share-visibility-btn[data-hidden-from-shares="false"],
+  .msg.user .msg-bubble.msg-actions-revealed .msg-share-visibility-btn[data-hidden-from-shares="false"] { opacity: 0.8; }
+  /* The pin half of the same corner row: `Pin` is revealed like `Hide`, a
+     pinned message keeps its label and `Unpin` in view. */
+  .msg-share-visibility { flex-wrap: wrap; }
+  .msg-pinned-label {
+    color: var(--muted);
+    font-size: var(--fs-ui-chip);
+    white-space: nowrap;
+  }
+  .msg-pin-btn {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: var(--muted);
+    cursor: pointer;
+    font-size: var(--fs-ui-chip);
+    line-height: 1;
+    padding: 4px;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  .msg-pin-btn:hover:not(:disabled) { color: var(--accent); }
+  .msg-pin-btn:disabled { cursor: wait; opacity: 0.55; }
+  .msg-pin-btn[data-pinned="false"] {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .msg-bubble:hover .msg-pin-btn[data-pinned="false"],
+  .msg-bubble:focus-within .msg-pin-btn[data-pinned="false"],
+  .msg-bubble.msg-actions-revealed .msg-pin-btn[data-pinned="false"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .msg.user .msg-pinned-label,
+  .msg.user .msg-pin-btn { color: var(--user-bubble-fg); opacity: 0.8; }
+  .msg.user .msg-pin-btn[data-pinned="false"] { opacity: 0; }
+  .msg.user .msg-bubble:hover .msg-pin-btn[data-pinned="false"],
+  .msg.user .msg-bubble:focus-within .msg-pin-btn[data-pinned="false"],
+  .msg.user .msg-bubble.msg-actions-revealed .msg-pin-btn[data-pinned="false"] { opacity: 0.8; }
   .thinking-thoughts-panel {
     margin-bottom: 8px;
     min-width: 0;
@@ -2088,6 +2170,69 @@
     opacity: 1;
     transition: width 0.2s ease, background-size 0.2s ease, box-shadow 0.2s ease;
   }
+  /* Jump to the end of the transcript (transcript-jump-bottom-view.mjs).
+     Anchored to the composer's top edge, so it rides above the composer and
+     the background-task panel at whatever height they have, and above the
+     on-screen keyboard with them. Below the composer popups (z-index 30). */
+  #jump-to-bottom-btn {
+    position: absolute;
+    right: calc(20px + env(safe-area-inset-right, 0px));
+    bottom: calc(100% + 12px);
+    z-index: 25;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    background: var(--bg2);
+    color: var(--text);
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(6px);
+    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s, border-color 0.15s ease, color 0.15s ease;
+  }
+  #jump-to-bottom-btn.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s, border-color 0.15s ease, color 0.15s ease;
+  }
+  #jump-to-bottom-btn:hover,
+  #jump-to-bottom-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
+  .jump-to-bottom-icon {
+    font-size: 26px;
+    line-height: 1;
+    /* The arrowhead sits low in its em box. */
+    transform: translateY(-4px);
+  }
+  .jump-to-bottom-badge {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    box-sizing: border-box;
+    border-radius: 9px;
+    background: var(--accent);
+    color: #000;
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 18px;
+    text-align: center;
+  }
+  .jump-to-bottom-badge[hidden] { display: none; }
+  @media (prefers-reduced-motion: reduce) {
+    #jump-to-bottom-btn,
+    #jump-to-bottom-btn.visible { transition: none; }
+  }
   /* ── Context usage modal ── */
   .ctx-usage-model {
     font-size: 0.95rem;
@@ -2935,6 +3080,110 @@
   }
   .bg-task-stop:hover:not(:disabled) { border-color: #f85149; color: #f85149; }
   .bg-task-stop:disabled { opacity: 0.5; cursor: default; }
+  /* Sub-agent rows (reply bubble, viewer): the task panel's row grammar. The
+     title is a button that opens the agent's record in the viewer. */
+  .subagent-rows { display: flex; flex-direction: column; margin-top: 4px; }
+  .subagent-row-bubble { background: var(--bg3); border: 1px solid var(--border); }
+  .subagent-row-timeline { margin-top: 0; background: var(--bg3); border: 1px solid var(--border); }
+  .bg-task-desc.subagent-open {
+    display: block; -webkit-line-clamp: unset; background: none; border: 0; padding: 0; margin: 0;
+    font: inherit; color: var(--text); text-align: left; cursor: pointer;
+    text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
+  }
+  .bg-task-desc.subagent-open:hover, .bg-task-desc.subagent-open:focus-visible {
+    color: var(--accent); text-decoration-color: currentColor; outline: none;
+  }
+  .subagent-row-status.subagent-status-failed { color: #f85149; }
+  .subagent-row-status.subagent-status-completed { color: #3fb950; }
+  /* The sub-agent viewer: one agent's thoughts, tool calls and reply in order.
+     Below the file viewer, so a file opened from the record comes on top. */
+  #subagent-viewer-modal {
+    position: fixed; inset: 0; z-index: 10900; display: none;
+    align-items: center; justify-content: center;
+    background: rgba(0, 0, 0, 0.68); padding: 18px;
+  }
+  #subagent-viewer-modal.visible { display: flex; }
+  .subagent-viewer-dialog {
+    position: relative; width: min(980px, 100%); height: min(90vh, 1000px);
+    display: flex; flex-direction: column; overflow: hidden;
+    background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
+  }
+  .subagent-viewer-header {
+    display: flex; flex-direction: column; gap: 4px; padding: 10px 14px;
+    border-bottom: 1px solid var(--border); background: var(--bg3);
+  }
+  .subagent-viewer-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
+  #subagent-viewer-title { flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
+  #subagent-viewer-meta { color: var(--muted); font-size: var(--fs-meta-sm); overflow-wrap: anywhere; }
+  .subagent-viewer-btn {
+    flex-shrink: 0; border: 1px solid var(--border); background: var(--bg2); color: var(--text);
+    border-radius: 8px; height: 32px; padding: 0 10px; font-size: var(--fs-meta-sm); cursor: pointer;
+  }
+  .subagent-viewer-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+  #subagent-viewer-stop:hover:not(:disabled) { border-color: #f85149; color: #f85149; }
+  .subagent-viewer-btn:disabled { opacity: 0.5; cursor: default; }
+  .subagent-viewer-close { font-size: 1.2rem; line-height: 1; }
+  #subagent-viewer-parent {
+    align-self: flex-start; background: none; border: 0; padding: 0; color: var(--accent);
+    cursor: pointer; font-size: var(--fs-meta-sm);
+  }
+  #subagent-viewer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 14px 28px; }
+  #subagent-viewer-status { color: var(--muted); padding: 14px 0; font-size: var(--fs-meta-sm); }
+  #subagent-viewer-jump {
+    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
+    border: 1px solid var(--accent); background: var(--bg3); color: var(--accent);
+    border-radius: 999px; padding: 5px 14px; font-size: var(--fs-meta-sm); cursor: pointer;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
+  }
+  .sav-entry { margin: 6px 0; min-width: 0; }
+  .sav-entry details > summary {
+    cursor: pointer; display: flex; align-items: baseline; gap: 6px; min-width: 0; list-style: none;
+  }
+  .sav-entry details > summary::-webkit-details-marker { display: none; }
+  .sav-entry details > summary::before { content: '▸'; color: var(--muted); flex-shrink: 0; }
+  .sav-entry details[open] > summary::before { content: '▾'; }
+  .sav-call-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
+  .sav-kind { flex-shrink: 0; }
+  .sav-tool-name { font-weight: 600; flex-shrink: 0; }
+  .sav-summary-text, .sav-tool-summary {
+    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .sav-tool-summary { color: var(--muted); font-family: var(--mono, monospace); font-size: var(--fs-meta-sm); }
+  .sav-pre {
+    margin: 6px 0 0; padding: 8px 10px; max-height: 50vh; overflow: auto;
+    white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono, monospace);
+    font-size: var(--fs-meta-sm); background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
+  }
+  .sav-entry-tool_result { margin-left: 22px; color: var(--muted); font-size: var(--fs-meta-sm); }
+  .sav-entry-tool_result .sav-pre { color: var(--text); }
+  .sav-entry-tool_result.is-error .sav-result-label { color: #f85149; }
+  .sav-entry-thought { color: var(--muted); }
+  .sav-thought-body { padding: 4px 0 0 18px; color: var(--text); opacity: 0.85; }
+  .sav-text {
+    padding: 8px 12px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border);
+    overflow-wrap: anywhere;
+  }
+  .sav-entry.is-open .sav-text::after,
+  .sav-entry-thought.is-open .sav-thought-body::after {
+    content: '▍'; margin-left: 2px; animation: bg-task-pulse 1s ease-in-out infinite;
+  }
+  /* Markdown in the record reads like a reply bubble. */
+  .sav-text p, .sav-thought-body p { margin: 0 0 0.5em; }
+  .sav-text p:last-child, .sav-thought-body p:last-child { margin-bottom: 0; }
+  .sav-text ul, .sav-text ol, .sav-thought-body ul, .sav-thought-body ol { padding-left: 1.4em; margin: 0 0 0.5em; }
+  .sav-text h1, .sav-text h2, .sav-text h3 { margin: 0.5em 0 0.25em; font-size: 1em; }
+  .sav-text pre, .sav-thought-body pre { margin: 0.5em 0; border-radius: 8px; max-width: 100%; overflow-x: auto; }
+  .sav-text code:not(pre code), .sav-thought-body code:not(pre code) {
+    background: var(--inline-code-bg); padding: 2px 6px; border-radius: 4px; font-size: 0.875em; overflow-wrap: anywhere;
+  }
+  .sav-note { color: var(--muted); font-size: var(--fs-meta-sm); font-style: italic; }
+  .sav-note-failed { color: #f85149; }
+  .sav-muted { color: var(--muted); }
+  @media (max-width: 680px) {
+    #subagent-viewer-modal { padding: 0; }
+    .subagent-viewer-dialog { width: 100%; height: 100%; border: 0; border-radius: 0; }
+    #subagent-viewer-body { padding: 8px 10px 28px; }
+  }
   /* Preview cards: same row grammar as a background task, with a link-shaped
      primary action. Shared by the composer panel and the settings list. */
   .preview-row {
@@ -3056,6 +3305,102 @@
     overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
   }
   #chat-title-origin button.conv-origin-agent { padding: 3px 0; }
+  /* Relay events: the event rows the relay writes into a watcher's
+     conversation (never a bubble of the user's), the "watching" chip with its
+     list, and the "watched" badge. */
+  .msg.relay-event { align-self: stretch; max-width: 100%; align-items: stretch; }
+  .relay-event-row {
+    border: 1px dashed var(--border); border-left: 3px solid var(--accent);
+    border-radius: 6px; background: var(--bg2); color: var(--muted);
+    font-size: var(--fs-meta-xs); padding: 2px 8px;
+  }
+  .relay-event-row.relay-event-urgent { border-left-color: var(--warn); }
+  .relay-event-summary {
+    cursor: pointer; display: flex; gap: 8px; align-items: baseline; min-width: 0;
+    padding: 3px 0; list-style-position: inside;
+  }
+  .relay-event-tag {
+    flex: 0 0 auto; text-transform: uppercase; letter-spacing: 0.04em;
+    font-size: var(--fs-ui-chip); color: var(--accent);
+  }
+  .relay-event-urgent .relay-event-tag { color: var(--warn); }
+  .relay-event-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .relay-event-time { flex: 0 0 auto; }
+  .relay-event-lines { margin: 2px 0 4px; padding-left: 18px; }
+  .relay-event-line { margin: 2px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+  .relay-event-line.relay-event-question-asked,
+  .relay-event-line.relay-event-error,
+  .relay-event-line.relay-event-task-failed,
+  .relay-event-line.relay-event-stalled { color: var(--text, inherit); }
+  /* Agent exchanges: an agent's prompt and this session's reply folded into
+     one row in the event rows' look (agent-exchange-fold-view.mjs). The row
+     is the first child of the prompt's own node; closed, the prompt's bubble
+     and the exchange's other rows (the reply, the live bubble) are hidden.
+     The prompt's node spans the pane for the row; its bubble keeps a user
+     bubble's width. */
+  .msg.agent-exchange-head { align-self: stretch; max-width: 100%; }
+  .msg.agent-exchange-head > .msg-bubble { max-width: 82%; }
+  .msg.agent-exchange-head.agent-exchange-closed > .msg-bubble,
+  .msg.agent-exchange-head.agent-exchange-closed > .msg-label,
+  #messages > .msg.agent-exchange-member.agent-exchange-closed { display: none; }
+  .agent-exchange-row {
+    align-self: stretch; min-width: 0;
+    border: 1px dashed var(--border); border-left: 3px solid var(--accent);
+    border-radius: 6px; background: var(--bg2); color: var(--muted);
+    font-size: var(--fs-meta-xs); padding: 2px 8px;
+  }
+  .msg.agent-exchange-head:not(.agent-exchange-closed) > .agent-exchange-row { margin-bottom: 6px; }
+  .agent-exchange-summary {
+    cursor: pointer; display: flex; gap: 8px; align-items: baseline; min-width: 0;
+    padding: 3px 0; list-style: none;
+  }
+  .agent-exchange-summary::-webkit-details-marker { display: none; }
+  .agent-exchange-summary::before { content: '▸'; flex: 0 0 auto; color: var(--accent); }
+  .agent-exchange-row[open] > .agent-exchange-summary::before { content: '▾'; }
+  .agent-exchange-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .agent-exchange-status,
+  .agent-exchange-time { flex: 0 0 auto; }
+  .agent-exchange-status { color: var(--text, inherit); }
+  .agent-exchange-row.agent-exchange-failed,
+  .agent-exchange-row.agent-exchange-stopped { border-left-color: var(--warn); }
+  .agent-exchange-failed .agent-exchange-status,
+  .agent-exchange-stopped .agent-exchange-status { color: var(--warn); }
+  @media (max-width: 680px) {
+    .msg.agent-exchange-head > .msg-bubble { max-width: 95%; }
+  }
+  #chat-title-relay-events {
+    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px;
+    font-size: var(--fs-meta-xs); line-height: 1.2; color: var(--muted); position: relative;
+  }
+  #chat-title-relay-events[hidden] { display: none; }
+  .relay-watch-panel[hidden] { display: none; }
+  .relay-watch-chip {
+    font: inherit; color: var(--accent); background: transparent; cursor: pointer;
+    border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px;
+  }
+  .relay-watch-panel {
+    position: fixed; top: 0; left: 0; z-index: 60; overflow-y: auto; box-sizing: border-box;
+    min-width: min(260px, calc(100vw - 16px)); max-width: min(calc(100vw - 16px), 480px);
+    font-size: var(--fs-meta-xs); line-height: 1.2; color: var(--muted);
+    background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); padding: 6px;
+  }
+  .relay-watch-list { list-style: none; margin: 0; padding: 0; }
+  .relay-watch-item {
+    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center;
+    padding: 6px 4px; border-bottom: 1px solid var(--border);
+  }
+  .relay-watch-item:last-child { border-bottom: none; }
+  .relay-watch-what { color: var(--text, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .relay-watch-events { grid-column: 1; font-size: var(--fs-ui-chip); }
+  .relay-watch-unsubscribe {
+    grid-column: 2; grid-row: 1 / span 2; font: inherit; cursor: pointer;
+    color: var(--danger); background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;
+  }
+  .conv-watched-badge {
+    flex: 0 0 auto; font-size: var(--fs-ui-chip); color: var(--accent);
+    border: 1px solid var(--border); border-radius: 8px; padding: 0 5px;
+  }
   /* Agent sessions (Settings → Relays). The slider spans the row so a thumb
      has room to travel at phone width, with a taller touch area than the
      track itself. */
@@ -3226,28 +3571,62 @@
   .workspace-file-link { text-decoration: underline; }
   .workspace-file-link:hover { opacity: 0.9; }
 
+  /* The file viewer fills the screen. Its chrome (title, toolbar, meta line
+     above; position and prev/next below) floats over the content and slides
+     away when the controls are hidden. Text kinds keep the app background and
+     a readable column; media kinds go black edge to edge. */
   #file-preview-modal {
     position: fixed; inset: 0; z-index: 11000;
-    display: none; align-items: center; justify-content: center;
-    background: rgba(0, 0, 0, 0.65);
-    padding: 18px;
+    display: none;
+    background: var(--bg2);
+    --file-viewer-chrome-top: 0px;
   }
-  #file-preview-modal.visible { display: flex; }
+  #file-preview-modal.visible { display: block; }
+  #file-preview-modal.media-mode { background: #000; }
   .file-preview-dialog {
-    width: min(1100px, 100%);
-    max-height: min(90vh, 900px);
-    display: flex;
-    flex-direction: column;
-    background: var(--bg2);
-    border: 1px solid var(--border);
-    border-radius: 14px;
+    position: absolute; inset: 0;
     overflow: hidden;
   }
+  .file-preview-chrome {
+    position: absolute; left: 0; right: 0; z-index: 2;
+    transition: opacity 0.18s ease, transform 0.18s ease;
+  }
+  .file-preview-chrome-top {
+    top: 0;
+    padding-top: env(safe-area-inset-top);
+    background: color-mix(in srgb, var(--bg3) 92%, transparent);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border);
+  }
+  #file-preview-modal.media-mode .file-preview-chrome-top {
+    background: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.62) 70%, rgba(0, 0, 0, 0));
+    border-bottom: 0;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    color: #fff;
+    padding-bottom: 18px;
+  }
+  .file-preview-chrome-bottom {
+    bottom: 0;
+    display: flex; align-items: center; justify-content: center; gap: 14px;
+    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
+    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62));
+    color: #fff;
+  }
+  .file-preview-chrome-bottom[hidden] { display: none; }
+  #file-preview-modal.controls-hidden .file-preview-chrome { opacity: 0; pointer-events: none; }
+  #file-preview-modal.controls-hidden .file-preview-chrome-top { transform: translateY(-12px); }
+  #file-preview-modal.controls-hidden .file-preview-chrome-bottom { transform: translateY(12px); }
+  .file-preview-position {
+    min-width: 4ch; text-align: center;
+    font-size: var(--fs-meta-md);
+    font-variant-numeric: tabular-nums;
+  }
+  .file-preview-nav { font-size: 1.3rem; line-height: 1; padding: 4px 14px; }
   .file-preview-header {
     display: flex; align-items: center; justify-content: space-between; gap: 10px;
     padding: 12px 14px;
-    border-bottom: 1px solid var(--border);
-    background: var(--bg3);
   }
   .file-preview-title {
     min-width: 0;
@@ -3272,23 +3651,35 @@
   }
   .file-preview-toolbar {
     display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
-    padding: 10px 14px;
-    border-bottom: 1px solid var(--border);
+    padding: 0 14px 10px;
   }
   .file-preview-btn {
     border: 1px solid var(--border);
-    background: var(--bg3);
+    background: var(--bg2);
     color: var(--text);
     border-radius: 8px;
     padding: 6px 10px;
     font-size: var(--fs-meta-md);
     cursor: pointer;
+    text-decoration: none;
   }
   .file-preview-btn.active {
     border-color: var(--accent);
     color: var(--accent);
   }
   .file-preview-btn[hidden] { display: none; }
+  #file-preview-modal.media-mode .file-preview-btn,
+  #file-preview-modal.media-mode .file-preview-close {
+    background: rgba(255, 255, 255, 0.14);
+    border-color: rgba(255, 255, 255, 0.22);
+    color: #fff;
+  }
+  #file-preview-modal.media-mode .file-preview-btn.active {
+    border-color: var(--accent);
+    color: #fff;
+    background: color-mix(in srgb, var(--accent) 45%, transparent);
+  }
+  #file-preview-modal.media-mode .file-preview-meta { color: rgba(255, 255, 255, 0.72); }
   .file-preview-warning {
     display: none;
     margin-left: auto;
@@ -3297,16 +3688,30 @@
   }
   .file-preview-warning.visible { display: inline; }
   .file-preview-meta {
-    padding: 8px 14px;
+    padding: 0 14px 8px;
     font-size: var(--fs-meta-sm);
     color: var(--muted);
-    border-bottom: 1px dashed var(--border);
   }
+  .file-preview-meta:empty { display: none; }
+  /* Text starts below the chrome so the first line is readable with the
+     controls up; the chrome's height is measured into the variable. */
   .file-preview-body {
-    flex: 1;
-    min-height: 0;   /* prevents flex child from overflowing the dialog's max-height */
+    position: absolute; inset: 0;
     overflow: auto;
-    padding: 12px 14px;
+    -webkit-overflow-scrolling: touch;
+    padding: calc(var(--file-viewer-chrome-top) + 12px) 14px calc(28px + env(safe-area-inset-bottom));
+    /* Up and down scroll the text; sideways is left to the viewer (a swipe
+       to the next file). A block that scrolls sideways itself keeps that. */
+    touch-action: pan-y pinch-zoom;
+  }
+  .file-preview-markdown pre,
+  .file-preview-code pre,
+  .file-preview-markdown table { touch-action: pan-x pan-y; }
+  .file-preview-nav:disabled { opacity: 0.35; cursor: default; }
+  .file-preview-markdown,
+  .file-preview-body > .file-preview-code {
+    max-width: 56rem;
+    margin: 0 auto;
   }
   .file-preview-markdown {
     line-height: 1.5;
@@ -3369,42 +3774,71 @@
     user-select: none;
     -webkit-user-drag: none;
   }
-  .file-preview-video-shell {
+  .file-preview-video-shell,
+  .file-preview-audio-shell {
     display: flex;
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
     gap: 10px;
     width: 100%;
     height: 100%;
   }
   .file-preview-video {
-    width: 100%;
     max-width: 100%;
-    max-height: min(72vh, 100%);
+    max-height: 100%;
+    width: auto;
+    height: auto;
     background: #000;
-    border-radius: 10px;
   }
-  /* Image body: no scrollbar, fill remaining dialog space, dark letterbox bg */
+  /* The player takes the card's width; a percentage on the player alone
+     would resolve against a content-sized flex row and come out as zero. */
+  .file-preview-audio-shell .file-preview-card { width: min(560px, calc(100% - 28px)); }
+  .file-preview-audio-shell .file-preview-card-actions { width: 100%; }
+  .file-preview-audio-shell audio { width: 100%; }
+  /* Media and cards: no scrolling, the content is centred on the whole screen. */
   .file-preview-body.image-zoom-mode,
-  .file-preview-body.video-preview-mode {
-    flex: 1;
-    min-height: 0;          /* critical: prevents flex child from overflowing max-height */
+  .file-preview-body.video-preview-mode,
+  .file-preview-body.audio-preview-mode,
+  .file-preview-body.card-preview-mode {
     overflow: hidden;
     padding: 0;
     display: flex;
     flex-direction: column;
-    background: #0b0f14;
+    touch-action: none;
   }
   .file-preview-body.image-zoom-mode .file-preview-image {
     flex: 1;
-    min-height: 0;          /* same reason — lets the img's max-height:100% resolve */
-    background: #0b0f14;
+    min-height: 0;          /* lets the img's max-height:100% resolve */
+  }
+  .file-preview-body.image-zoom-mode .file-preview-image img { border-radius: 0; }
+  /* A file with nothing to show inline (a PDF, an unknown binary) or an audio
+     file: a card in the middle with the name, the size and what can be done. */
+  .file-preview-card {
+    margin: auto;
+    max-width: min(420px, calc(100% - 28px));
+    display: flex; flex-direction: column; align-items: center; gap: 8px;
+    text-align: center;
+    padding: 24px;
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    background: var(--bg3);
   }
-  .file-preview-body.video-preview-mode .file-preview-video-shell {
-    flex: 1;
-    min-height: 0;
-    padding: 12px 14px;
-    background: #0b0f14;
+  #file-preview-modal.media-mode .file-preview-card {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.16);
+    color: #fff;
+  }
+  .file-preview-card-icon { font-size: 3rem; line-height: 1; }
+  .file-preview-card-name {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: var(--fs-meta-md);
+    word-break: break-all;
   }
+  .file-preview-card-meta { font-size: var(--fs-meta-sm); color: var(--muted); }
+  #file-preview-modal.media-mode .file-preview-card-meta { color: rgba(255, 255, 255, 0.72); }
+  .file-preview-card-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
+  .file-preview-card-actions .file-preview-btn { padding: 10px 16px; }
   .msg-attachment-video-chip {
     display: inline-flex;
     align-items: center;
@@ -3421,6 +3855,11 @@
     color: var(--muted);
     margin-top: 10px;
   }
+  .file-preview-body.image-zoom-mode .file-preview-note,
+  .file-preview-body.video-preview-mode .file-preview-note {
+    margin: auto;
+    padding: 14px;
+  }
 
   /* Annotation editor. Clones the file-preview shell, but sits above it
      (z-index 11500) so annotating a sent image can layer over the lightbox. */
@@ -3916,6 +4355,28 @@
     border-color: var(--accent);
     color: var(--accent);
   }
+  /* The one main action of a dialog, in #new-conv-btn's colours. */
+  .summary-btn.summary-btn-accent {
+    background: var(--accent);
+    color: #000;
+    border-color: var(--accent);
+    font-weight: 600;
+  }
+  .summary-btn.summary-btn-accent:hover { opacity: 0.85; }
+  #new-conversation-open-settings[hidden] { display: none; }
+  /* New Chat with no provider ready: the note above the buttons. */
+  .new-conversation-setup-note {
+    margin-top: 14px;
+    padding: 10px 12px;
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--accent);
+    border-radius: 8px;
+    background: var(--bg3);
+    color: var(--text);
+    font-size: var(--fs-meta-md);
+    line-height: 1.5;
+  }
+  .new-conversation-setup-note[hidden] { display: none; }
   .summary-close {
     width: 32px;
     padding: 0;
@@ -4224,6 +4685,84 @@
     font-size: var(--fs-meta-sm);
     padding: 8px 6px;
   }
+  /* Pinned messages list (the summary modal, kind 'pinned-messages'). */
+  .pinned-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .pinned-row {
+    display: flex;
+    align-items: stretch;
+    border: 1px solid var(--border);
+    background: var(--bg3);
+    border-radius: 10px;
+    overflow: hidden;
+  }
+  .pinned-row:hover,
+  .pinned-row:focus-within {
+    border-color: var(--accent);
+  }
+  .pinned-row-jump {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    flex: 1;
+    min-width: 0;
+    padding: 10px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .pinned-row-meta {
+    font-size: var(--fs-meta-xs);
+    color: var(--muted);
+  }
+  .pinned-row-chip {
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    padding: 0 6px;
+    white-space: nowrap;
+  }
+  .pinned-row-preview {
+    font-size: var(--fs-meta-sm);
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+  }
+  .pinned-row-no-text {
+    color: var(--muted);
+    font-style: italic;
+  }
+  /* 44px: a thumb-sized target, always in view (no hover on a phone). */
+  .pinned-row-unpin {
+    appearance: none;
+    border: 0;
+    border-left: 1px solid var(--border);
+    background: transparent;
+    color: var(--muted);
+    cursor: pointer;
+    flex: 0 0 44px;
+    min-height: 44px;
+    font-size: var(--fs-ui-icon);
+    line-height: 1;
+  }
+  .pinned-row-unpin:hover {
+    color: var(--danger);
+    background: rgba(248, 81, 73, 0.08);
+  }
+  .pinned-empty {
+    color: var(--muted);
+    font-size: var(--fs-meta-sm);
+    padding: 8px 6px;
+  }
 
   #git-changes-modal,
   #git-diff-modal {
@@ -4819,6 +5358,43 @@
     font-size: var(--fs-meta-md);
     padding: 10px 6px;
   }
+  /* Explorer edits: the New-folder row at the top of the folder pane and the in-place rename. */
+  .repo-tree-summary, .repo-entry-row, .repo-card { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
+  .repo-inline-edit {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 8px;
+    margin: 0 0 10px;
+    padding: 8px 10px;
+    border: 1px solid var(--accent);
+    border-radius: 10px;
+    background: rgba(88, 166, 255, 0.08);
+  }
+  .repo-inline-edit input,
+  .repo-rename-input,
+  .repo-delete-confirm-input {
+    min-width: 0;
+    width: 100%;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg);
+    color: var(--text);
+    padding: 6px 8px;
+    font: inherit;
+    font-size: var(--fs-meta-md);
+  }
+  .repo-inline-edit input:focus, .repo-rename-input:focus, .repo-delete-confirm-input:focus { outline: none; border-color: var(--accent); }
+  .repo-inline-edit-error { grid-column: 1 / -1; color: var(--danger); font-size: var(--fs-meta-xs); min-height: 0; }
+  .repo-inline-edit-error:empty { display: none; }
+  .repo-rename-input { display: inline-block; width: auto; max-width: 100%; padding: 2px 6px; }
+  .repo-tree-summary .repo-rename-input { width: calc(100% - 2.2em); }
+  .repo-delete-confirm-label { display: block; margin: 10px 0 0; font-size: var(--fs-meta-md); color: var(--muted); }
+  .repo-delete-confirm-input { margin-top: 6px; }
+  @media (max-width: 720px) {
+    .repo-inline-edit { grid-template-columns: auto minmax(0, 1fr); }
+    .repo-inline-edit .repo-browser-btn { grid-column: span 1; }
+  }
 
   .msg-mode {
     display: inline-block; font-size: var(--fs-ui-chip); background: var(--bg3);
@@ -5131,6 +5707,10 @@
       pointer-events: auto;
     }
     #sidebar-resizer { display: none; }
+    /* The "no conversation open" actions stack on the phone. */
+    .empty-state { padding: 16px; }
+    .empty-state-actions { flex-direction: column; align-items: stretch; width: min(100%, 320px); }
+    .empty-state-btn { height: 40px; }
     #fullscreen-btn { display: inline-flex; align-items: center; justify-content: center; }
     #sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
     #sidebar-overlay.visible { opacity: 1; pointer-events: all; }
@@ -5304,12 +5884,14 @@
     }
     #pending-question-banner { font-size: var(--fs-ui-chip); padding: 3px 8px; }
     .header-icon-btn { width: 30px; height: 30px; border-radius: 8px; font-size: var(--fs-ui-icon); }
+    .header-icon-btn.has-count { min-width: 30px; padding: 0 6px; }
     #chat-actions-menu { min-width: 200px; }
     /* Slightly taller than desktop so the tap target barely changes; the row
        pitch still drops from 36px to 32px thanks to the tighter menu gap. */
     .chat-actions-menu-item,
     .chat-actions-menu-meta { min-height: 30px; }
     #input-area { padding: 2px 10px calc(6px + env(safe-area-inset-bottom, 0px)); }
+    #jump-to-bottom-btn { width: 44px; height: 44px; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(100% + 10px); }
     .input-row {
       display: flex;
       flex-wrap: wrap;
@@ -5541,6 +6123,15 @@
       flex: 1 1 calc(50% - 4px);
       min-height: 40px;
     }
+    /* The pin list has one action, Close: the full-width action row above
+       would leave its title no room. Title left, close button right. */
+    #summary-modal[data-kind="pinned-messages"] .summary-header-actions {
+      width: auto;
+    }
+    #summary-modal[data-kind="pinned-messages"] .summary-header-actions .summary-close {
+      flex: 0 0 auto;
+      min-width: 40px;
+    }
     .model-variant-row {
       min-height: 48px;
       padding: 10px 4px;
@@ -5813,10 +6404,11 @@
         </form>
       </div>
       <div id="chat-header-actions">
+        <button id="pinned-messages-btn" class="header-icon-btn has-count" type="button" title="Pinned messages" aria-label="Pinned messages" hidden>📍<span class="header-icon-count"></span></button>
         <button id="message-search-btn" class="header-icon-btn" onclick="openMessageSearchModal()" title="Search messages" aria-label="Search messages">🔍</button>
         <button id="context-btn" class="header-icon-btn" onclick="showContext()" title="Check current context" aria-label="Check current context">🧠</button>
         <div id="chat-actions-menu-wrap">
-          <button id="chat-actions-menu-btn" class="header-icon-btn" type="button" title="Conversation actions" aria-label="Conversation actions" aria-haspopup="menu" aria-expanded="false">⋯</button>
+          <button id="chat-actions-menu-btn" class="header-icon-btn" type="button" title="Menu" aria-label="Menu" aria-haspopup="menu" aria-expanded="false">⋯</button>
           <div id="chat-actions-menu" role="menu" hidden>
             <div id="chat-menu-pwa-version" class="chat-actions-menu-meta chat-actions-menu-meta-stacked" aria-hidden="true"><span class="chat-actions-menu-meta-primary">PWA shell version</span><span class="chat-actions-menu-meta-secondary" id="chat-menu-pwa-version-value">v?</span></div>
             <div id="chat-menu-queue-status" class="chat-actions-menu-meta chat-actions-menu-meta-stacked" aria-hidden="true"><div class="chat-actions-menu-meta-top"><span class="chat-actions-menu-meta-primary">Queue</span><button id="chat-menu-empty-queue" class="chat-actions-menu-meta-label" type="button">🚮 Empty queue</button></div><span class="chat-actions-menu-meta-secondary" id="chat-menu-queue-status-value">pending=?, processing=?, parked=?</span></div>
@@ -5843,13 +6435,15 @@
       <button id="pending-question-banner" onclick="openPendingQuestionFromBanner()" title="Open pending question"></button>
     </div>
     <div id="messages">
+      <!-- Replaced on start by conversation-view.js (no-conversation-state.mjs),
+           which knows whether a provider is ready and whether chats exist. -->
       <div class="empty-state">
         <div class="icon">💬</div>
-        <h3>No conversation selected</h3>
-        <p>Click <b>+ New Conversation</b> to start chatting with your Copilot CLI</p>
+        <h3>No conversation open</h3>
       </div>
     </div>
     <div id="input-area">
+      <button id="jump-to-bottom-btn" type="button" title="Jump to the latest message" aria-label="Jump to the latest message"><span class="jump-to-bottom-icon" aria-hidden="true">⌄</span><span class="jump-to-bottom-badge" hidden></span></button>
       <div id="offline-banner">⚠️ CLI is offline — messages will queue until it reconnects</div>
       <div id="model-banner"></div>
       <div id="usage-limit-banner" role="status" aria-live="polite" hidden></div>
@@ -5925,6 +6519,7 @@
       <button id="repo-toggle-hidden-btn" class="repo-browser-btn" onclick="toggleRepoBrowserHidden()">Hidden: Off</button>
       <button id="repo-toggle-heavy-btn" class="repo-browser-btn" onclick="toggleRepoBrowserHeavy()">Heavy: Off</button>
       <button class="repo-browser-btn" onclick="refreshRepoBrowser()">Refresh</button>
+      <button id="repo-new-folder-btn" class="repo-browser-btn" onclick="startRepoNewFolder()" title="Create a folder inside the open folder">📁+ New folder</button>
     </div>
     <div class="repo-browser-layout">
       <section class="repo-pane">
@@ -6114,6 +6709,17 @@
           >
         </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 class="settings-row" style="margin-top: 12px; margin-bottom: 0;">
+          <label for="subagent-record-retention-select">Keep sub-agent tool output</label>
+          <select id="subagent-record-retention-select" onchange="updateSubagentRecordRetentionSetting(this.value)" aria-label="Keep sub-agent tool output">
+            <option value="7">7 days</option>
+            <option value="14">14 days</option>
+            <option value="30">30 days</option>
+            <option value="90" selected>90 days</option>
+            <option value="0">Always</option>
+          </select>
+        </div>
+        <div class="settings-help" style="margin-top: 6px;">A sub-agent's record keeps every tool call's full input and the first 4 KB of each result. After this many days the relay removes them from finished agents, once a day; the thoughts, the reply, notes and the one-line summary of each call stay. Always keeps everything.</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>
@@ -6973,8 +7579,13 @@
         <select id="new-conversation-size-select"></select>
         <div id="new-conversation-size-status" style="margin-top:8px;font-size:0.78rem;color:var(--muted);">Image size used for generated outputs in this chat.</div>
       </div>
+      <!-- No provider known to be ready (journal-view.js): the note says so and
+           Settings is the main button; Start stays as "anyway", because the
+           Copilot signal can be wrong. -->
+      <div id="new-conversation-setup-note" class="new-conversation-setup-note" role="status" hidden></div>
       <div class="summary-modal-actions">
         <button type="button" class="summary-btn" onclick="closeNewConversationModelModal()">Cancel</button>
+        <button id="new-conversation-open-settings" type="button" class="summary-btn summary-btn-accent" hidden>Open Settings → Providers</button>
         <button id="new-conversation-model-confirm" type="button" class="summary-btn" onclick="confirmNewConversationModel()">Start chat</button>
       </div>
     </div>
@@ -7025,25 +7636,55 @@
   </div>
 </div>
 
-<!-- Workspace file preview modal -->
+<!-- Sub-agent viewer: one sub-agent's thoughts, tool calls with their results
+     and reply, in order, live while it runs (subagent-viewer.mjs). -->
+<div id="subagent-viewer-modal" aria-hidden="true">
+  <div class="subagent-viewer-dialog" role="dialog" aria-modal="true" aria-labelledby="subagent-viewer-title">
+    <div class="subagent-viewer-header">
+      <button id="subagent-viewer-parent" type="button" hidden></button>
+      <div class="subagent-viewer-title-row">
+        <span aria-hidden="true">🤖</span>
+        <h2 id="subagent-viewer-title">Sub-agent</h2>
+        <button id="subagent-viewer-stop" class="subagent-viewer-btn" type="button" hidden>Stop</button>
+        <button class="subagent-viewer-btn subagent-viewer-close" type="button" aria-label="Close">×</button>
+      </div>
+      <div id="subagent-viewer-meta"></div>
+    </div>
+    <div id="subagent-viewer-body">
+      <div id="subagent-viewer-timeline"></div>
+      <div id="subagent-viewer-status"></div>
+    </div>
+    <button id="subagent-viewer-jump" type="button" hidden>New entries ↓</button>
+  </div>
+</div>
+
+<!-- Fullscreen file viewer. The content fills the screen; the chrome bars
+     float over it and a tap on the content shows or hides them. -->
 <div id="file-preview-modal" aria-hidden="true">
   <div class="file-preview-dialog" role="dialog" aria-modal="true" aria-label="File preview">
-    <div class="file-preview-header">
-      <div id="file-preview-title" class="file-preview-title">File preview</div>
-      <button class="file-preview-close" onclick="closeFilePreview()" aria-label="Close preview">×</button>
+    <div id="file-preview-body" class="file-preview-body"></div>
+    <div id="file-preview-chrome-top" class="file-preview-chrome file-preview-chrome-top">
+      <div class="file-preview-header">
+        <div id="file-preview-title" class="file-preview-title">File preview</div>
+        <button class="file-preview-close" onclick="closeFilePreview()" aria-label="Close preview">×</button>
+      </div>
+      <div class="file-preview-toolbar">
+        <button id="file-preview-back" class="file-preview-btn" type="button" onclick="goBackFilePreview()" hidden disabled>← Back</button>
+        <button id="file-preview-mode-preview" class="file-preview-btn active" onclick="setFilePreviewMode('preview')">Preview</button>
+        <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>
     </div>
-    <div class="file-preview-toolbar">
-      <button id="file-preview-back" class="file-preview-btn" type="button" onclick="goBackFilePreview()" hidden disabled>← Back</button>
-      <button id="file-preview-mode-preview" class="file-preview-btn active" onclick="setFilePreviewMode('preview')">Preview</button>
-      <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 id="file-preview-chrome-bottom" class="file-preview-chrome file-preview-chrome-bottom" hidden>
+      <button id="file-preview-prev" class="file-preview-btn file-preview-nav" type="button" aria-label="Previous file">‹</button>
+      <span id="file-preview-position" class="file-preview-position"></span>
+      <button id="file-preview-next" class="file-preview-btn file-preview-nav" type="button" aria-label="Next file">›</button>
     </div>
-    <div id="file-preview-meta" class="file-preview-meta"></div>
-    <div id="file-preview-body" class="file-preview-body"></div>
   </div>
 </div>