@agent-link/server 0.1.120 → 0.1.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-link/server",
-  "version": "0.1.120",
+  "version": "0.1.121",
   "description": "AgentLink relay server",
   "license": "MIT",
   "repository": {

package/web/app.js

@@ -17,6 +17,7 @@ import { createStreaming } from './modules/streaming.js';
 import { createSidebar } from './modules/sidebar.js';
 import { createConnection } from './modules/connection.js';
 import { createFileBrowser } from './modules/fileBrowser.js';
+import { createFilePreview } from './modules/filePreview.js';
 
 // ── App ─────────────────────────────────────────────────────────────────────
 const App = {
@@ -102,10 +103,16 @@ const App = {
     const fileTreeRoot = ref(null);
     const fileTreeLoading = ref(false);
     const fileContextMenu = ref(null);
-    const sidebarView = ref('sessions');       // 'sessions' | 'files' (mobile only)
+    const sidebarView = ref('sessions');       // 'sessions' | 'files' | 'preview' (mobile only)
     const isMobile = ref(window.innerWidth <= 768);
     const workdirMenuOpen = ref(false);
 
+    // File preview state
+    const previewPanelOpen = ref(false);
+    const previewPanelWidth = ref(parseInt(localStorage.getItem('agentlink-preview-panel-width'), 10) || 400);
+    const previewFile = ref(null);
+    const previewLoading = ref(false);
+
     // ── switchConversation: save current → load target ──
     // Defined here and used by sidebar.newConversation, sidebar.resumeSession, workdir_changed
     // Needs access to streaming / connection which are created later, so we use late-binding refs.
@@ -248,7 +255,7 @@ const App = {
       switchConversation,
     });
 
-    const { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap } = createConnection({
+    const { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, setFilePreview, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap } = createConnection({
       status, agentName, hostname, workDir, sessionId, error,
       serverVersion, agentVersion, latency,
       messages, isProcessing, isCompacting, visibleLimit, queuedMessages, usageStats,
@@ -277,6 +284,13 @@ const App = {
     });
     setFileBrowser(fileBrowser);
 
+    // File preview module
+    const filePreview = createFilePreview({
+      wsSend, previewPanelOpen, previewPanelWidth, previewFile, previewLoading,
+      sidebarView, sidebarOpen, isMobile,
+    });
+    setFilePreview(filePreview);
+
     // Track mobile state on resize
     let _resizeHandler = () => { isMobile.value = window.innerWidth <= 768; };
     window.addEventListener('resize', _resizeHandler);
@@ -501,6 +515,8 @@ const App = {
       filePanelOpen, filePanelWidth, fileTreeRoot, fileTreeLoading, fileContextMenu,
       sidebarView, isMobile, fileBrowser,
       flattenedTree: fileBrowser.flattenedTree,
+      // File preview
+      previewPanelOpen, previewPanelWidth, previewFile, previewLoading, filePreview,
       workdirMenuOpen,
       toggleWorkdirMenu() { workdirMenuOpen.value = !workdirMenuOpen.value; },
       workdirMenuBrowse() {
@@ -578,7 +594,8 @@ const App = {
                   class="file-tree-item"
                   :class="{ folder: item.node.type === 'directory' }"
                   :style="{ paddingLeft: (item.depth * 16 + 8) + 'px' }"
-                  @click="item.node.type === 'directory' ? fileBrowser.toggleFolder(item.node) : fileBrowser.onFileClick($event, item.node)"
+                  @click="item.node.type === 'directory' ? fileBrowser.toggleFolder(item.node) : filePreview.openPreview(item.node.path)"
+                  @contextmenu.prevent="item.node.type !== 'directory' ? fileBrowser.onFileClick($event, item.node) : null"
                 >
                   <span v-if="item.node.type === 'directory'" class="file-tree-arrow" :class="{ expanded: item.node.expanded }">&#9654;</span>
                   <span v-else class="file-tree-file-icon">
@@ -593,6 +610,43 @@ const App = {
             </div>
           </div>
 
+          <!-- Mobile: file preview view -->
+          <div v-else-if="isMobile && sidebarView === 'preview'" class="file-preview-mobile">
+            <div class="file-preview-mobile-header">
+              <button class="file-panel-mobile-back" @click="filePreview.closePreview()">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                Files
+              </button>
+              <span v-if="previewFile" class="file-preview-mobile-size">
+                {{ filePreview.formatFileSize(previewFile.totalSize) }}
+              </span>
+            </div>
+            <div class="file-preview-mobile-filename" :title="previewFile?.filePath">
+              {{ previewFile?.fileName || 'Preview' }}
+            </div>
+            <div class="preview-panel-body">
+              <div v-if="previewLoading" class="preview-loading">Loading...</div>
+              <div v-else-if="previewFile?.error" class="preview-error">
+                {{ previewFile.error }}
+              </div>
+              <div v-else-if="previewFile?.encoding === 'base64' && previewFile?.content"
+                   class="preview-image-container">
+                <img :src="'data:' + previewFile.mimeType + ';base64,' + previewFile.content"
+                     :alt="previewFile.fileName" class="preview-image" />
+              </div>
+              <div v-else-if="previewFile?.content" class="preview-text-container">
+                <pre class="preview-code"><code v-html="filePreview.highlightCode(previewFile.content, previewFile.fileName)"></code></pre>
+                <div v-if="previewFile.truncated" class="preview-truncated-notice">
+                  File truncated — showing first 100 KB of {{ filePreview.formatFileSize(previewFile.totalSize) }}
+                </div>
+              </div>
+              <div v-else-if="previewFile && !previewFile.content && !previewFile.error" class="preview-binary-info">
+                <p>Binary file — {{ previewFile.mimeType }}</p>
+                <p>{{ filePreview.formatFileSize(previewFile.totalSize) }}</p>
+              </div>
+            </div>
+          </div>
+
           <!-- Normal sidebar content (sessions view) -->
           <template v-else>
           <div class="sidebar-section">
@@ -742,7 +796,8 @@ const App = {
                 class="file-tree-item"
                 :class="{ folder: item.node.type === 'directory' }"
                 :style="{ paddingLeft: (item.depth * 16 + 8) + 'px' }"
-                @click="item.node.type === 'directory' ? fileBrowser.toggleFolder(item.node) : fileBrowser.onFileClick($event, item.node)"
+                @click="item.node.type === 'directory' ? fileBrowser.toggleFolder(item.node) : filePreview.openPreview(item.node.path)"
+                @contextmenu.prevent="item.node.type !== 'directory' ? fileBrowser.onFileClick($event, item.node) : null"
               >
                 <span v-if="item.node.type === 'directory'" class="file-tree-arrow" :class="{ expanded: item.node.expanded }">&#9654;</span>
                 <span v-else class="file-tree-file-icon">
@@ -970,6 +1025,50 @@ const App = {
             </div>
           </div>
         </div>
+
+        <!-- Preview Panel (desktop) -->
+        <Transition name="file-panel">
+        <div v-if="previewPanelOpen && !isMobile" class="preview-panel" :style="{ width: previewPanelWidth + 'px' }">
+          <div class="preview-panel-resize-handle"
+               @mousedown="filePreview.onResizeStart($event)"
+               @touchstart="filePreview.onResizeStart($event)"></div>
+          <div class="preview-panel-header">
+            <span class="preview-panel-filename" :title="previewFile?.filePath">
+              {{ previewFile?.fileName || 'Preview' }}
+            </span>
+            <span v-if="previewFile" class="preview-panel-size">
+              {{ filePreview.formatFileSize(previewFile.totalSize) }}
+            </span>
+            <button class="preview-panel-close" @click="filePreview.closePreview()" title="Close preview">&times;</button>
+          </div>
+          <div class="preview-panel-body">
+            <div v-if="previewLoading" class="preview-loading">Loading...</div>
+            <div v-else-if="previewFile?.error" class="preview-error">
+              {{ previewFile.error }}
+            </div>
+            <div v-else-if="previewFile?.encoding === 'base64' && previewFile?.content"
+                 class="preview-image-container">
+              <img :src="'data:' + previewFile.mimeType + ';base64,' + previewFile.content"
+                   :alt="previewFile.fileName" class="preview-image" />
+            </div>
+            <div v-else-if="previewFile?.content" class="preview-text-container">
+              <pre class="preview-code"><code v-html="filePreview.highlightCode(previewFile.content, previewFile.fileName)"></code></pre>
+              <div v-if="previewFile.truncated" class="preview-truncated-notice">
+                File truncated — showing first 100 KB of {{ filePreview.formatFileSize(previewFile.totalSize) }}
+              </div>
+            </div>
+            <div v-else-if="previewFile && !previewFile.content && !previewFile.error" class="preview-binary-info">
+              <div class="preview-binary-icon">
+                <svg viewBox="0 0 24 24" width="48" height="48"><path fill="currentColor" opacity="0.4" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
+              </div>
+              <p>Binary file</p>
+              <p class="preview-binary-meta">{{ previewFile.mimeType }}</p>
+              <p class="preview-binary-meta">{{ filePreview.formatFileSize(previewFile.totalSize) }}</p>
+            </div>
+          </div>
+        </div>
+        </Transition>
+
       </div>
 
       <!-- Folder Picker Modal -->

package/web/modules/connection.js

@@ -33,6 +33,10 @@ export function createConnection(deps) {
   let fileBrowser = null;
   function setFileBrowser(fb) { fileBrowser = fb; }
 
+  // File preview — set after creation to resolve circular dependency
+  let filePreview = null;
+  function setFilePreview(fp) { filePreview = fp; }
+
   let ws = null;
   let sessionKey = null;
   let reconnectAttempts = 0;
@@ -137,6 +141,11 @@ export function createConnection(deps) {
     }
 
     if (msg.type === 'claude_output') {
+      // Safety net: restore processing state if output arrives after reconnect
+      if (!cache.isProcessing) {
+        cache.isProcessing = true;
+        processingConversations.value[convId] = true;
+      }
       const data = msg.data;
       if (!data) return;
       if (data.type === 'content_block_delta' && data.delta) {
@@ -349,6 +358,15 @@ export function createConnection(deps) {
     const data = msg.data;
     if (!data) return;
 
+    // Safety net: if streaming output arrives but isProcessing is false
+    // (e.g. after reconnect before active_conversations response), self-correct
+    if (!isProcessing.value) {
+      isProcessing.value = true;
+      if (currentConversationId && currentConversationId.value) {
+        processingConversations.value[currentConversationId.value] = true;
+      }
+    }
+
     if (data.type === 'content_block_delta' && data.delta) {
       streaming.appendPending(data.delta);
       streaming.startReveal();
@@ -490,6 +508,7 @@ export function createConnection(deps) {
           }
           sidebar.requestSessionList();
           startPing();
+          wsSend({ type: 'query_active_conversations' });
         } else {
           status.value = 'Waiting';
           error.value = 'Agent is not connected yet.';
@@ -532,6 +551,59 @@ export function createConnection(deps) {
         }
         sidebar.requestSessionList();
         startPing();
+        wsSend({ type: 'query_active_conversations' });
+      } else if (msg.type === 'active_conversations') {
+        // Agent's response is authoritative — first clear all processing state,
+        // then re-apply only for conversations the agent reports as active.
+        // This corrects any stale isProcessing=true left by the safety net or
+        // from turns that finished while the socket was down.
+        const activeSet = new Set();
+        const convs = msg.conversations || [];
+        for (const entry of convs) {
+          if (entry.conversationId) activeSet.add(entry.conversationId);
+        }
+
+        // Clear foreground
+        if (!activeSet.has(currentConversationId && currentConversationId.value)) {
+          isProcessing.value = false;
+          isCompacting.value = false;
+        }
+        // Clear all cached background conversations
+        if (conversationCache) {
+          for (const [convId, cached] of Object.entries(conversationCache.value)) {
+            if (!activeSet.has(convId)) {
+              cached.isProcessing = false;
+              cached.isCompacting = false;
+            }
+          }
+        }
+        // Clear processingConversations map
+        if (processingConversations) {
+          for (const convId of Object.keys(processingConversations.value)) {
+            if (!activeSet.has(convId)) {
+              processingConversations.value[convId] = false;
+            }
+          }
+        }
+
+        // Now set state for actually active conversations
+        for (const entry of convs) {
+          const convId = entry.conversationId;
+          if (!convId) continue;
+          if (currentConversationId && currentConversationId.value === convId) {
+            // Foreground conversation
+            isProcessing.value = true;
+            isCompacting.value = !!entry.isCompacting;
+          } else if (conversationCache && conversationCache.value[convId]) {
+            // Background conversation
+            const cached = conversationCache.value[convId];
+            cached.isProcessing = true;
+            cached.isCompacting = !!entry.isCompacting;
+          }
+          if (processingConversations) {
+            processingConversations.value[convId] = true;
+          }
+        }
       } else if (msg.type === 'error') {
         streaming.flushReveal();
         finalizeStreamingMsg(scheduleHighlight);
@@ -722,11 +794,14 @@ export function createConnection(deps) {
             .sort((a, b) => a.name.localeCompare(b.name));
           if (msg.dirPath != null) folderPickerPath.value = msg.dirPath;
         }
+      } else if (msg.type === 'file_content') {
+        if (filePreview) filePreview.handleFileContent(msg);
       } else if (msg.type === 'workdir_changed') {
         workDir.value = msg.workDir;
         localStorage.setItem(`agentlink-workdir-${sessionId.value}`, msg.workDir);
         sidebar.addToWorkdirHistory(msg.workDir);
         if (fileBrowser) fileBrowser.onWorkdirChanged();
+        if (filePreview) filePreview.onWorkdirChanged();
 
         // Multi-session: switch to a new blank conversation for the new workdir.
         // Background conversations keep running and receiving output in their cache.
@@ -801,5 +876,5 @@ export function createConnection(deps) {
     ws.send(JSON.stringify({ type: 'authenticate', password: pwd }));
   }
 
-  return { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap };
+  return { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, setFilePreview, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap };
 }

package/web/modules/filePreview.js

@@ -0,0 +1,187 @@
+// ── File Preview: panel state, content rendering, resize handle ────────
+
+/**
+ * Creates the file preview controller.
+ * @param {object} deps - Reactive state and callbacks
+ */
+export function createFilePreview(deps) {
+  const {
+    wsSend,
+    previewPanelOpen,
+    previewPanelWidth,
+    previewFile,
+    previewLoading,
+    sidebarView,
+    sidebarOpen,
+    isMobile,
+  } = deps;
+
+  // ── Open / Close ──
+
+  function openPreview(filePath) {
+    // Skip re-fetch if same file already loaded
+    if (previewFile.value && previewFile.value.filePath === filePath && !previewFile.value.error) {
+      if (isMobile.value) {
+        sidebarView.value = 'preview';
+        sidebarOpen.value = true;
+      } else {
+        previewPanelOpen.value = true;
+      }
+      return;
+    }
+    if (isMobile.value) {
+      sidebarView.value = 'preview';
+      sidebarOpen.value = true;
+    } else {
+      previewPanelOpen.value = true;
+    }
+    previewLoading.value = true;
+    previewFile.value = null;
+    wsSend({ type: 'read_file', filePath });
+  }
+
+  function closePreview() {
+    if (isMobile.value) {
+      sidebarView.value = 'files';
+    } else {
+      previewPanelOpen.value = false;
+    }
+  }
+
+  // ── Handle file_content response ──
+
+  function handleFileContent(msg) {
+    previewLoading.value = false;
+    previewFile.value = {
+      filePath: msg.filePath,
+      fileName: msg.fileName,
+      content: msg.content,
+      encoding: msg.encoding,
+      mimeType: msg.mimeType,
+      truncated: msg.truncated,
+      totalSize: msg.totalSize,
+      error: msg.error || null,
+    };
+  }
+
+  // ── Workdir changed → close preview ──
+
+  function onWorkdirChanged() {
+    previewPanelOpen.value = false;
+    previewFile.value = null;
+    previewLoading.value = false;
+    if (sidebarView.value === 'preview') {
+      sidebarView.value = 'sessions';
+    }
+  }
+
+  // ── Syntax highlighting helpers ──
+
+  const LANG_MAP = {
+    ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript',
+    mjs: 'javascript', cjs: 'javascript', py: 'python', rb: 'ruby',
+    rs: 'rust', go: 'go', java: 'java', c: 'c', h: 'c',
+    cpp: 'cpp', hpp: 'cpp', cs: 'csharp', swift: 'swift', kt: 'kotlin',
+    lua: 'lua', r: 'r', sql: 'sql', sh: 'bash', bash: 'bash', zsh: 'bash',
+    fish: 'bash', ps1: 'powershell', bat: 'dos', cmd: 'dos',
+    json: 'json', json5: 'json', yaml: 'yaml', yml: 'yaml', toml: 'ini',
+    xml: 'xml', html: 'xml', htm: 'xml', css: 'css', scss: 'scss', less: 'less',
+    md: 'markdown', txt: 'plaintext', log: 'plaintext', graphql: 'graphql',
+    proto: 'protobuf', vue: 'xml', svelte: 'xml', ini: 'ini', cfg: 'ini',
+    conf: 'ini', env: 'bash',
+  };
+
+  function detectLanguage(fileName) {
+    const ext = (fileName || '').split('.').pop()?.toLowerCase();
+    return LANG_MAP[ext] || ext || 'plaintext';
+  }
+
+  function highlightCode(code, fileName) {
+    if (!code) return '';
+    if (!window.hljs) return escapeHtml(code);
+    const lang = detectLanguage(fileName);
+    try {
+      return window.hljs.highlight(code, { language: lang }).value;
+    } catch {
+      try {
+        return window.hljs.highlightAuto(code).value;
+      } catch {
+        return escapeHtml(code);
+      }
+    }
+  }
+
+  function escapeHtml(str) {
+    return str
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  // ── File size formatting ──
+
+  function formatFileSize(bytes) {
+    if (bytes == null) return '';
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  }
+
+  // ── Resize handle (mouse + touch) ──
+
+  let _resizing = false;
+  let _startX = 0;
+  let _startWidth = 0;
+  const MIN_WIDTH = 200;
+  const MAX_WIDTH = 800;
+
+  function onResizeStart(e) {
+    e.preventDefault();
+    _resizing = true;
+    _startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
+    _startWidth = previewPanelWidth.value;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    if (e.type === 'touchstart') {
+      document.addEventListener('touchmove', onResizeMove, { passive: false });
+      document.addEventListener('touchend', onResizeEnd);
+    } else {
+      document.addEventListener('mousemove', onResizeMove);
+      document.addEventListener('mouseup', onResizeEnd);
+    }
+  }
+
+  function onResizeMove(e) {
+    if (!_resizing) return;
+    if (e.type === 'touchmove') e.preventDefault();
+    const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
+    // Left edge resize: dragging left = wider, dragging right = narrower
+    const delta = _startX - clientX;
+    const newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, _startWidth + delta));
+    previewPanelWidth.value = newWidth;
+  }
+
+  function onResizeEnd() {
+    if (!_resizing) return;
+    _resizing = false;
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+    document.removeEventListener('mousemove', onResizeMove);
+    document.removeEventListener('mouseup', onResizeEnd);
+    document.removeEventListener('touchmove', onResizeMove);
+    document.removeEventListener('touchend', onResizeEnd);
+    localStorage.setItem('agentlink-preview-panel-width', String(previewPanelWidth.value));
+  }
+
+  return {
+    openPreview,
+    closePreview,
+    handleFileContent,
+    onWorkdirChanged,
+    detectLanguage,
+    highlightCode,
+    formatFileSize,
+    onResizeStart,
+  };
+}

package/web/style.css

@@ -2547,6 +2547,201 @@ body {
   opacity: 0.8;
 }
 
+/* ══════════════════════════════════════════
+   File Preview Panel
+   ══════════════════════════════════════════ */
+.preview-panel {
+  width: 400px;
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-left: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.preview-panel-resize-handle {
+  position: absolute;
+  top: 0;
+  left: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 10;
+  background: transparent;
+  transition: background 0.15s;
+}
+
+.preview-panel-resize-handle:hover,
+.preview-panel-resize-handle:active {
+  background: var(--accent);
+  opacity: 0.4;
+}
+
+.preview-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+}
+
+.preview-panel-filename {
+  flex: 1;
+  font-weight: 600;
+  font-size: 0.85rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-panel-size {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.preview-panel-close {
+  background: none;
+  border: none;
+  font-size: 1.2rem;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 0 0.25rem;
+  line-height: 1;
+}
+
+.preview-panel-close:hover {
+  color: var(--text);
+}
+
+.preview-panel-body {
+  flex: 1;
+  overflow: auto;
+  padding: 0;
+}
+
+.preview-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.preview-error {
+  padding: 1rem;
+  color: var(--error, #ef4444);
+  font-size: 0.85rem;
+}
+
+.preview-text-container {
+  overflow: auto;
+  height: 100%;
+}
+
+.preview-code {
+  margin: 0;
+  padding: 0.75rem;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  white-space: pre;
+  overflow-x: auto;
+  background: var(--bg);
+  font-family: var(--font-mono, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace);
+}
+
+.preview-code code {
+  font-family: inherit;
+}
+
+.preview-image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  height: 100%;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.preview-truncated-notice {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  border-top: 1px solid var(--border);
+  background: var(--bg-secondary, var(--bg-primary));
+  text-align: center;
+}
+
+.preview-binary-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 0.5rem;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.preview-binary-icon {
+  opacity: 0.4;
+  margin-bottom: 0.5rem;
+}
+
+.preview-binary-meta {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+/* ── Mobile file preview in sidebar ── */
+.file-preview-mobile {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.file-preview-mobile-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.file-preview-mobile-size {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.file-preview-mobile-filename {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text);
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+.file-preview-mobile .preview-panel-body {
+  flex: 1;
+  overflow: auto;
+}
+
 /* ══════════════════════════════════════════
    Medium screens — file panel narrower
    ══════════════════════════════════════════ */
@@ -2554,6 +2749,9 @@ body {
   .file-panel {
     max-width: clamp(200px, 20vw, 280px);
   }
+  .preview-panel {
+    max-width: min(400px, 40vw);
+  }
 }
 
 /* ══════════════════════════════════════════
@@ -2575,6 +2773,11 @@ body {
     display: none;
   }
 
+  /* Preview panel hidden on mobile — shown inside sidebar instead */
+  .preview-panel {
+    display: none;
+  }
+
   /* Sidebar as fixed overlay */
   .sidebar {
     position: fixed;