@oar-sh/oar 0.9.8 → 0.9.10

package/server/public/app/attachments-view.js

@@ -14,6 +14,10 @@ import {
   getConversationCurrentWorkspaceRootPath,
   IS_SHARED_VIEW,
   conversations,
+  openSummaryModal,
+  closeSummaryModal,
+  renderSummaryModalContent,
+  setSummaryModalLoading,
 } from './store.js';
 import { openAnnotateEditor } from './annotate-editor.js';
 import {
@@ -25,7 +29,21 @@ import {
   loadDrivesRoots,
   loadDriveChildren,
   loadSessionRootTree,
+  createExplorerFolder,
+  renameExplorerEntry,
+  deleteExplorerEntry,
 } from './api-client.js';
+import { MENU_SEPARATOR, bindLongPress, openContextMenu } from './context-menu.mjs';
+import {
+  childPathOf,
+  descendantsOf,
+  dropPathsBelow,
+  entryNameOf,
+  isSameOrBelow,
+  parentPathOf,
+  rewritePathPrefix,
+  rewritePathSet,
+} from './explorer-edit-state.mjs';
 import {
   extractPastedFiles,
   extractDroppedFiles,
@@ -49,9 +67,21 @@ import {
   copyReferenceTokenToClipboard,
   eventClosest,
 } from './router.js';
+import { buildDownloadLink } from './file-version.mjs';
 import { markdownHeadingId, resolveFilePreviewLink } from './file-preview-navigation.mjs';
 import { openExternalNavigation } from './external-link-policy.mjs';
 import { attachCodeCopyButtons } from './code-copy.mjs';
+import { createControlsState } from './viewer-controls-state.mjs';
+import { createTapRecognizer } from './viewer-tap.mjs';
+import { createSwipeRecognizer } from './viewer-gestures.mjs';
+import { createViewerHistory } from './viewer-history.mjs';
+import {
+  galleryAt,
+  galleryFromFolder,
+  galleryNeighborIndex,
+  galleryNeighbors,
+  galleryPositionLabel,
+} from './viewer-gallery.mjs';
 import {
   deepestExistingAncestor,
   planRepoRehydration,
@@ -76,6 +106,15 @@ function isVideoMimeType(mimeType) {
   return String(mimeType || '').toLowerCase().startsWith('video/');
 }
 
+function isAudioMimeType(mimeType) {
+  return String(mimeType || '').toLowerCase().startsWith('audio/');
+}
+
+// Kinds whose bytes arrive as text in the preview payload and read in a
+// column; the others are shown edge to edge on black, or as a card.
+const TEXT_PREVIEW_KINDS = new Set(['markdown', 'code', 'text']);
+const DARK_PREVIEW_KINDS = new Set(['image', 'video', 'audio']);
+
 function normalizeVideoPreviewOptions(options = {}) {
   const startSeconds = Math.max(0, Number(options?.startSeconds ?? options?.startAtSeconds ?? 0) || 0);
   const preload = String(options?.preload || 'metadata').toLowerCase();
@@ -195,17 +234,18 @@ export function renderAttachmentMarkup(attachments, { messageId = '' } = {}) {
               : ''}
           </div>`
         : '';
-      if ((isImage || isVideo) && rawUrl) {
-        const jsName = escHtml(JSON.stringify(att?.name || 'attachment'));
-        const jsUrl = escHtml(JSON.stringify(rawUrl));
-        const jsType = escHtml(JSON.stringify(att?.type || 'image/jpeg'));
-        const openHandler = `openUploadedAttachmentViewer(${jsName},${jsUrl},${jsType})`;
+      const isAudio = isAudioMimeType(att?.type);
+      if ((isImage || isVideo || isAudio) && rawUrl) {
+        // Opened by the conversation's click handler (see
+        // viewer-chat-gallery.mjs), which also finds the other media around it.
+        const mediaKind = isVideo ? 'video' : (isAudio ? 'audio' : 'image');
+        const chip = isVideo ? '🎞️' : '🎵';
         return `
-          <div class="msg-attachment msg-attachment-${isVideo ? 'video' : 'image'}">
-            ${isVideo
-              ? `<div class="msg-attachment-video-chip">🎞️</div>`
-              : `<img src="${escHtml(rawUrl)}" alt="${name}" loading="eager" decoding="async" onclick="${openHandler}">`}
-            <div class="msg-attachment-meta"><a href="#" onclick="${openHandler};return false;">${name}</a> · ${type}${sizeText} · <a href="#" onclick="${openHandler};return false;">open</a>${continuityActions}</div>
+          <div class="msg-attachment msg-attachment-${mediaKind}" data-media-name="${name}" data-media-url="${escHtml(rawUrl)}" data-media-type="${escHtml(att?.type || 'image/jpeg')}">
+            ${isImage
+              ? `<img src="${escHtml(rawUrl)}" alt="${name}" loading="eager" decoding="async">`
+              : `<div class="msg-attachment-video-chip">${chip}</div>`}
+            <div class="msg-attachment-meta"><a href="#" data-media-open>${name}</a> · ${type}${sizeText} · <a href="#" data-media-open>open</a>${continuityActions}</div>
           </div>`;
       }
       if (rawUrl) {
@@ -610,8 +650,10 @@ function updateFilePreviewUiState() {
   const payload = filePreviewState.payload;
   const isMarkdown = payload?.kind === 'markdown';
   const isUpload = filePreviewState.source === 'upload';
-  previewBtn.style.display = isUpload ? 'none' : '';
-  rawBtn.style.display = isUpload ? 'none' : '';
+  // Preview/Raw only mean something for text; media has no raw form to show.
+  const hasTextModes = !isUpload && TEXT_PREVIEW_KINDS.has(payload?.kind);
+  previewBtn.style.display = hasTextModes ? '' : 'none';
+  rawBtn.style.display = hasTextModes ? '' : 'none';
   previewBtn.classList.toggle('active', filePreviewState.mode === 'preview');
   rawBtn.classList.toggle('active', filePreviewState.mode === 'raw');
   htmlBtn.style.display = (!isUpload && isMarkdown && filePreviewState.mode === 'preview') ? 'inline-block' : 'none';
@@ -625,6 +667,14 @@ function updateFilePreviewUiState() {
   if (annotateBtn) annotateBtn.hidden = !filePreviewSupportsAnnotation();
   const copyBtn = document.getElementById('file-preview-copy-btn');
   if (copyBtn) copyBtn.hidden = payload?.kind !== 'image';
+  const gallery = filePreviewState.gallery;
+  const bottomChrome = document.getElementById('file-preview-chrome-bottom');
+  if (bottomChrome) {
+    bottomChrome.hidden = !gallery;
+    document.getElementById('file-preview-position').textContent = galleryPositionLabel(gallery);
+    document.getElementById('file-preview-prev').disabled = galleryNeighborIndex(gallery, -1) === -1;
+    document.getElementById('file-preview-next').disabled = galleryNeighborIndex(gallery, 1) === -1;
+  }
 }
 
 /**
@@ -681,6 +731,7 @@ function snapshotFilePreviewState() {
     error: filePreviewState.error,
     payload: filePreviewState.payload,
     viewerOptions: filePreviewState.viewerOptions,
+    gallery: filePreviewState.gallery,
     scrollTop: Number(bodyEl?.scrollTop || 0),
   };
 }
@@ -728,25 +779,92 @@ function teardownImageZoom() {
   if (bodyEl) bodyEl.classList.remove('image-zoom-mode');
 }
 
-function teardownVideoPreview() {
-  const video = videoPreview.videoEl;
-  const onLoadedMetadata = videoPreview.onLoadedMetadata;
-  const onError = videoPreview.onError;
-  const onCanPlay = videoPreview.onCanPlay;
-  if (video) {
-    if (onLoadedMetadata) video.removeEventListener('loadedmetadata', onLoadedMetadata);
-    if (onError) video.removeEventListener('error', onError);
-    if (onCanPlay) video.removeEventListener('canplay', onCanPlay);
+function teardownMediaPreview() {
+  const media = mediaPreview.el;
+  if (media) {
+    for (const [eventName, handler] of mediaPreview.listeners) media.removeEventListener(eventName, handler);
     try {
-      video.pause();
+      media.pause();
     } catch {}
   }
-  videoPreview.videoEl = null;
-  videoPreview.onLoadedMetadata = null;
-  videoPreview.onError = null;
-  videoPreview.onCanPlay = null;
+  mediaPreview.el = null;
+  mediaPreview.listeners = [];
+  viewerControls.setPlaying(false);
   const bodyEl = document.getElementById('file-preview-body');
-  if (bodyEl) bodyEl.classList.remove('video-preview-mode');
+  if (bodyEl) bodyEl.classList.remove('video-preview-mode', 'audio-preview-mode', 'card-preview-mode');
+}
+
+function listenMediaPreview(media, eventName, handler, options) {
+  media.addEventListener(eventName, handler, options);
+  mediaPreview.listeners.push([eventName, handler]);
+}
+
+// The hovering controls fade while a file plays; the player's own events
+// drive that, so a pause from the native controls brings them back.
+function followMediaPlayback(media) {
+  listenMediaPreview(media, 'play', () => viewerControls.setPlaying(true));
+  listenMediaPreview(media, 'pause', () => viewerControls.setPlaying(false));
+  listenMediaPreview(media, 'ended', () => viewerControls.setPlaying(false));
+}
+
+const viewerControls = createControlsState({
+  onChange: (visible) => {
+    document.getElementById('file-preview-modal')?.classList.toggle('controls-hidden', !visible);
+  },
+});
+const viewerTap = createTapRecognizer({
+  onTap: () => viewerControls.toggle(),
+  hasSelection: () => String(window.getSelection?.()?.toString() || '').length > 0,
+});
+
+/** The chrome's height goes into a CSS variable so text starts below it. */
+function syncViewerChromeHeight() {
+  const modal = document.getElementById('file-preview-modal');
+  const chromeTop = document.getElementById('file-preview-chrome-top');
+  if (!modal || !chromeTop || !modal.classList.contains('visible')) return;
+  modal.style.setProperty('--file-viewer-chrome-top', `${Math.ceil(chromeTop.getBoundingClientRect().height)}px`);
+}
+
+function showFilePreviewModal() {
+  const modal = document.getElementById('file-preview-modal');
+  const wasVisible = modal.classList.contains('visible');
+  modal.classList.add('visible');
+  modal.setAttribute('aria-hidden', 'false');
+  if (!wasVisible) {
+    viewerControls.reset();
+    viewerTap.cancel();
+    viewerHistory.opened();
+    // The composer keeps the keyboard otherwise: keys would type into it
+    // under the viewer instead of moving through the gallery.
+    const active = document.activeElement;
+    if (active && active !== document.body && !modal.contains(active)) active.blur?.();
+  }
+}
+
+const viewerHistory = createViewerHistory({
+  history: window.history,
+  onBack: () => closeFilePreview(),
+});
+window.addEventListener('popstate', () => viewerHistory.onPopState());
+
+function setViewerMediaMode(kind) {
+  document.getElementById('file-preview-modal')?.classList.toggle('media-mode', DARK_PREVIEW_KINDS.has(kind));
+}
+
+function fileCardMarkup({ icon, name, meta, actions }) {
+  return `
+    <div class="file-preview-card">
+      <div class="file-preview-card-icon">${icon}</div>
+      <div class="file-preview-card-name">${escHtml(name)}</div>
+      ${meta ? `<div class="file-preview-card-meta">${escHtml(meta)}</div>` : ''}
+      <div class="file-preview-card-actions">${actions}</div>
+    </div>`;
+}
+
+function downloadAnchorMarkup(download, plainName) {
+  const href = String(download?.href || '');
+  if (!href) return '';
+  return `<a class="file-preview-btn" href="${escHtml(href)}" download="${escHtml(download.downloadName || plainName)}">Download</a>`;
 }
 
 function setupImageZoom(container) {
@@ -798,11 +916,9 @@ let imgZoom = {
   baseW: 0,
   baseH: 0,
 };
-let videoPreview = {
-  videoEl: null,
-  onLoadedMetadata: null,
-  onError: null,
-  onCanPlay: null,
+let mediaPreview = {
+  el: null,
+  listeners: [],
 };
 const IMG_ZOOM_MIN_FLOOR = 0.05;
 const IMG_ZOOM_MAX = 8;
@@ -812,6 +928,11 @@ function _isAtImgZoomMin() {
   return Math.abs(imgZoom.scale - imgZoom.minScale) <= IMG_ZOOM_EPS;
 }
 
+/** True unless an image is zoomed in, when a sideways drag pans it instead. */
+function imageZoomAtRest() {
+  return !imgZoom.container || _isAtImgZoomMin();
+}
+
 /**
  * The image's laid-out size at scale 1, measured once with the zoom styles
  * removed. Deriving it from the live rect instead would be circular now that
@@ -1084,10 +1205,19 @@ function _imgZoomOnResize() {
   _recomputeImgZoomMinScale({ resetToMin: _isAtImgZoomMin() });
 }
 
+function uploadPreviewKind(mimeType) {
+  const type = String(mimeType || '').toLowerCase();
+  if (type.startsWith('image/')) return 'image';
+  if (isVideoMimeType(type)) return 'video';
+  if (isAudioMimeType(type)) return 'audio';
+  if (type === 'application/pdf') return 'pdf';
+  return 'binary';
+}
+
 export function openUploadedAttachmentViewer(name, contentUrl, mimeType, options = {}) {
-  const isImage = String(mimeType || '').startsWith('image/');
-  const isVideo = isVideoMimeType(mimeType);
   const viewerOptions = normalizeVideoPreviewOptions(options);
+  filePreviewLoadSeq += 1;
+  filePreviewHistory.length = 0;
   setFilePreviewState({
     path: String(name || 'attachment'),
     source: 'upload',
@@ -1096,18 +1226,34 @@ export function openUploadedAttachmentViewer(name, contentUrl, mimeType, options
     loading: false,
     error: '',
     viewerOptions,
+    gallery: options?.gallery || null,
     payload: {
-      kind: isImage ? 'image' : (isVideo ? 'video' : 'binary'),
+      kind: uploadPreviewKind(mimeType),
       name: String(name || 'attachment'),
       rawUrl: String(contentUrl || ''),
       size: 0,
       contentType: String(mimeType || '').toLowerCase(),
     },
   });
-  const modal = document.getElementById('file-preview-modal');
-  modal.classList.add('visible');
-  modal.setAttribute('aria-hidden', 'false');
+  showFilePreviewModal();
   renderFilePreview();
+  prefetchGalleryNeighbors();
+}
+
+/**
+ * Open one item of a gallery: an uploaded attachment by its address, a
+ * drive or workspace file by its path. The gallery rides along so the
+ * viewer can move on from there.
+ */
+export function openGalleryItem(item, gallery) {
+  if (!item) return Promise.resolve(false);
+  const source = item.source || gallery?.source || 'workspace';
+  if (source === 'upload') {
+    openUploadedAttachmentViewer(item.name, item.href, item.mime, { gallery });
+    return Promise.resolve(true);
+  }
+  const open = source === 'workspace' ? openWorkspaceFilePreview : openDriveFilePreview;
+  return open(item.path, { gallery, viaGallery: true }).then((opened) => Boolean(opened));
 }
 
 export function setFilePreviewMode(mode) {
@@ -1123,25 +1269,38 @@ export function toggleFilePreviewHtml() {
   renderFilePreview();
 }
 
+/** The address the browser fetches a previewed file's bytes from. */
+function previewRawHref(source, path, payload) {
+  if (source === 'drives' || source === 'session') return driveFileHrefFromPath(path, payload?.version);
+  if (source === 'upload') return String(payload?.rawUrl || '');
+  return `${BASE}/api/files/${String(path || '').split('/').map((s) => encodeURIComponent(s)).join('/')}${currentWorkspaceScopeSuffix()}`;
+}
+
 export function renderFilePreview() {
   teardownImageZoom();
-  teardownVideoPreview();
+  teardownMediaPreview();
+  viewerTap.cancel();
+  setViewerMediaMode(filePreviewState.payload?.kind);
+  requestAnimationFrame(syncViewerChromeHeight);
   const titleEl = document.getElementById('file-preview-title');
   const metaEl = document.getElementById('file-preview-meta');
   const bodyEl = document.getElementById('file-preview-body');
   const rawLink = document.getElementById('file-preview-open-raw');
   const payload = filePreviewState.payload;
-  const rawHref = filePreviewState.source === 'drives'
-    || filePreviewState.source === 'session'
-    ? driveFileHrefFromPath(filePreviewState.path)
-    : filePreviewState.source === 'upload'
-      ? String(payload?.rawUrl || '')
-      : `${BASE}/api/files/${filePreviewState.path.split('/').map((s) => encodeURIComponent(s)).join('/')}${currentWorkspaceScopeSuffix()}`;
-  rawLink.href = rawHref || '#';
+  const rawHref = previewRawHref(filePreviewState.source, filePreviewState.path, payload);
   const fallbackName = String(filePreviewState.path || '').split('/').filter(Boolean).pop() || 'download';
-  rawLink.setAttribute('download', String(payload?.name || fallbackName));
+  const plainName = String(payload?.name || fallbackName);
+  // An upload is addressed by its content and never changes; a file on disk
+  // does, so its link and the name it is saved under carry its version.
+  const download = filePreviewState.source === 'upload'
+    ? { href: rawHref, downloadName: plainName }
+    : buildDownloadLink({ href: rawHref, name: plainName, version: payload?.version, mtimeMs: payload?.mtimeMs });
+  rawLink.href = download.href || '#';
+  rawLink.setAttribute('download', download.downloadName || plainName);
   rawLink.textContent = 'Download';
-  rawLink.setAttribute('title', 'Download file');
+  rawLink.setAttribute('title', download.downloadName && download.downloadName !== plainName
+    ? `Download as ${download.downloadName}`
+    : 'Download file');
 
   const titlePath = filePreviewState.path || '';
   titleEl.textContent = titlePath || 'File preview';
@@ -1178,8 +1337,56 @@ export function renderFilePreview() {
   const truncatedLabel = payload.truncated ? ` · truncated to ${formatBytes(FILE_PREVIEW_MAX_BYTES)}` : '';
   metaEl.textContent = `${kindLabel}${langLabel} · ${formatBytes(payload.size || 0)}${truncatedLabel}`;
 
+  const cardMeta = payload.size > 0 ? formatBytes(payload.size) : '';
+
   if (payload.kind === 'binary') {
-    bodyEl.innerHTML = '<div class="file-preview-note">Binary file preview is not shown. Use <b>Download</b> to save the file.</div>';
+    bodyEl.innerHTML = fileCardMarkup({
+      icon: '📦',
+      name: plainName,
+      meta: cardMeta ? `${cardMeta} · no inline preview` : 'no inline preview',
+      actions: downloadAnchorMarkup(download, plainName),
+    });
+    bodyEl.classList.add('card-preview-mode');
+    return;
+  }
+
+  if (payload.kind === 'pdf') {
+    // The browser's own PDF viewer takes it in a new tab; the plain address
+    // (no `as=` name) keeps the answer inline there.
+    const inlineHref = String(rawHref || payload.rawUrl || '');
+    bodyEl.innerHTML = fileCardMarkup({
+      icon: '📄',
+      name: plainName,
+      meta: cardMeta ? `PDF · ${cardMeta}` : 'PDF',
+      actions: `${inlineHref ? `<button type="button" class="file-preview-btn" data-viewer-open-tab="${escHtml(inlineHref)}">Open in new tab</button>` : ''}${downloadAnchorMarkup(download, plainName)}`,
+    });
+    bodyEl.classList.add('card-preview-mode');
+    return;
+  }
+
+  if (payload.kind === 'audio') {
+    const audioHref = String(rawHref || payload.rawUrl || '');
+    bodyEl.innerHTML = `
+      <div class="file-preview-audio-shell">
+        ${fileCardMarkup({
+          icon: '🎵',
+          name: plainName,
+          meta: cardMeta,
+          actions: audioHref ? `<audio class="file-preview-audio" controls preload="metadata" src="${escHtml(audioHref)}"></audio>` : '<span class="file-preview-note">Audio preview unavailable.</span>',
+        })}
+      </div>`;
+    bodyEl.classList.add('audio-preview-mode');
+    const audio = bodyEl.querySelector('audio');
+    if (audio) {
+      mediaPreview.el = audio;
+      listenMediaPreview(audio, 'error', () => {
+        const note = document.createElement('div');
+        note.className = 'file-preview-note';
+        note.innerHTML = 'Audio preview unavailable. Use <b>Download</b> to save the file.';
+        audio.replaceWith(note);
+      }, { once: true });
+      followMediaPlayback(audio);
+    }
     return;
   }
 
@@ -1197,13 +1404,6 @@ export function renderFilePreview() {
     return;
   }
 
-  if (filePreviewState.mode === 'raw') {
-    bodyEl.innerHTML = payload.kind === 'video'
-      ? '<div class="file-preview-note">Video files are binary. Use <b>Download</b> to save the file.</div>'
-      : `<div class="file-preview-code"><pre><code>${escHtml(String(payload.content || ''))}</code></pre></div>`;
-    return;
-  }
-
   if (payload.kind === 'video') {
     const videoHref = String(rawHref || payload.rawUrl || '');
     const viewerOptions = filePreviewState.viewerOptions || {};
@@ -1214,35 +1414,30 @@ export function renderFilePreview() {
       bodyEl.innerHTML = `
         <div class="file-preview-video-shell" data-start-seconds="${escHtml(String(startSeconds))}" data-preload="${escHtml(preload)}">
           <video class="file-preview-video" controls playsinline preload="${escHtml(preload)}" src="${escHtml(videoHref)}"></video>
-          <div class="file-preview-note">${startSeconds > 0 ? `Will start at ${startSeconds.toFixed(2)}s.` : 'Video preview ready.'} ${preload === 'auto' ? 'Preloading enabled.' : 'Metadata preload enabled.'}</div>
         </div>`;
       bodyEl.classList.add('video-preview-mode');
       const shell = bodyEl.querySelector('.file-preview-video-shell');
       const video = shell?.querySelector('video');
       if (video) {
-        videoPreview.videoEl = video;
-        videoPreview.onLoadedMetadata = () => {
+        mediaPreview.el = video;
+        const tryPlay = () => {
+          const playPromise = video.play?.();
+          if (playPromise && typeof playPromise.catch === 'function') {
+            playPromise.catch(() => {});
+          }
+        };
+        listenMediaPreview(video, 'loadedmetadata', () => {
           if (startSeconds > 0 && Number.isFinite(video.duration) && video.duration > startSeconds) {
             try {
               video.currentTime = startSeconds;
             } catch {}
           }
-          if (autoplay) {
-            const playPromise = video.play?.();
-            if (playPromise && typeof playPromise.catch === 'function') {
-              playPromise.catch(() => {});
-            }
-          }
-        };
-        videoPreview.onCanPlay = () => {
-          if (autoplay && video.paused) {
-            const playPromise = video.play?.();
-            if (playPromise && typeof playPromise.catch === 'function') {
-              playPromise.catch(() => {});
-            }
-          }
-        };
-        videoPreview.onError = () => {
+          if (autoplay) tryPlay();
+        }, { once: true });
+        listenMediaPreview(video, 'canplay', () => {
+          if (autoplay && video.paused) tryPlay();
+        });
+        listenMediaPreview(video, 'error', () => {
           let errorNote = bodyEl.querySelector('.file-preview-video-error');
           if (!errorNote) {
             errorNote = document.createElement('div');
@@ -1250,19 +1445,22 @@ export function renderFilePreview() {
             bodyEl.appendChild(errorNote);
           }
           errorNote.innerHTML = 'Video preview unavailable. Use <b>Download</b> to save the file.';
-        };
-        video.addEventListener('loadedmetadata', videoPreview.onLoadedMetadata, { once: true });
-        video.addEventListener('canplay', videoPreview.onCanPlay);
-        video.addEventListener('error', videoPreview.onError, { once: true });
+        }, { once: true });
+        followMediaPlayback(video);
       }
     } else {
       bodyEl.innerHTML = '<div class="file-preview-note">Video preview unavailable.</div>';
     }
     return;
   }
- 
+
   const rawText = String(payload.content || '');
 
+  if (filePreviewState.mode === 'raw') {
+    bodyEl.innerHTML = `<div class="file-preview-code"><pre><code>${escHtml(rawText)}</code></pre></div>`;
+    return;
+  }
+
   if (payload.kind === 'markdown') {
     const html = renderMarkdownPreview(rawText, filePreviewState.allowHtml);
     bodyEl.innerHTML = `<article class="file-preview-markdown">${html}</article>`;
@@ -1285,92 +1483,173 @@ export function renderFilePreview() {
   attachCodeCopyButtons(bodyEl);
 }
 
-export async function openWorkspaceFilePreview(rawPath, options = {}) {
-  const normalized = normalizeWorkspaceMentionPath(rawPath);
-  if (!normalized) return;
+// Two files asked for in a row (a quick swipe, say) must not race: only the
+// answer to the latest request is shown.
+let filePreviewLoadSeq = 0;
+
+async function openFilePreviewFromSource(source, normalized, options, fetchPayload) {
   const viewerOptions = { ...normalizeVideoPreviewOptions(options), fragment: String(options?.fragment || '') };
   if (!options?.fromViewerLink) filePreviewHistory.length = 0;
+  const seq = ++filePreviewLoadSeq;
   setFilePreviewState({
     path: normalized,
-    source: 'workspace',
+    source,
     mode: 'preview',
     allowHtml: true,
     loading: true,
     error: '',
     payload: null,
     viewerOptions,
+    gallery: options?.gallery || null,
   });
-  const modal = document.getElementById('file-preview-modal');
-  modal.classList.add('visible');
-  modal.setAttribute('aria-hidden', 'false');
+  showFilePreviewModal();
   renderFilePreview();
 
-  const payload = await loadWorkspaceFilePreview(normalized, currentConversationId());
+  // A step through the gallery takes the neighbour fetched ahead of time.
+  const cached = options?.viaGallery ? galleryPayloadCache.get(galleryCacheKey(source, normalized)) : null;
+  const payload = await (cached || fetchPayload());
+  if (seq !== filePreviewLoadSeq) return false;
   if (!payload || payload.error) {
     filePreviewState.loading = false;
-    filePreviewState.error = payload?.error || 'Failed to load file preview';
+    filePreviewState.error = payload?.error || `Failed to load ${source === 'workspace' ? '' : 'drive '}file preview`;
     renderFilePreview();
     return false;
   }
+  rememberGalleryPayload(source, normalized, payload);
   filePreviewState.loading = false;
   filePreviewState.payload = payload;
   filePreviewState.path = String(payload.path || normalized);
+  filePreviewState.source = source;
   filePreviewState.viewerOptions = viewerOptions;
   renderFilePreview();
+  prefetchGalleryNeighbors();
   return true;
 }
 
+export async function openWorkspaceFilePreview(rawPath, options = {}) {
+  const normalized = normalizeWorkspaceMentionPath(rawPath);
+  if (!normalized) return;
+  return openFilePreviewFromSource('workspace', normalized, options,
+    () => loadWorkspaceFilePreview(normalized, currentConversationId()));
+}
+
 export async function openDriveFilePreview(rawPath, options = {}) {
   const normalized = normalizeDriveBrowserPath(rawPath);
   if (!normalized) return;
-  const viewerOptions = { ...normalizeVideoPreviewOptions(options), fragment: String(options?.fragment || '') };
-  if (!options?.fromViewerLink) filePreviewHistory.length = 0;
-  setFilePreviewState({
-    path: normalized,
-    source: 'drives',
-    mode: 'preview',
-    allowHtml: true,
-    loading: true,
-    error: '',
-    payload: null,
-    viewerOptions,
-  });
-  const modal = document.getElementById('file-preview-modal');
-  modal.classList.add('visible');
-  modal.setAttribute('aria-hidden', 'false');
-  renderFilePreview();
+  return openFilePreviewFromSource('drives', normalized, options, () => loadDriveFilePreview(normalized));
+}
 
-  const payload = await loadDriveFilePreview(normalized);
-  if (!payload || payload.error) {
-    filePreviewState.loading = false;
-    filePreviewState.error = payload?.error || 'Failed to load drive file preview';
-    renderFilePreview();
-    return false;
-  }
-  filePreviewState.loading = false;
-  filePreviewState.payload = payload;
-  filePreviewState.path = String(payload.path || normalized);
-  filePreviewState.source = 'drives';
-  filePreviewState.viewerOptions = viewerOptions;
-  renderFilePreview();
-  return true;
+/** The files of the browser's current folder, as a gallery open at `openedPath`. */
+function repoFolderGallery(openedPath) {
+  const node = repoBrowserState.nodeMap.get(String(repoBrowserState.currentPath || '')) || null;
+  if (!node || node.type !== 'dir' || !Array.isArray(node.children)) return null;
+  return galleryFromFolder(node.children, openedPath, {
+    source: repoBrowserState.activeRoot === 'workspace' ? 'workspace' : 'drives',
+  });
 }
 
 export async function openWorkspaceFilePreviewFromRepo(rawPath, options = {}) {
+  const gallery = repoFolderGallery(rawPath);
+  const openOptions = gallery ? { ...options, gallery } : options;
   if (repoBrowserState.activeRoot !== 'workspace') {
-    await openDriveFilePreview(rawPath, options);
+    await openDriveFilePreview(rawPath, openOptions);
     return;
   }
-  await openWorkspaceFilePreview(rawPath, options);
+  await openWorkspaceFilePreview(rawPath, openOptions);
+}
+
+/** Show the file `delta` steps along the gallery; false at either end. */
+export async function stepFilePreviewGallery(delta) {
+  const gallery = filePreviewState.gallery;
+  const index = galleryNeighborIndex(gallery, delta);
+  if (index === -1) return false;
+  const next = galleryAt(gallery, index);
+  return openGalleryItem(next.items[index], next);
+}
+
+// Preview payloads of the open file's neighbours, fetched ahead so a swipe
+// lands on the file and not on "Fetching…"; an image's bytes are asked for
+// too, under the very address the viewer will use. Entries are promises.
+const galleryPayloadCache = new Map();
+const GALLERY_PAYLOAD_CACHE_MAX = 12;
+
+function galleryCacheKey(source, path) {
+  return `${source}:${path}`;
+}
+
+function rememberGalleryPayload(source, path, payload) {
+  const key = galleryCacheKey(source, path);
+  galleryPayloadCache.delete(key);
+  galleryPayloadCache.set(key, Promise.resolve(payload));
+  while (galleryPayloadCache.size > GALLERY_PAYLOAD_CACHE_MAX) {
+    galleryPayloadCache.delete(galleryPayloadCache.keys().next().value);
+  }
+}
+
+function prefetchGalleryNeighbors() {
+  const gallery = filePreviewState.gallery;
+  if (!gallery) return;
+  for (const item of galleryNeighbors(gallery)) {
+    const source = item.source || gallery.source;
+    if (source === 'upload') {
+      // An attachment has no preview to fetch; its picture can be primed.
+      if (String(item.mime || '').startsWith('image/') && item.href) {
+        const image = new Image();
+        image.src = item.href;
+      }
+      continue;
+    }
+    const normalized = source === 'workspace'
+      ? normalizeWorkspaceMentionPath(item.path)
+      : normalizeDriveBrowserPath(item.path);
+    if (!normalized) continue;
+    const key = galleryCacheKey(source, normalized);
+    if (galleryPayloadCache.has(key)) continue;
+    const request = (source === 'workspace'
+      ? loadWorkspaceFilePreview(normalized, currentConversationId())
+      : loadDriveFilePreview(normalized)
+    ).then((payload) => {
+      if (!payload || payload.error) {
+        galleryPayloadCache.delete(key);
+        return null;
+      }
+      if (payload.kind === 'image') {
+        const image = new Image();
+        image.src = previewRawHref(source, String(payload.path || normalized), payload);
+      }
+      return payload;
+    }).catch(() => {
+      galleryPayloadCache.delete(key);
+      return null;
+    });
+    rememberGalleryPayload(source, normalized, request);
+  }
 }
 
 export function closeFilePreview() {
   teardownImageZoom();
-  teardownVideoPreview();
+  teardownMediaPreview();
+  viewerTap.cancel();
+  viewerControls.reset();
   const modal = document.getElementById('file-preview-modal');
-  modal.classList.remove('visible');
+  const wasVisible = modal.classList.contains('visible');
+  modal.classList.remove('visible', 'controls-hidden', 'media-mode');
   modal.setAttribute('aria-hidden', 'true');
   filePreviewHistory.length = 0;
+  filePreviewState.gallery = null;
+  galleryPayloadCache.clear();
+  viewerSwipe.cancel();
+  clearViewerDragStyles();
+  if (wasVisible) viewerHistory.closed();
+}
+
+function clearViewerDragStyles() {
+  const bodyEl = document.getElementById('file-preview-body');
+  const modal = document.getElementById('file-preview-modal');
+  bodyEl.style.transform = '';
+  bodyEl.style.transition = '';
+  modal.style.opacity = '';
+  modal.style.transition = '';
 }
 
 export function goBackFilePreview() {
@@ -1491,6 +1770,371 @@ function updateRepoToolbarUi() {
   heavyBtn.textContent = workspaceRoot
     ? `Heavy: ${repoBrowserState.workspaceIncludeHeavy ? 'On' : 'Off'}`
     : 'Heavy: n/a';
+  const newFolderBtn = document.getElementById('repo-new-folder-btn');
+  if (newFolderBtn) newFolderBtn.disabled = !canCreateRepoFolderIn(String(repoBrowserState.currentPath || ''));
+}
+
+// ---------------------------------------------------------------------------
+// Explorer edits: new folder, rename, delete.
+//
+// The two inline editors live in module state, not in repoBrowserState: they
+// are transient, belong to one open explorer, and must not survive a root
+// switch or a close. Both are rendered by the normal render functions, which
+// capture the typed text and the focus before they replace the markup, so a
+// background re-render (a child load landing) does not eat a half-typed name.
+// ---------------------------------------------------------------------------
+
+/** `{ parentPath, value, error, busy }` while the New-folder row is open. */
+let repoNewFolderDraft = null;
+/** `{ path, value, busy }` while a name is being edited in place. */
+let repoRenameDraft = null;
+/** `{ path, name, kind }` while the delete confirmation is open. */
+let repoDeletePending = null;
+/** Set while a render swaps markup, so the blur it causes is not a cancel. */
+let repoInlineRenderInProgress = false;
+
+/** Rename and delete exist in the workspace and drives roots, outside the CWD picker. */
+function canEditRepoEntries() {
+  return repoBrowserState.activeRoot !== 'session' && !repoBrowserCwdPickModeActive();
+}
+
+/** A folder can be created wherever a real directory is open; the Windows "Drives" list is not one. */
+function canCreateRepoFolderIn(dirPath) {
+  if (repoBrowserState.loading || repoBrowserState.error || !repoBrowserState.tree) return false;
+  const node = repoBrowserState.nodeMap.get(String(dirPath || ''));
+  if (!node || node.type !== 'dir') return false;
+  if (repoBrowserState.activeRoot === 'drives' && !String(node.path || '')) return false;
+  return true;
+}
+
+function clearRepoInlineEdits() {
+  repoNewFolderDraft = null;
+  repoRenameDraft = null;
+}
+
+export function startRepoNewFolder(parentPath = null) {
+  const target = parentPath === null ? String(repoBrowserState.currentPath || '') : String(parentPath || '');
+  if (!canCreateRepoFolderIn(target)) return;
+  repoRenameDraft = null;
+  repoNewFolderDraft = { parentPath: target, value: '', error: '', busy: false };
+  renderRepoBrowser();
+  focusRepoInlineInput('[data-repo-new-folder-input]');
+}
+
+export function cancelRepoNewFolder() {
+  if (!repoNewFolderDraft || repoNewFolderDraft.busy) return;
+  repoNewFolderDraft = null;
+  renderRepoFolder();
+}
+
+export async function commitRepoNewFolder() {
+  const draft = repoNewFolderDraft;
+  if (!draft || draft.busy) return;
+  const name = String(draft.value || '').trim();
+  if (!name) {
+    draft.error = 'Enter a name';
+    renderRepoFolder();
+    focusRepoInlineInput('[data-repo-new-folder-input]');
+    return;
+  }
+  draft.busy = true;
+  draft.error = '';
+  renderRepoFolder();
+  const root = repoBrowserState.activeRoot;
+  try {
+    const result = await createExplorerFolder({
+      root,
+      path: draft.parentPath,
+      name,
+      conversationId: currentConversationId(),
+    });
+    if (repoNewFolderDraft !== draft) return;
+    repoNewFolderDraft = null;
+    const newPath = String(result?.path || childPathOf(draft.parentPath, name));
+    await reloadRepoDirectory(draft.parentPath);
+    if (repoBrowserState.activeRoot === root && repoBrowserState.nodeMap.has(newPath)) {
+      await setRepoCurrentPath(newPath);
+    }
+    showTransientRelayNotice(`Folder "${name}" created.`);
+  } catch (error) {
+    if (repoNewFolderDraft !== draft) return;
+    draft.busy = false;
+    draft.error = error?.message || 'Failed to create the folder';
+    renderRepoFolder();
+    focusRepoInlineInput('[data-repo-new-folder-input]');
+  }
+}
+
+export function startRepoRename(pathValue) {
+  const entryPath = String(pathValue || '');
+  const node = repoBrowserState.nodeMap.get(entryPath);
+  if (!node || !entryPath || !canEditRepoEntries()) return;
+  repoNewFolderDraft = null;
+  repoRenameDraft = { path: entryPath, value: String(node.name || entryNameOf(entryPath)), busy: false };
+  renderRepoBrowser();
+  focusRepoInlineInput('[data-repo-rename-input]', { select: true });
+}
+
+export function cancelRepoRename() {
+  if (!repoRenameDraft || repoRenameDraft.busy) return;
+  repoRenameDraft = null;
+  renderRepoBrowser();
+}
+
+export async function commitRepoRename() {
+  const draft = repoRenameDraft;
+  if (!draft || draft.busy) return;
+  const node = repoBrowserState.nodeMap.get(draft.path);
+  const oldName = String(node?.name || entryNameOf(draft.path));
+  const newName = String(draft.value || '').trim();
+  if (!node || !newName || newName === oldName) {
+    cancelRepoRename();
+    return;
+  }
+  draft.busy = true;
+  renderRepoBrowser();
+  const root = repoBrowserState.activeRoot;
+  try {
+    const result = await renameExplorerEntry({
+      root,
+      path: draft.path,
+      newName,
+      conversationId: currentConversationId(),
+    });
+    if (repoRenameDraft !== draft) return;
+    repoRenameDraft = null;
+    const parent = parentPathOf(draft.path);
+    const newPath = String(result?.path || childPathOf(parent, newName));
+    repoBrowserState.expandedPaths = rewritePathSet(repoBrowserState.expandedPaths, draft.path, newPath);
+    repoBrowserState.collapsedPaths = rewritePathSet(repoBrowserState.collapsedPaths, draft.path, newPath);
+    repoBrowserState.currentPath = rewritePathPrefix(repoBrowserState.currentPath, draft.path, newPath);
+    await reloadRepoDirectory(parent);
+    showTransientRelayNotice(`Renamed to "${newName}".`);
+  } catch (error) {
+    if (repoRenameDraft !== draft) return;
+    draft.busy = false;
+    renderRepoBrowser();
+    focusRepoInlineInput('[data-repo-rename-input]', { select: true });
+    showTransientRelayNotice(error?.message || 'Failed to rename', 6000);
+  }
+}
+
+function deleteConfirmationBody(pending, counts) {
+  const name = escHtml(pending.name);
+  const needsTypedName = counts.kind === 'dir' && (counts.files + counts.dirs) > 0;
+  let lead;
+  if (counts.kind !== 'dir') {
+    lead = `<p>Delete the file <strong>${name}</strong>?</p>`;
+  } else if (!needsTypedName) {
+    lead = `<p>Delete the empty folder <strong>${name}</strong>?</p>`;
+  } else {
+    const plural = (count, word) => `${count} ${word}${count === 1 ? '' : 's'}`;
+    const amount = counts.capped
+      ? 'more than 10,000 entries'
+      : `${plural(counts.files, 'file')} and ${plural(counts.dirs, 'folder')}`;
+    lead = `<p>Delete the folder <strong>${name}</strong> and everything in it?</p>
+      <p>It contains ${amount}.</p>
+      <label class="repo-delete-confirm-label">Type the folder name to confirm
+        <input type="text" class="repo-delete-confirm-input" data-repo-delete-confirm-input autocomplete="off" spellcheck="false" autocapitalize="off" placeholder="${name}">
+      </label>`;
+  }
+  return `${lead}
+    <div class="summary-modal-actions">
+      <button class="chat-title-action-btn danger-btn" type="button" data-repo-delete-confirm${needsTypedName ? ' disabled data-keep-disabled="1"' : ''}>🗑 Delete</button>
+      <button class="chat-title-action-btn" type="button" onclick="closeSummaryModal()">Cancel</button>
+    </div>`;
+}
+
+export async function openRepoDeleteConfirmation(pathValue) {
+  const entryPath = String(pathValue || '');
+  const node = repoBrowserState.nodeMap.get(entryPath);
+  if (!node || !entryPath || !canEditRepoEntries()) return;
+  const pending = { path: entryPath, name: String(node.name || entryNameOf(entryPath)), kind: node.type === 'dir' ? 'dir' : 'file', root: repoBrowserState.activeRoot };
+  repoDeletePending = pending;
+  openSummaryModal({
+    title: 'Delete',
+    subtitle: entryPath,
+    kind: 'explorer-delete',
+    bodyHtml: '<p class="repo-empty">Counting entries…</p>',
+  });
+  let counts;
+  try {
+    counts = await deleteExplorerEntry({ root: pending.root, path: entryPath, conversationId: currentConversationId(), dryRun: true });
+  } catch (error) {
+    if (repoDeletePending !== pending) return;
+    repoDeletePending = null;
+    closeSummaryModal();
+    showTransientRelayNotice(error?.message || 'Failed to read the entry', 6000);
+    return;
+  }
+  if (repoDeletePending !== pending) return;
+  renderSummaryModalContent({
+    title: 'Delete',
+    subtitle: entryPath,
+    kind: 'explorer-delete',
+    bodyHtml: deleteConfirmationBody(pending, {
+      kind: String(counts?.kind || pending.kind),
+      files: Number(counts?.files || 0),
+      dirs: Number(counts?.dirs || 0),
+      capped: counts?.capped === true,
+    }),
+  });
+  const input = document.querySelector('#summary-modal [data-repo-delete-confirm-input]');
+  if (input) input.focus();
+}
+
+async function confirmRepoDelete() {
+  const pending = repoDeletePending;
+  if (!pending) return;
+  const button = document.querySelector('#summary-modal [data-repo-delete-confirm]');
+  if (button?.disabled) return;
+  setSummaryModalLoading(true);
+  try {
+    await deleteExplorerEntry({ root: pending.root, path: pending.path, conversationId: currentConversationId() });
+  } catch (error) {
+    if (repoDeletePending !== pending) return;
+    setSummaryModalLoading(false);
+    showTransientRelayNotice(error?.message || 'Failed to delete', 6000);
+    return;
+  }
+  if (repoDeletePending !== pending) return;
+  repoDeletePending = null;
+  closeSummaryModal();
+  if (repoBrowserState.activeRoot !== pending.root) return;
+  const parent = parentPathOf(pending.path);
+  repoBrowserState.expandedPaths = dropPathsBelow(repoBrowserState.expandedPaths, pending.path);
+  repoBrowserState.collapsedPaths = dropPathsBelow(repoBrowserState.collapsedPaths, pending.path);
+  if (isSameOrBelow(repoBrowserState.currentPath, pending.path)) repoBrowserState.currentPath = parent;
+  await reloadRepoDirectory(parent);
+  showTransientRelayNotice(`Deleted "${pending.name}".`);
+}
+
+/**
+ * Refetch one folder's children after a change in it, then re-expand what was
+ * open below it. The session root itself is reloaded whole: its listing is
+ * special (a missing folder lists as empty, the transcript is a sibling) and
+ * the plain children route would not do.
+ */
+async function reloadRepoDirectory(dirPath) {
+  const target = String(dirPath || '');
+  const node = repoBrowserState.nodeMap.get(target);
+  const sessionRootItself = repoBrowserState.activeRoot === 'session' && target === String(repoBrowserState.tree?.path || '');
+  if (!node || node.type !== 'dir' || sessionRootItself) {
+    refreshRepoBrowser();
+    return;
+  }
+  const reopen = descendantsOf(repoBrowserState.expandedPaths, target);
+  node.childrenLoaded = false;
+  node.lazy = true;
+  await ensureRepoChildrenLoaded(target);
+  for (const descendant of reopen) {
+    if (repoBrowserState.nodeMap.has(descendant)) await ensureRepoChildrenLoaded(descendant);
+  }
+  if (!repoBrowserState.nodeMap.has(String(repoBrowserState.currentPath || ''))) {
+    repoBrowserState.currentPath = target;
+  }
+  renderRepoBrowser();
+}
+
+function focusRepoInlineInput(selector, { select = false } = {}) {
+  requestAnimationFrame(() => {
+    const input = document.querySelector(`#repo-browser-modal ${selector}`);
+    if (!input) return;
+    input.focus();
+    if (select) {
+      // Select the stem only: the common rename keeps the extension.
+      const value = String(input.value || '');
+      const dot = value.lastIndexOf('.');
+      input.setSelectionRange(0, dot > 0 ? dot : value.length);
+    }
+  });
+}
+
+/** Before a render replaces the markup: keep the typed text and whether it had focus. */
+function captureRepoInlineEdits() {
+  const newFolderInput = document.querySelector('#repo-folder [data-repo-new-folder-input]');
+  if (newFolderInput && repoNewFolderDraft) {
+    repoNewFolderDraft.value = newFolderInput.value;
+    repoNewFolderDraft.focused = document.activeElement === newFolderInput;
+  }
+  const renameInput = document.querySelector('#repo-browser-modal [data-repo-rename-input]');
+  if (renameInput && repoRenameDraft) {
+    repoRenameDraft.value = renameInput.value;
+    repoRenameDraft.focused = document.activeElement === renameInput;
+    repoRenameDraft.selection = [renameInput.selectionStart, renameInput.selectionEnd];
+  }
+}
+
+/** After the render: put the focus back where it was. */
+function restoreRepoInlineEditFocus() {
+  if (repoNewFolderDraft?.focused) {
+    const input = document.querySelector('#repo-folder [data-repo-new-folder-input]');
+    if (input && document.activeElement !== input) input.focus();
+  }
+  if (repoRenameDraft?.focused) {
+    const input = document.querySelector('#repo-browser-modal [data-repo-rename-input]');
+    if (input && document.activeElement !== input) {
+      input.focus();
+      const [start, end] = repoRenameDraft.selection || [];
+      if (Number.isFinite(start) && Number.isFinite(end)) input.setSelectionRange(start, end);
+    }
+  }
+}
+
+/** Run `swap` (which replaces markup) with the inline edits preserved across it. */
+function withRepoInlineEditsPreserved(swap) {
+  captureRepoInlineEdits();
+  repoInlineRenderInProgress = true;
+  try {
+    swap();
+  } finally {
+    repoInlineRenderInProgress = false;
+  }
+  restoreRepoInlineEditFocus();
+}
+
+function renameInputHtml(draft) {
+  return `<input type="text" class="repo-rename-input" data-repo-rename-input value="${escHtml(draft.value)}" autocomplete="off" spellcheck="false" autocapitalize="off" aria-label="New name"${draft.busy ? ' disabled' : ''}>`;
+}
+
+function newFolderRowHtml(draft) {
+  return `<form class="repo-inline-edit" data-repo-new-folder-form>
+    <span class="repo-inline-edit-icon">📁</span>
+    <input type="text" data-repo-new-folder-input value="${escHtml(draft.value)}" placeholder="New folder name" autocomplete="off" spellcheck="false" autocapitalize="off" aria-label="New folder name"${draft.busy ? ' disabled' : ''}>
+    <button type="submit" class="repo-browser-btn"${draft.busy ? ' disabled' : ''}>${draft.busy ? 'Creating…' : 'Create'}</button>
+    <button type="button" class="repo-browser-btn" data-repo-new-folder-cancel${draft.busy ? ' disabled' : ''}>Cancel</button>
+    <div class="repo-inline-edit-error" aria-live="polite">${escHtml(draft.error || '')}</div>
+  </form>`;
+}
+
+function repoEntryMenuItems(entryPath, isDir) {
+  const items = [];
+  if (isDir && canCreateRepoFolderIn(entryPath)) {
+    items.push({ id: 'new-folder', label: '📁 New folder here', onSelect: () => { void setRepoCurrentPath(entryPath).then(() => startRepoNewFolder(entryPath)); } });
+  }
+  // Roots are never renamed or deleted: the workspace root, `/`, the session
+  // root, and a drive (`C:`), which on Windows is a top-level child of the list.
+  const isRoot = !entryPath
+    || entryPath === '/'
+    || entryPath === String(repoBrowserState.tree?.path || '')
+    || (repoBrowserState.activeRoot !== 'workspace' && !parentPathOf(entryPath));
+  if (canEditRepoEntries() && !isRoot) {
+    if (items.length) items.push(MENU_SEPARATOR);
+    items.push({ id: 'rename', label: 'Rename', onSelect: () => startRepoRename(entryPath) });
+    items.push({ id: 'delete', label: 'Delete', danger: true, onSelect: () => { void openRepoDeleteConfirmation(entryPath); } });
+  }
+  return items;
+}
+
+function openRepoEntryMenu(element, x, y) {
+  const dirPath = element.getAttribute('data-repo-open-dir');
+  const filePath = element.getAttribute('data-repo-open-file');
+  const entryPath = dirPath !== null ? dirPath : filePath;
+  if (entryPath === null) return false;
+  const items = repoEntryMenuItems(String(entryPath), dirPath !== null);
+  if (!items.length) return false;
+  openContextMenu(x, y, items);
+  return true;
 }
 
 export function renderRepoTreeNode(node) {
@@ -1519,8 +2163,11 @@ export function renderRepoTreeNode(node) {
       : (lazyUnloaded
         ? '<div class="repo-empty">Expand to load entries…</div>'
         : children.map(renderRepoTreeNode).join(''));
+    const label = repoRenameDraft && repoRenameDraft.path === nodePath && nodePath
+      ? renameInputHtml(repoRenameDraft)
+      : escHtml(node.name || '/');
     return `<details class="repo-tree-node" data-repo-dir-path="${escHtml(nodePath)}"${openAttr}>
-      <summary class="repo-tree-summary" data-repo-open-dir="${escHtml(nodePath)}">${icon} ${escHtml(node.name || '/')}</summary>
+      <summary class="repo-tree-summary" data-repo-open-dir="${escHtml(nodePath)}">${icon} ${label}</summary>
       <div class="repo-tree-children">${childrenHtml}</div>
     </details>`;
   }
@@ -1634,8 +2281,13 @@ export function renderRepoFolder() {
   const children = Array.isArray(node.children)
     ? node.children.filter((child) => child?.type !== 'dir')
     : [];
+  const draftHtml = repoNewFolderDraft && repoNewFolderDraft.parentPath === String(node.path || '')
+    ? newFolderRowHtml(repoNewFolderDraft)
+    : '';
   if (!children.length) {
-    folderHost.innerHTML = '<div class="repo-empty">This folder has no files.</div>';
+    withRepoInlineEditsPreserved(() => {
+      folderHost.innerHTML = `${draftHtml}<div class="repo-empty">This folder has no files.</div>`;
+    });
     return;
   }
 
@@ -1645,6 +2297,8 @@ export function renderRepoFolder() {
     const childPath = String(child.path || '');
     const rawHref = repoRawHref(childPath);
     const icon = repoIcon(child);
+    const renaming = !!repoRenameDraft && repoRenameDraft.path === childPath;
+    const nameHtml = renaming ? renameInputHtml(repoRenameDraft) : escHtml(child.name || childPath);
     if (isGrid) {
       const ext = String(child.ext || '').replace('.', '');
       const isImage = String(child.previewKind || '').toLowerCase() === 'image' || REPO_IMAGE_EXTENSIONS.has(ext.toLowerCase());
@@ -1654,7 +2308,7 @@ export function renderRepoFolder() {
       const fileMeta = `${String(child.previewKind || 'file')} · ${formatBytes(child.size || 0)}`;
       return `<div class="repo-card repo-card-clickable" data-repo-open-file="${escHtml(childPath)}">
         <div class="repo-card-thumb">${thumb}</div>
-        <div class="repo-card-name" title="${escHtml(child.name || childPath)}">${escHtml(child.name || childPath)}</div>
+        <div class="repo-card-name" title="${escHtml(child.name || childPath)}">${nameHtml}</div>
         <div class="repo-entry-meta">${escHtml(fileMeta)}</div>
       </div>`;
     }
@@ -1664,7 +2318,7 @@ export function renderRepoFolder() {
       <div class="repo-entry-main">
         <span>${icon}</span>
         <div style="min-width:0">
-          <div class="repo-entry-name" title="${escHtml(child.name || childPath)}">${escHtml(child.name || childPath)}</div>
+          <div class="repo-entry-name" title="${escHtml(child.name || childPath)}">${nameHtml}</div>
           <div class="repo-entry-meta">${escHtml(mainMeta)}</div>
         </div>
       </div>
@@ -1672,7 +2326,9 @@ export function renderRepoFolder() {
   }).join('');
 
   const savedScrollTop = folderHost.scrollTop;
-  folderHost.innerHTML = `<div class="${wrapperClass}">${rows}</div>`;
+  withRepoInlineEditsPreserved(() => {
+    folderHost.innerHTML = `${draftHtml}<div class="${wrapperClass}">${rows}</div>`;
+  });
   folderHost.scrollTop = savedScrollTop;
 }
 
@@ -1695,7 +2351,9 @@ export function renderRepoTree() {
   // The rebuild resets the pane's scroll to 0; put it back so re-renders
   // (child loads, refreshes) don't rubber-band a scroll in progress.
   const savedScrollTop = treeHost.scrollTop;
-  treeHost.innerHTML = renderRepoTreeNode(root);
+  withRepoInlineEditsPreserved(() => {
+    treeHost.innerHTML = renderRepoTreeNode(root);
+  });
   updateRepoTreeSelection();
   treeHost.scrollTop = savedScrollTop;
   syncRepoTreeToCurrentPath();
@@ -1920,6 +2578,7 @@ export function setRepoBrowserRoot(root) {
   // A root switch invalidates any parked restore: the saved path belongs to the
   // tree we are leaving. The Set wipes below are correct here for the same reason.
   pendingRepoBrowserRestore = null;
+  clearRepoInlineEdits();
   setRepoBrowserState({
     tree: null,
     nodeMap: new Map(),
@@ -2069,6 +2728,7 @@ export function closeRepoBrowser() {
   modal.setAttribute('aria-hidden', 'true');
   repoBrowserState.open = false;
   repoBrowserCwdPickHandler = null;
+  clearRepoInlineEdits();
 }
 
 export function refreshRepoBrowser() {
@@ -2166,6 +2826,8 @@ export async function setRepoCurrentPath(pathValue) {
   updateRepoTreeSelection();
   syncRepoTreeToCurrentPath();
   updateRepoCwdPickBar();
+  // The New-folder button follows the open folder (a drive list has none).
+  updateRepoToolbarUi();
 }
 
 document.addEventListener('click', (event) => {
@@ -2175,11 +2837,133 @@ document.addEventListener('click', (event) => {
   void openWorkspaceFilePreview(anchor.dataset.workspacePath || '');
 });
 
-document.getElementById('file-preview-modal').addEventListener('click', (event) => {
-  if (event.target.id === 'file-preview-modal') closeFilePreview();
+// A tap on the content shows or hides the floating controls; the recognizer
+// leaves drags, pinches, double taps and the content's own buttons alone.
+// While something plays, a mouse moving over the viewer brings the controls
+// back as players do; over a still image a click is the only switch, or a
+// nudge of the mouse would undo every click that hid them.
+for (const eventName of ['pointerdown', 'pointermove', 'pointerup', 'pointercancel']) {
+  document.getElementById('file-preview-body').addEventListener(eventName, (event) => {
+    viewerTap.handle(event);
+    viewerSwipe.handle(event);
+    if (eventName === 'pointermove' && event.pointerType === 'mouse' && viewerControls.playing) {
+      viewerControls.interaction();
+    }
+  });
+}
+for (const id of ['file-preview-chrome-top', 'file-preview-chrome-bottom']) {
+  document.getElementById(id).addEventListener('pointerdown', () => viewerControls.interaction());
+}
+window.addEventListener('resize', syncViewerChromeHeight);
+
+// Moving through the gallery: the buttons below, the arrow keys, and a
+// sideways swipe of a finger (a mouse drag selects text and stays a drag).
+document.getElementById('file-preview-prev').addEventListener('click', () => { void stepFilePreviewGallery(-1); });
+document.getElementById('file-preview-next').addEventListener('click', () => { void stepFilePreviewGallery(1); });
+
+function isEditableTarget(target) {
+  return Boolean(target?.closest?.('input, textarea, select, [contenteditable]'));
+}
+
+document.addEventListener('keydown', (event) => {
+  if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+  const modal = document.getElementById('file-preview-modal');
+  if (!modal.classList.contains('visible')) return;
+  if (document.getElementById('image-annotate-modal')?.classList.contains('visible')) return;
+  if ((isEditableTarget(event.target) && modal.contains(event.target)) || !filePreviewState.gallery) return;
+  event.preventDefault();
+  void stepFilePreviewGallery(event.key === 'ArrowRight' ? 1 : -1);
+});
+
+/** Something between `target` and the viewer body scrolls sideways itself. */
+function insideHorizontalScroller(target) {
+  const bodyEl = document.getElementById('file-preview-body');
+  for (let el = target instanceof Element ? target : null; el && el !== bodyEl; el = el.parentElement) {
+    if (el.scrollWidth > el.clientWidth + 1) {
+      const overflowX = getComputedStyle(el).overflowX;
+      if (overflowX === 'auto' || overflowX === 'scroll') return true;
+    }
+  }
+  return false;
+}
+
+// A swipe down dismisses what does not scroll (a picture, a player, a card):
+// the content follows the finger and the viewer fades, then goes if the
+// finger went far or fast enough. Text scrolls under the finger instead and
+// is closed with ×, Escape or the back gesture.
+const DISMISS_FADE_PX = 480;
+const DISMISS_ANIMATION_MS = 200;
+let viewerDismissing = false;
+
+function viewerDismissableBySwipe() {
+  return !viewerDismissing && !TEXT_PREVIEW_KINDS.has(filePreviewState.payload?.kind) && imageZoomAtRest();
+}
+
+function dismissFilePreviewWithSlide() {
+  const bodyEl = document.getElementById('file-preview-body');
+  const modal = document.getElementById('file-preview-modal');
+  viewerDismissing = true;
+  bodyEl.style.transition = `transform ${DISMISS_ANIMATION_MS}ms ease-in`;
+  modal.style.transition = `opacity ${DISMISS_ANIMATION_MS}ms ease-in`;
+  bodyEl.style.transform = 'translateY(100vh)';
+  modal.style.opacity = '0';
+  setTimeout(() => {
+    viewerDismissing = false;
+    closeFilePreview();
+  }, DISMISS_ANIMATION_MS);
+}
+
+const viewerSwipe = createSwipeRecognizer({
+  canStart: (event) => event.pointerType !== 'mouse'
+    && !viewerDismissing
+    && !event.target?.closest?.('video, audio, input, textarea, select, [contenteditable]')
+    && !insideHorizontalScroller(event.target),
+  horizontalEnabled: () => Boolean(filePreviewState.gallery) && imageZoomAtRest(),
+  verticalEnabled: viewerDismissableBySwipe,
+  onStart: () => {
+    const bodyEl = document.getElementById('file-preview-body');
+    bodyEl.style.transition = 'none';
+    document.getElementById('file-preview-modal').style.transition = 'none';
+  },
+  onMove: ({ axis, dx, dy }) => {
+    const bodyEl = document.getElementById('file-preview-body');
+    if (axis === 'y') {
+      // Upwards there is nothing: the content barely gives.
+      const shift = dy < 0 ? dy * 0.2 : dy;
+      bodyEl.style.transform = `translateY(${shift}px)`;
+      document.getElementById('file-preview-modal').style.opacity = String(Math.max(0.3, 1 - Math.max(0, dy) / DISMISS_FADE_PX));
+      return;
+    }
+    // Past either end the content gives a little, then holds.
+    const toward = galleryNeighborIndex(filePreviewState.gallery, dx < 0 ? 1 : -1);
+    const shift = toward === -1 ? dx * 0.25 : dx;
+    bodyEl.style.transform = `translateX(${shift}px)`;
+  },
+  onEnd: ({ axis, swipe }) => {
+    if (axis === 'y' && swipe === 'down') {
+      dismissFilePreviewWithSlide();
+      return;
+    }
+    const bodyEl = document.getElementById('file-preview-body');
+    const modal = document.getElementById('file-preview-modal');
+    bodyEl.style.transition = 'transform 180ms ease';
+    modal.style.transition = 'opacity 180ms ease';
+    bodyEl.style.transform = '';
+    modal.style.opacity = '';
+    if (swipe === 'left') void stepFilePreviewGallery(1);
+    else if (swipe === 'right') void stepFilePreviewGallery(-1);
+  },
 });
 
 document.getElementById('file-preview-body').addEventListener('click', (event) => {
+  const openTab = eventClosest(event, '[data-viewer-open-tab]');
+  if (openTab) {
+    event.preventDefault();
+    openExternalNavigation(openTab.getAttribute('data-viewer-open-tab') || '', (url) => {
+      window.dispatchEvent(new CustomEvent('copilot:external-link-fallback', { detail: { url } }));
+    });
+    return;
+  }
   const anchor = eventClosest(event, '.file-preview-markdown a[href]');
   if (!anchor) return;
   const target = resolveFilePreviewLink(anchor.getAttribute('href'), filePreviewState.path);
@@ -2213,7 +2997,105 @@ document.getElementById('repo-browser-modal').addEventListener('click', (event)
   if (event.target.id === 'repo-browser-modal') closeRepoBrowser();
 });
 
+// The inline editors. Keys inside an input never reach the <summary> (Enter
+// would toggle the folder) or the document (Escape would close the explorer).
+function repoInlineInputOf(event) {
+  return eventClosest(event, '[data-repo-rename-input], [data-repo-new-folder-input]');
+}
+
+document.getElementById('repo-browser-modal').addEventListener('keydown', (event) => {
+  const input = repoInlineInputOf(event);
+  if (!input) return;
+  const isRename = input.hasAttribute('data-repo-rename-input');
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isRename) void commitRepoRename();
+    else void commitRepoNewFolder();
+  } else if (event.key === 'Escape') {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isRename) cancelRepoRename();
+    else cancelRepoNewFolder();
+  } else if (event.key === ' ' && isRename) {
+    // A space in a <summary> toggles it; in a name it is a space.
+    event.stopPropagation();
+  }
+});
+
+document.getElementById('repo-browser-modal').addEventListener('input', (event) => {
+  const input = repoInlineInputOf(event);
+  if (!input) return;
+  if (input.hasAttribute('data-repo-rename-input') && repoRenameDraft) repoRenameDraft.value = input.value;
+  if (input.hasAttribute('data-repo-new-folder-input') && repoNewFolderDraft) repoNewFolderDraft.value = input.value;
+});
+
+// Leaving an untouched rename input ends the edit; a changed name stays open
+// until Enter, so a stray tap cannot lose or commit it. Renders swap the
+// input out and back, and that blur is not a cancel.
+document.getElementById('repo-browser-modal').addEventListener('focusout', (event) => {
+  if (repoInlineRenderInProgress) return;
+  const input = eventClosest(event, '[data-repo-rename-input]');
+  if (!input || !repoRenameDraft || repoRenameDraft.busy) return;
+  const node = repoBrowserState.nodeMap.get(repoRenameDraft.path);
+  const original = String(node?.name || entryNameOf(repoRenameDraft.path));
+  if (String(input.value || '').trim() === original) cancelRepoRename();
+});
+
+document.getElementById('repo-folder').addEventListener('submit', (event) => {
+  if (!eventClosest(event, '[data-repo-new-folder-form]')) return;
+  event.preventDefault();
+  void commitRepoNewFolder();
+});
+
+// Right-click on a desktop, long press on a phone: the entry's menu.
+for (const hostId of ['repo-tree', 'repo-folder']) {
+  const host = document.getElementById(hostId);
+  const selector = hostId === 'repo-tree' ? '[data-repo-open-dir]' : '[data-repo-open-file]';
+  host.addEventListener('contextmenu', (event) => {
+    if (repoInlineInputOf(event)) return;
+    const element = eventClosest(event, selector);
+    if (!element) return;
+    if (openRepoEntryMenu(element, event.clientX, event.clientY)) event.preventDefault();
+  });
+  bindLongPress(host, selector, (element, x, y) => {
+    if (element.querySelector('[data-repo-rename-input]')) return;
+    openRepoEntryMenu(element, x, y);
+  });
+}
+
+// The delete confirmation lives in the shared summary modal.
+document.getElementById('summary-modal').addEventListener('click', (event) => {
+  if (!eventClosest(event, '[data-repo-delete-confirm]')) return;
+  event.preventDefault();
+  void confirmRepoDelete();
+});
+
+document.getElementById('summary-modal').addEventListener('input', (event) => {
+  const input = eventClosest(event, '[data-repo-delete-confirm-input]');
+  if (!input || !repoDeletePending) return;
+  const button = document.querySelector('#summary-modal [data-repo-delete-confirm]');
+  if (!button) return;
+  // The modal's loading toggle re-enables every button it does not see as
+  // kept disabled; the name gate has to be expressed through that mark.
+  const mismatch = String(input.value || '').trim() !== repoDeletePending.name;
+  button.disabled = mismatch;
+  if (mismatch) button.dataset.keepDisabled = '1';
+  else delete button.dataset.keepDisabled;
+});
+
+document.getElementById('summary-modal').addEventListener('keydown', (event) => {
+  if (event.key !== 'Enter' || !eventClosest(event, '[data-repo-delete-confirm-input]')) return;
+  event.preventDefault();
+  void confirmRepoDelete();
+});
+
 document.getElementById('repo-tree').addEventListener('click', (event) => {
+  if (repoInlineInputOf(event)) {
+    // A click in the rename input must not toggle the folder it sits in.
+    event.preventDefault();
+    return;
+  }
   const fileButton = eventClosest(event, '[data-repo-open-file]');
   if (fileButton) {
     event.preventDefault();
@@ -2258,6 +3140,12 @@ document.getElementById('repo-tree').addEventListener('click', (event) => {
 });
 
 document.getElementById('repo-folder').addEventListener('click', (event) => {
+  if (eventClosest(event, '[data-repo-new-folder-cancel]')) {
+    event.preventDefault();
+    cancelRepoNewFolder();
+    return;
+  }
+  if (eventClosest(event, '[data-repo-new-folder-form]') || repoInlineInputOf(event)) return;
   const navDir = eventClosest(event, '[data-repo-nav-dir]');
   if (navDir) {
     event.preventDefault();
@@ -2294,7 +3182,12 @@ document.addEventListener('keydown', (event) => {
   const modal = document.getElementById('file-preview-modal');
   const repoModal = document.getElementById('repo-browser-modal');
   const summaryModal = document.getElementById('summary-modal');
+  // Topmost first. The summary modal sits above the explorer (a delete
+  // confirmation opened from it) except in CWD-pick mode, where the explorer
+  // is raised above the new-chat/summary modal that opened it.
+  const summaryOnTop = summaryModal.classList.contains('visible') && !repoBrowserCwdPickModeActive();
   if (modal.classList.contains('visible')) closeFilePreview();
+  else if (summaryOnTop) window.closeSummaryModal?.();
   else if (repoModal.classList.contains('visible')) closeRepoBrowser();
   else if (summaryModal.classList.contains('visible')) window.closeSummaryModal?.();
 });