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>

frontend/src/styles/app.css

@@ -1771,6 +1771,74 @@ button.entity-card {
   max-height: 38rem;
 }
 
+.export-preview-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
+  gap: 0.55rem;
+  margin-top: 0.75rem;
+}
+
+.export-preview-summary-card {
+  display: grid;
+  gap: 0.14rem;
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.62rem;
+  background: #ffffff;
+}
+
+.export-preview-summary-card span {
+  color: var(--muted);
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.export-preview-summary-card strong {
+  overflow-wrap: anywhere;
+  font-size: 0.92rem;
+  line-height: 1.2;
+}
+
+.export-preview-json-shell {
+  min-width: 0;
+  margin-top: 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+  background: #0f172a;
+}
+
+.export-preview-json-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(226, 232, 240, 0.18);
+  padding: 0.55rem 0.68rem;
+  color: #cbd5e1;
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.export-preview-json-body {
+  max-height: 32rem;
+  overflow: auto;
+}
+
+.export-preview-json-body .job-result {
+  max-height: none;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: #0f172a;
+  color: #e2e8f0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
 .map-toolbar {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));