collabmd 0.1.29 → 0.1.31

package/src/client/bootstrap/collabmd-app-shell.js

@@ -22,6 +22,7 @@ import { TabActivityLock } from '../infrastructure/tab-activity-lock.js';
 import { vaultApiClient } from '../infrastructure/vault-api-client.js';
 import { WorkspaceSyncClient } from '../infrastructure/workspace-sync-client.js';
 import { BacklinksPanel } from '../presentation/backlinks-panel.js';
+import { BasesPreviewController } from '../presentation/bases-preview-controller.js';
 import { CommentUiController } from '../presentation/comment-ui-controller.js';
 import { DrawioEmbedController } from '../presentation/drawio-embed-controller.js';
 import { ExcalidrawEmbedController } from '../presentation/excalidraw-embed-controller.js';
@@ -185,6 +186,13 @@ export class CollabMdAppShell {
     this.videoEmbed = new VideoEmbedController({
       previewElement: this.elements.previewContent,
     });
+    this.basesPreview = new BasesPreviewController({
+      getActiveFilePath: () => this.currentFilePath,
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      previewElement: this.elements.previewContent,
+      toastController: this.toastController,
+      vaultApiClient: this.vaultApiClient,
+    });
     this.imageLightbox = new ImageLightboxController({
       previewElement: this.elements.previewContent,
     });
@@ -199,6 +207,7 @@ export class CollabMdAppShell {
         });
         this.videoEmbed.reconcileEmbeds(this.elements.previewContent);
         this.videoEmbed.syncLayout();
+        this.basesPreview.reconcileEmbeds(this.elements.previewContent);
         this.drawioEmbed.reconcileEmbeds(this.elements.previewContent);
         this.drawioEmbed.syncLayout();
         this.excalidrawEmbed.reconcileEmbeds(this.elements.previewContent, { isLargeDocument: stats.isLargeDocument });
@@ -212,6 +221,11 @@ export class CollabMdAppShell {
         this.drawioEmbed.detachForCommit();
         this.excalidrawEmbed.detachForCommit();
       },
+      onPreviewLayoutChange: () => {
+        this.scrollSyncController.invalidatePreviewBlocks();
+        this.schedulePreviewLayoutSync({ delayMs: 0 });
+        this.refreshCommentUiLayout();
+      },
       onRenderComplete: () => {
         this.videoEmbed.syncLayout();
         this.drawioEmbed.syncLayout();
@@ -237,6 +251,7 @@ export class CollabMdAppShell {
       scrollEditorToLine: (lineNumber, viewportRatio) => this.session?.scrollToLine(lineNumber, viewportRatio),
     });
     this.backlinksPanel = new BacklinksPanel({
+      headerPanelElement: this.elements.backlinksHeaderPanel,
       inlinePanelElement: this.elements.backlinksInlinePanel,
       onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
       panelElement: this.elements.backlinksPanel,
@@ -279,11 +294,13 @@ export class CollabMdAppShell {
     });
     this.workspacePreviewController = new WorkspacePreviewController({
       backlinksPanel: this.backlinksPanel,
+      basesPreview: this.basesPreview,
       drawioEmbed: this.drawioEmbed,
       elements: this.elements,
       excalidrawEmbed: this.excalidrawEmbed,
       getDisplayName: (filePath) => this.getDisplayName(filePath),
       getSession: () => this.session,
+      isBaseFile: (filePath) => this.isBaseFile(filePath),
       isDrawioFile: (filePath) => this.isDrawioFile(filePath),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
       isImageFile: (filePath) => this.isImageFile(filePath),
@@ -369,6 +386,7 @@ export class CollabMdAppShell {
       getLocalUser: () => this.lobby.getLocalUser(),
       getStoredUserName: () => this.getStoredUserName(),
       getTheme: () => this.themeController.getTheme(),
+      isBaseFile: (filePath) => this.isBaseFile(filePath),
       isDrawioFile: (filePath) => this.isDrawioFile(filePath),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
       isImageFile: (filePath) => this.isImageFile(filePath),
@@ -392,8 +410,15 @@ export class CollabMdAppShell {
         this.clearInitialFileBootstrap();
       },
       onConnectionChange: (state) => this.handleConnectionChange(state),
-      onContentChange: ({ isMermaid, isPlantUml }) => {
+      onContentChange: ({ isBase, isMermaid, isPlantUml }) => {
         this.handleCommentEditorContentChange();
+        if (isBase) {
+          void this.renderBaseFilePreview(this.currentFilePath, {
+            source: this.session?.getText?.() ?? '',
+          });
+          return;
+        }
+
         this.previewRenderer.queueRender();
         if (!isMermaid && !isPlantUml) {
           this.scheduleBacklinkRefresh();
@@ -417,6 +442,7 @@ export class CollabMdAppShell {
         this.commentUi.attachSession(session);
       },
       onRenderDrawioPreview: (filePath) => this.renderDrawioFilePreview(filePath),
+      onRenderBasePreview: (filePath) => this.renderBaseFilePreview(filePath),
       onRenderExcalidrawPreview: (filePath) => this.renderExcalidrawFilePreview(filePath),
       onRenderImagePreview: (filePath) => this.renderImageFilePreview(filePath),
       onSyncWrapToggle: () => this.syncWrapToggle(),
@@ -426,7 +452,10 @@ export class CollabMdAppShell {
       },
       onUpdateLobbyCurrentFile: (filePath) => this.lobby.setCurrentFile(filePath),
       onUpdateVisibleChrome: (filePath, { displayName }) => {
-        this.syncFileChrome(filePath, { drawioMode: this.currentDrawioMode });
+        this.syncFileChrome(filePath, {
+          drawioMode: this.currentDrawioMode,
+          preferPreviewForBase: this.isBaseFile(filePath),
+        });
         this.syncCommentChrome(filePath);
         this.syncFileHistoryButton({ filePath, mode: 'editor' });
         if (this.elements.activeFileName) {

package/src/client/domain/markdown-formatting.js

@@ -434,7 +434,7 @@ function formatHorizontalRule(text, range) {
 export function createMarkdownToolbarEdit(documentText, selectionRange, action) {
   const text = String(documentText ?? '');
   const range = normalizeRange(selectionRange, text.length);
-  let edit = null;
+  let edit;
 
   switch (action) {
     case 'bold':

package/src/client/domain/markdown-toolbar-actions.js

@@ -59,6 +59,34 @@ const ICONS = Object.freeze({
       <path d="M9 16h6"/>
     </svg>
   `,
+  indent: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M4 6h16"/>
+      <path d="M10 12h10"/>
+      <path d="M10 18h10"/>
+      <path d="m4 9 4 3-4 3"/>
+    </svg>
+  `,
+  outdent: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M4 6h16"/>
+      <path d="M10 12h10"/>
+      <path d="M10 18h10"/>
+      <path d="m8 9-4 3 4 3"/>
+    </svg>
+  `,
+  redo: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M21 7v6h-6"/>
+      <path d="M20 13a8 8 0 0 0-14-3"/>
+    </svg>
+  `,
+  undo: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M3 7v6h6"/>
+      <path d="M4 13a8 8 0 0 1 14-3"/>
+    </svg>
+  `,
   chevronDown: `
     <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
       <path d="m6 9 6 6 6-6"/>
@@ -148,6 +176,13 @@ const INLINE_ACTIONS = Object.freeze([
   { action: 'code', label: 'Inline code', title: 'Inline code', icon: ICONS.code },
 ]);
 
+const MOBILE_EDIT_COMMANDS = Object.freeze([
+  { commandId: 'undo', label: 'Undo', title: 'Undo', icon: ICONS.undo },
+  { commandId: 'redo', label: 'Redo', title: 'Redo', icon: ICONS.redo },
+  { commandId: 'indentMore', label: 'Indent', title: 'Indent', icon: ICONS.indent },
+  { commandId: 'indentLess', label: 'Outdent', title: 'Outdent', icon: ICONS.outdent },
+]);
+
 const MEDIA_ACTIONS = Object.freeze([
   { action: 'link', label: 'Insert link', title: 'Insert link', icon: ICONS.link },
   { action: 'image', label: 'Insert image', title: 'Insert image', icon: ICONS.image },
@@ -160,6 +195,7 @@ const INSERT_ACTIONS = Object.freeze([
 ]);
 
 export const markdownToolbarLayout = Object.freeze([
+  { kind: 'buttons', groupLabel: 'Edit', actions: MOBILE_EDIT_COMMANDS, mobileOnly: true },
   { kind: 'block-menu', actions: BLOCK_MENU_ACTIONS },
   { kind: 'buttons', groupLabel: 'Inline formatting', actions: INLINE_ACTIONS },
   { kind: 'buttons', groupLabel: 'Media and links', actions: MEDIA_ACTIONS },

package/src/client/domain/vault-paths.js

@@ -1,4 +1,5 @@
 import {
+  isBaseFilePath,
   isDrawioFilePath,
   isMermaidFilePath,
   isPlantUmlFilePath,
@@ -47,6 +48,24 @@ export function createMarkdownStarter(filePath) {
   return `# ${title}\n\n`;
 }
 
+export function createBaseStarter(filePath) {
+  const normalizedPath = normalizeVaultPathInput(filePath);
+  const nextPath = isBaseFilePath(normalizedPath)
+    ? normalizedPath
+    : `${normalizedPath}.base`;
+  return {
+    content: [
+      'views:',
+      '  - type: table',
+      '    name: Table',
+      '    order:',
+      '      - file.name',
+      '',
+    ].join('\n'),
+    path: nextPath,
+  };
+}
+
 export function createMermaidStarter(filePath) {
   const normalizedPath = normalizeVaultPathInput(filePath);
   const nextPath = isMermaidFilePath(normalizedPath)

package/src/client/export/export-page.js

@@ -1,4 +1,10 @@
-import { runExportAdapter, postExportPageMessage, prepareExportSnapshot, waitForBootstrapPayload } from './export-pipeline.js';
+import {
+  postExportPageMessage,
+  prepareExportSnapshot,
+  runExportAdapter,
+  waitForBootstrapPayload,
+  waitForRenderedExportContent,
+} from './export-pipeline.js';
 import { groupHeadingWithFollowingBlock } from './export-print-layout.js';
 
 function setStatus(message) {
@@ -28,13 +34,14 @@ function renderWarnings(snapshot) {
 function renderSnapshot(snapshot) {
   const mount = document.getElementById('exportContent');
   if (!mount) {
-    return;
+    return null;
   }
 
   document.title = `${snapshot.title} — Export`;
   mount.innerHTML = snapshot.html;
   groupHeadingWithFollowingBlock(mount);
   renderWarnings(snapshot);
+  return mount;
 }
 
 async function bootstrap() {
@@ -42,7 +49,8 @@ async function bootstrap() {
     setStatus('Loading export content…');
     const payload = await waitForBootstrapPayload();
     const snapshot = await prepareExportSnapshot(payload);
-    renderSnapshot(snapshot);
+    const mount = renderSnapshot(snapshot);
+    snapshot.html = await waitForRenderedExportContent(mount);
     setStatus(payload.action === 'pdf' ? 'Opening print dialog…' : 'Preparing DOCX download…');
     await runExportAdapter(snapshot, payload.action);
     setStatus(payload.action === 'pdf' ? 'Print dialog opened.' : 'DOCX download started.');

package/src/client/export/export-pipeline.js

@@ -23,6 +23,7 @@ const LIGHT_EXPORT_MERMAID_THEME = Object.freeze({
 });
 const EXPORT_ASSET_FETCH_TIMEOUT_MS = 10_000;
 const EXPORT_ASSET_MAX_BYTES = 10 * 1024 * 1024;
+const EXPORT_RENDER_SETTLE_TIMEOUT_MS = 10_000;
 const VIDEO_POSTER_CAPTURE_TIMEOUT_MS = 10_000;
 const VIDEO_POSTER_CAPTURE_SEEK_SECONDS = 1;
 
@@ -48,6 +49,10 @@ function encodeSvgDataUrl(svgMarkup) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
 }
 
+function waitForAnimationFrame() {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+
 function blobToDataUrl(blob) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -177,6 +182,49 @@ async function imageDataUrlToPngDataUrl(dataUrl) {
   return canvas.toDataURL('image/png');
 }
 
+async function waitForImageElement(image, {
+  timeoutMs = EXPORT_RENDER_SETTLE_TIMEOUT_MS,
+} = {}) {
+  if (!(image instanceof HTMLImageElement)) {
+    return;
+  }
+
+  if (!image.getAttribute('src')) {
+    return;
+  }
+
+  if (!image.complete) {
+    await new Promise((resolve) => {
+      let settled = false;
+      const cleanup = () => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        window.clearTimeout(timeoutId);
+        image.removeEventListener('load', handleDone);
+        image.removeEventListener('error', handleDone);
+      };
+      const handleDone = () => {
+        cleanup();
+        resolve();
+      };
+      const timeoutId = window.setTimeout(handleDone, timeoutMs);
+
+      image.addEventListener('load', handleDone, { once: true });
+      image.addEventListener('error', handleDone, { once: true });
+
+      if (image.complete) {
+        handleDone();
+      }
+    });
+  }
+
+  if (typeof image.decode === 'function') {
+    await image.decode().catch(() => {});
+  }
+}
+
 async function fetchJson(url, init = {}) {
   const response = await fetch(url, {
     headers: {
@@ -217,7 +265,9 @@ async function fetchAsDataUrl(src, {
     });
   } catch (error) {
     if (error instanceof DOMException && error.name === 'AbortError') {
-      throw new Error(`Timed out while fetching asset: ${assetUrl.toString()}`);
+      throw new Error(`Timed out while fetching asset: ${assetUrl.toString()}`, {
+        cause: error,
+      });
     }
     throw error;
   } finally {
@@ -1320,8 +1370,8 @@ export async function docxAdapter(snapshot) {
 }
 
 export async function printPdfAdapter() {
-  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
-  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+  await waitForAnimationFrame();
+  await waitForAnimationFrame();
 
   await new Promise((resolve) => {
     const timeoutId = window.setTimeout(resolve, 1500);
@@ -1335,6 +1385,33 @@ export async function printPdfAdapter() {
   });
 }
 
+export async function waitForRenderedExportContent(container, {
+  settleFrames = 2,
+  timeoutMs = EXPORT_RENDER_SETTLE_TIMEOUT_MS,
+} = {}) {
+  if (!container) {
+    return '';
+  }
+
+  const imageWaiters = Array.from(container.querySelectorAll('img')).map((image) => (
+    waitForImageElement(image, { timeoutMs })
+  ));
+  const fontReadyPromise = document.fonts?.ready
+    ? Promise.resolve(document.fonts.ready).catch(() => {})
+    : Promise.resolve();
+
+  await Promise.allSettled([
+    fontReadyPromise,
+    ...imageWaiters,
+  ]);
+
+  for (let index = 0; index < settleFrames; index += 1) {
+    await waitForAnimationFrame();
+  }
+
+  return container.innerHTML;
+}
+
 export async function runExportAdapter(snapshot, format) {
   if (format === 'pdf') {
     await printPdfAdapter(snapshot);

package/src/client/infrastructure/editor-session.js

@@ -258,6 +258,10 @@ export class EditorSession {
     this.viewAdapter.requestMeasure();
   }
 
+  runEditorCommand(commandId) {
+    return this.viewAdapter.runEditorCommand(commandId);
+  }
+
   applyMarkdownToolbarAction(action) {
     return this.viewAdapter.applyMarkdownToolbarAction(action);
   }

package/src/client/infrastructure/editor-view-adapter.js

@@ -1,6 +1,16 @@
 import { autocompletion, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentLess,
+  indentMore,
+  indentWithTab,
+  redo,
+  undo,
+} from '@codemirror/commands';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { yaml } from '@codemirror/lang-yaml';
 import {
   bracketMatching,
   defaultHighlightStyle,
@@ -10,7 +20,7 @@ import {
   syntaxHighlighting,
 } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import { highlightSelectionMatches, openSearchPanel, searchKeymap } from '@codemirror/search';
 import { Compartment, EditorSelection, EditorState, Prec, StateEffect, StateField } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
@@ -28,6 +38,7 @@ import {
 } from '@codemirror/view';
 import { yCollab } from 'y-codemirror.next';
 
+import { isBaseFilePath, isPlantUmlFilePath } from '../../domain/file-kind.js';
 import { normalizeCommentQuote } from '../../domain/comment-threads.js';
 import { createMarkdownToolbarEdit } from '../domain/markdown-formatting.js';
 import { wikiLinkCompletions } from '../domain/wiki-link-completions.js';
@@ -42,6 +53,13 @@ const REMOTE_UPDATE_FLASH_DURATION_MS = 1350;
 const REMOTE_UPDATE_CARET_MAX_LENGTH = 160;
 const RECENT_LOCAL_INPUT_WINDOW_MS = 900;
 const TASK_LIST_MARKER_PATTERN = /^(\s*(?:>\s*)*(?:[-+*]|\d+[.)])\s+\[)( |x|X)(\])(\s.*)?$/;
+const EDITOR_COMMANDS = Object.freeze({
+  indentLess,
+  indentMore,
+  openSearch: openSearchPanel,
+  redo,
+  undo,
+});
 
 class RemoteUpdateCaretWidget extends WidgetType {
   toDOM() {
@@ -280,14 +298,15 @@ function createEditorTheme(theme) {
   }, { dark: theme === 'dark' });
 }
 
-function createLanguageExtension(filePath) {
-  if (
-    typeof filePath === 'string'
-    && (filePath.toLowerCase().endsWith('.puml') || filePath.toLowerCase().endsWith('.plantuml'))
-  ) {
+export function createLanguageExtension(filePath) {
+  if (isPlantUmlFilePath(filePath)) {
     return plantUmlLanguage;
   }
 
+  if (isBaseFilePath(filePath)) {
+    return yaml();
+  }
+
   return markdown({ base: markdownLanguage, codeLanguages: markdownCodeLanguages });
 }
 
@@ -557,6 +576,24 @@ export class EditorViewAdapter {
     this.editorView?.requestMeasure();
   }
 
+  runEditorCommand(commandId) {
+    if (!this.editorView) {
+      return false;
+    }
+
+    const command = EDITOR_COMMANDS[String(commandId ?? '')];
+    if (typeof command !== 'function') {
+      return false;
+    }
+
+    const applied = command(this.editorView);
+    if (applied && commandId !== 'openSearch') {
+      this.editorView.focus();
+    }
+
+    return applied;
+  }
+
   flashRemoteRange({ from = 0, to = 0 } = {}, durationMs = REMOTE_UPDATE_FLASH_DURATION_MS) {
     const state = this.editorView?.state;
     if (!state || state.doc.length === 0) {

package/src/client/infrastructure/excalidraw-room-client.js

@@ -258,10 +258,14 @@ export class ExcalidrawRoomClient {
     } catch (readError) {
       if (readError?.status !== 404 || !createIfMissing) {
         if (readError?.status === 404) {
-          throw new Error(readError.message || 'Excalidraw file not found');
+          throw new Error(readError.message || 'Excalidraw file not found', {
+            cause: readError,
+          });
         }
 
-        throw new Error(readError?.message || 'Failed to load Excalidraw file');
+        throw new Error(readError?.message || 'Failed to load Excalidraw file', {
+          cause: readError,
+        });
       }
     }
 
@@ -278,11 +282,15 @@ export class ExcalidrawRoomClient {
           const existingData = await this.vaultClient.readFile(this.filePath);
           return parseSceneJson(existingData.content);
         } catch (conflictReadError) {
-          throw new Error(conflictReadError?.message || 'Failed to load existing Excalidraw file after create conflict');
+          throw new Error(conflictReadError?.message || 'Failed to load existing Excalidraw file after create conflict', {
+            cause: conflictReadError,
+          });
         }
       }
 
-      throw new Error(createError?.message || 'Failed to create Excalidraw file');
+      throw new Error(createError?.message || 'Failed to create Excalidraw file', {
+        cause: createError,
+      });
     }
   }
 

package/src/client/infrastructure/vault-api-client.js

@@ -36,6 +36,60 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to read file');
   }
 
+  async queryBase({
+    activeFilePath = '',
+    path = '',
+    search = '',
+    source = null,
+    sourcePath = '',
+    view = '',
+  } = {}) {
+    const response = await fetch(resolveApiUrl('/base/query'), {
+      body: JSON.stringify({
+        activeFilePath,
+        path,
+        search,
+        source,
+        sourcePath,
+        view,
+      }),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to query base');
+  }
+
+  async exportBaseCsv({
+    activeFilePath = '',
+    path = '',
+    search = '',
+    source = null,
+    sourcePath = '',
+    view = '',
+  } = {}) {
+    const response = await fetch(resolveApiUrl('/base/export'), {
+      body: JSON.stringify({
+        activeFilePath,
+        path,
+        search,
+        source,
+        sourcePath,
+        view,
+      }),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    });
+    if (!response.ok) {
+      const payload = await response.json().catch(() => ({}));
+      throw new Error(payload.error || 'Failed to export base CSV');
+    }
+
+    return {
+      blob: await response.blob(),
+      contentDisposition: response.headers.get('content-disposition') || '',
+    };
+  }
+
   async createFile({ content, path, requestId = null }) {
     const response = await fetch(resolveApiUrl('/file'), {
       body: JSON.stringify({ content, path }),

package/src/client/presentation/app-shell-template.js

@@ -242,6 +242,14 @@ export function appShellTemplate() {
                 <span class="ui-toolbar-button-label">Share</span>
               </button>
 
+              <button class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'toolbar-search-files-btn' })} id="searchFilesBtn" aria-label="Search files" title="Search files">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                  <circle cx="11" cy="11" r="7"></circle>
+                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+                <span class="ui-toolbar-button-label">Search files</span>
+              </button>
+
               <details class="toolbar-overflow-group hidden" id="exportMenuGroup">
                 <summary class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'toolbar-overflow-group-toggle' })} aria-label="Export options" title="Export">
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -327,6 +335,13 @@ export function appShellTemplate() {
                   <span class="pane-label-meta" id="lineInfo">Ln 1, Col 1</span>
                 </div>
                 <div class="pane-header-actions">
+                  <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true, extra: 'mobile-editor-find-btn' })} id="editorFindBtn" aria-label="Find in file" title="Find in file">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                      <circle cx="11" cy="11" r="7"></circle>
+                      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    <span class="ui-action-label">Find</span>
+                  </button>
                   <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true, extra: 'hidden' })} id="commentSelectionBtn" aria-label="Comment current line or selection" title="Comment current line or selection">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                       <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
@@ -363,6 +378,18 @@ export function appShellTemplate() {
               <div class="pane-header">
                 <span class="pane-label">Preview</span>
                 <div class="pane-header-actions">
+                  <div id="backlinksHeaderPanel" class="backlinks-panel backlinks-panel-header hidden" data-backlinks-variant="header">
+                    <button type="button" class="backlinks-header" aria-expanded="false">
+                      <svg class="backlinks-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="9 18 15 12 9 6"></polyline>
+                      </svg>
+                      <span class="backlinks-toggle">0 Linked Mentions</span>
+                      <span class="backlinks-count"></span>
+                    </button>
+                    <div class="backlinks-body" aria-hidden="true" inert>
+                      <div class="backlinks-list"></div>
+                    </div>
+                  </div>
                   <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true, extra: 'hidden' })} id="commentsToggle" aria-label="Toggle comments" title="Toggle comments">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                       <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>