Polish export preview readability

frontend/src/components/exports/ExportPreview.tsx

@@ -2,7 +2,26 @@ interface ExportPreviewProps {
   content: Record<string, unknown> | null
 }
 
+function formatBytes(value: number): string {
+  if (value < 1024) {
+    return `${value} B`
+  }
+  if (value < 1024 * 1024) {
+    return `${(value / 1024).toFixed(1)} KB`
+  }
+  return `${(value / (1024 * 1024)).toFixed(1)} MB`
+}
+
 export function ExportPreview({ content }: ExportPreviewProps): JSX.Element {
+  const previewJson = content ? JSON.stringify(content, null, 2) : ''
+  const previewStats = content
+    ? {
+        rootKeys: Object.keys(content).length,
+        previewSize: formatBytes(new Blob([previewJson]).size),
+        rootType: Array.isArray(content) ? 'array' : 'object',
+      }
+    : null
+
   return (
     <section className="export-preview-panel">
       <div className="panel-title-row">
@@ -13,7 +32,31 @@ export function ExportPreview({ content }: ExportPreviewProps): JSX.Element {
         <span className="count-pill">preview</span>
       </div>
       {content ? (
-        <pre className="job-result">{JSON.stringify(content, null, 2)}</pre>
+        <>
+          <div className="export-preview-summary" aria-label="Export preview summary">
+            <div className="export-preview-summary-card">
+              <span>Root type</span>
+              <strong>{previewStats?.rootType}</strong>
+            </div>
+            <div className="export-preview-summary-card">
+              <span>Root keys</span>
+              <strong>{previewStats?.rootKeys}</strong>
+            </div>
+            <div className="export-preview-summary-card">
+              <span>Preview size</span>
+              <strong>{previewStats?.previewSize}</strong>
+            </div>
+          </div>
+          <div className="export-preview-json-shell">
+            <div className="export-preview-json-toolbar">
+              <span>Stored JSON payload</span>
+              <span>{previewStats?.previewSize}</span>
+            </div>
+            <div className="export-preview-json-body">
+              <pre className="job-result">{previewJson}</pre>
+            </div>
+          </div>
+        </>
       ) : (
         <div className="empty-state">
           <strong>No export preview selected.</strong>