diff --git a/www/document.html b/www/document.html
index 7a110a0..1093a55 100644
--- a/www/document.html
+++ b/www/document.html
@@ -334,6 +334,44 @@
       display: none;
     }
 
+    .docPreviewMeta {
+      border: 1px solid var(--muted-color);
+      border-radius: 8px;
+      padding: 10px;
+      margin-bottom: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      background: color-mix(in srgb, var(--secondary-color) 88%, var(--muted-color) 12%);
+    }
+
+    .docPreviewMetaRow {
+      font-size: 84%;
+      line-height: 1.4;
+      word-break: break-word;
+    }
+
+    .docPreviewMetaLabel {
+      font-weight: 700;
+      color: var(--primary-color);
+    }
+
+    .docPreviewImageWrap {
+      margin-top: 6px;
+    }
+
+    .docPreviewImage {
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+      border: 1px solid var(--muted-color);
+      display: block;
+    }
+
+    .docPreviewContent {
+      min-height: 40px;
+    }
+
     #divDocumentInfo {
       font-size: 72%;
       color: var(--muted-color);
@@ -1215,12 +1253,47 @@ user:
       return window.DOMPurify ? window.DOMPurify.sanitize(html) : html;
     }
 
+    function normalizePreviewImageUrl(rawUrl) {
+      const value = String(rawUrl || '').trim();
+      if (!value) return '';
+      try {
+        const parsed = new URL(value, window.location.origin);
+        if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+          return parsed.href;
+        }
+      } catch (_error) {
+        // ignore invalid urls
+      }
+      return '';
+    }
+
+    function renderDocumentMetaPreview() {
+      const title = String(inpDocumentTitle?.value || '').trim();
+      const summary = String(inpDocumentSummary?.value || '').trim();
+      const tags = String(inpDocumentTags?.value || '').trim();
+      const imageUrl = normalizePreviewImageUrl(inpDocumentImage?.value || '');
+      const imageBlock = imageUrl
+        ? `<div class="docPreviewImageWrap"><img class="docPreviewImage" src="${escapeHtml(imageUrl)}" alt="Document image" loading="lazy" /></div>`
+        : '';
+
+      return `
+        <div class="docPreviewMeta">
+          <div class="docPreviewMetaRow"><span class="docPreviewMetaLabel">Title:</span> ${escapeHtml(title || '—')}</div>
+          <div class="docPreviewMetaRow"><span class="docPreviewMetaLabel">Summary:</span> ${escapeHtml(summary || '—')}</div>
+          <div class="docPreviewMetaRow"><span class="docPreviewMetaLabel">Tags:</span> ${escapeHtml(tags || '—')}</div>
+          ${imageBlock}
+        </div>
+      `;
+    }
+
     function updateDocumentView() {
       if (!taDocument || !divDocumentPreview) return;
       if (documentViewMode === 'markdown') {
         taDocument.style.display = 'none';
         divDocumentPreview.style.display = 'block';
-        divDocumentPreview.innerHTML = renderDocumentPreview(taDocument.value || '');
+        const metaHtml = renderDocumentMetaPreview();
+        const bodyHtml = renderDocumentPreview(taDocument.value || '');
+        divDocumentPreview.innerHTML = `${metaHtml}<div class="docPreviewContent">${bodyHtml}</div>`;
         return;
       }
       taDocument.style.display = 'block';
@@ -3526,6 +3599,7 @@ user:
         inputEl.addEventListener('input', () => {
           if (CURRENT_NOTE) setDocumentInfo(`Editing draft • d:${CURRENT_NOTE} • UNSAVED`);
           scheduleDocumentAutosave();
+          updateDocumentView();
           renderCurrentConversation();
         });
         inputEl.addEventListener('blur', () => {
diff --git a/www/js/version.json b/www/js/version.json
index 04439bd..9ca460c 100644
--- a/www/js/version.json
+++ b/www/js/version.json
@@ -1,5 +1,5 @@
 {
-  "VERSION": "v0.7.9",
-  "VERSION_NUMBER": "0.7.9",
-  "BUILD_DATE": "2026-04-28T14:44:22.682Z"
+  "VERSION": "v0.7.10",
+  "VERSION_NUMBER": "0.7.10",
+  "BUILD_DATE": "2026-04-28T16:33:28.943Z"
 }