@oar-sh/oar 0.9.8 → 0.9.9

package/server/public/app/viewer-tap.mjs

@@ -0,0 +1,112 @@
+// Telling a tap from everything else that happens on the viewer's content.
+//
+// A tap is one pointer that goes down and comes up in place, quickly. A drag
+// (panning a zoomed image, selecting text), a pinch (a second pointer) and a
+// long press are not taps. Neither is the first half of a double tap: the
+// tap is reported only once the double-tap window has passed without a
+// second pointer going down, so a double tap zooms without first flipping
+// the controls. Taps on things that act by themselves (links, buttons, a
+// player's own controls) are left to them.
+
+export const TAP_MAX_MOVE_PX = 10;
+export const TAP_MAX_DURATION_MS = 500;
+export const DOUBLE_TAP_WINDOW_MS = 300;
+
+const INTERACTIVE_SELECTOR = 'a, button, input, textarea, select, summary, video, audio, [contenteditable], [data-no-viewer-tap]';
+
+/**
+ * Pure tap recognizer fed with pointer events of the shape
+ * `{ type, pointerId, clientX, clientY, timeStamp, target }`. Calls `onTap`
+ * with the final pointer position, `isInteractive(target)` says whether a
+ * target handles taps itself (defaults to the usual controls), and
+ * `hasSelection()` lets a text selection that ended under the pointer count
+ * as a drag rather than a tap.
+ */
+export function createTapRecognizer({
+  onTap,
+  isInteractive = defaultIsInteractive,
+  hasSelection = () => false,
+  setTimeoutImpl = setTimeout,
+  clearTimeoutImpl = clearTimeout,
+} = {}) {
+  const state = {
+    active: null,        // the pointer being watched: { id, x, y, at }
+    pointers: 0,         // pointers currently down
+    pending: null,       // timer holding a tap until the double-tap window passes
+    cancelled: false,    // a second pointer joined or the pointer moved too far
+  };
+
+  const dropPending = () => {
+    if (state.pending === null) return;
+    clearTimeoutImpl(state.pending);
+    state.pending = null;
+  };
+
+  return {
+    handle(event) {
+      const type = String(event?.type || '');
+      if (type === 'pointerdown') {
+        state.pointers += 1;
+        // A second pointer down while a tap waits to be reported: the start
+        // of a double tap (or a pinch); either way not a single tap.
+        if (state.pending !== null) {
+          dropPending();
+          state.cancelled = true;
+          state.active = null;
+          return;
+        }
+        if (state.pointers > 1) {
+          state.cancelled = true;
+          state.active = null;
+          return;
+        }
+        if (isInteractive(event.target)) {
+          state.active = null;
+          return;
+        }
+        state.cancelled = false;
+        state.active = { id: event.pointerId, x: event.clientX, y: event.clientY, at: event.timeStamp };
+        return;
+      }
+      if (type === 'pointermove') {
+        if (!state.active || event.pointerId !== state.active.id) return;
+        if (Math.hypot(event.clientX - state.active.x, event.clientY - state.active.y) > TAP_MAX_MOVE_PX) {
+          state.cancelled = true;
+          state.active = null;
+        }
+        return;
+      }
+      if (type === 'pointerup' || type === 'pointercancel') {
+        state.pointers = Math.max(0, state.pointers - 1);
+        const active = state.active;
+        if (!active || event.pointerId !== active.id) {
+          if (state.pointers === 0) state.cancelled = false;
+          return;
+        }
+        state.active = null;
+        if (type === 'pointercancel' || state.cancelled) { state.cancelled = false; return; }
+        if (event.timeStamp - active.at > TAP_MAX_DURATION_MS) return;
+        if (Math.hypot(event.clientX - active.x, event.clientY - active.y) > TAP_MAX_MOVE_PX) return;
+        if (hasSelection()) return;
+        const point = { clientX: event.clientX, clientY: event.clientY };
+        dropPending();
+        state.pending = setTimeoutImpl(() => {
+          state.pending = null;
+          onTap?.(point);
+        }, DOUBLE_TAP_WINDOW_MS);
+      }
+    },
+    /** Forget a tap in flight, e.g. when the content is replaced. */
+    cancel() {
+      dropPending();
+      state.active = null;
+      state.cancelled = false;
+      state.pointers = 0;
+    },
+  };
+}
+
+export function defaultIsInteractive(target) {
+  if (!target || typeof target.closest !== 'function') return false;
+  return Boolean(target.closest(INTERACTIVE_SELECTOR));
+}

package/server/public/index.html

@@ -572,6 +572,21 @@
     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; }
   #cli-dot {
     width: 12px;
     height: 12px;
@@ -1771,8 +1786,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 +1800,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;
@@ -3226,28 +3285,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 +3365,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 +3402,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 +3488,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 +3569,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. */
@@ -4224,6 +4377,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 {
@@ -5304,6 +5535,7 @@
     }
     #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. */
@@ -5541,6 +5773,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,6 +6054,7 @@
         </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">
@@ -7025,25 +7267,33 @@
   </div>
 </div>
 
-<!-- Workspace file preview modal -->
+<!-- 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>
 

package/server/repositories/message-pin-statements.mjs

@@ -0,0 +1,39 @@
+'use strict';
+
+// Pinned messages: the pinned_at column detection and its SQL in one place.
+// The statements are null on a database the 0008 migration has not reached
+// yet; every caller treats that as "no pins".
+export function createMessagePinStatements(db) {
+  const messageColumns = new Set(
+    db.prepare(`PRAGMA table_info(messages)`).all().map((column) => String(column?.name || '').trim()),
+  );
+  const messagesSupportPins = messageColumns.has('pinned_at');
+  if (!messagesSupportPins) {
+    return {
+      messagesSupportPins,
+      setMessagePinnedAt: null,
+      listPinnedMessages: null,
+      countPinnedMessages: null,
+    };
+  }
+  return {
+    messagesSupportPins,
+    setMessagePinnedAt: db.prepare(`
+      UPDATE messages
+      SET pinned_at = ?
+      WHERE id = ? AND conversation_id = ?
+    `),
+    // Conversation order, not pin order: the list reads like a table of contents.
+    listPinnedMessages: db.prepare(`
+      SELECT id, role, text, mode, attachments, timestamp, pinned_at, hidden_from_shares
+      FROM messages
+      WHERE conversation_id = ? AND pinned_at IS NOT NULL
+      ORDER BY timestamp ASC
+    `),
+    countPinnedMessages: db.prepare(`
+      SELECT COUNT(*) AS cnt
+      FROM messages
+      WHERE conversation_id = ? AND pinned_at IS NOT NULL
+    `),
+  };
+}

package/server/repositories/message-repository.mjs

@@ -1,10 +1,12 @@
 'use strict';
 
 import { createShareVisibilityStatements } from './share-visibility-statements.mjs';
+import { createMessagePinStatements } from './message-pin-statements.mjs';
 import { sessionWorkerProviderSqlList } from '../../shared/provider-routing.mjs';
 
 export function createMessageRepository(db) {
     const shareVisibility = createShareVisibilityStatements(db);
+    const messagePins = createMessagePinStatements(db);
     const queueHasImageOperationId = db.prepare(`PRAGMA table_info(queue)`).all()
         .some((column) => column.name === 'image_operation_id');
     // A turn paused at the Claude usage limit (usage-limit-pause-service): a
@@ -27,6 +29,9 @@ export function createMessageRepository(db) {
         getSharedMessages: shareVisibility.getSharedMessages,
         getMessageByConversation: db.prepare(`SELECT * FROM messages WHERE id = ? AND conversation_id = ? LIMIT 1`),
         setMessageShareVisibility: shareVisibility.setMessageShareVisibility,
+        setMessagePinnedAt: messagePins.setMessagePinnedAt,
+        listPinnedMessages: messagePins.listPinnedMessages,
+        countPinnedMessages: messagePins.countPinnedMessages,
         getLatestConversationModel: db.prepare(`SELECT model FROM messages WHERE conversation_id = ? AND model IS NOT NULL AND model != '' ORDER BY timestamp DESC LIMIT 1`),
         getRecentMessagesDesc: db.prepare(`SELECT id, role, text, timestamp FROM messages WHERE conversation_id = ? ORDER BY timestamp DESC LIMIT ?`),
         insertMsg:      db.prepare(`INSERT INTO messages (id, conversation_id, role, text, model, mode, attachments, timestamp, model_requested, model_actual, model_origin) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`),