Polish populated workbench states

frontend/src/components/exports/ExportCenter.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import type { DatasetCreateResponse, ExportCreateResponse, ExportRead } from '../../types'
 
 interface ExportCenterProps {
@@ -34,6 +35,14 @@ function canPreviewJson(item: ExportRead): boolean {
   return true
 }
 
+function compactPath(value: string): string {
+  const parts = value.split('/').filter(Boolean)
+  if (parts.length <= 2) {
+    return value
+  }
+  return parts.slice(-2).join('/')
+}
+
 export function ExportCenter({
   selectedProjectId,
   selectedDataset,
@@ -53,9 +62,12 @@ export function ExportCenter({
   onPreviewContent,
   onDownload,
 }: ExportCenterProps): JSX.Element {
+  const [showAllExports, setShowAllExports] = useState(false)
   const canExportDataset = Boolean(selectedDataset && isVectorDatasetType(selectedDataset.dataset_type))
   const geojsonExports = exports.filter((item) => item.export_type.includes('geojson')).length
   const reportExports = exports.filter((item) => item.export_type === 'project_report_html').length
+  const visibleExports = showAllExports ? exports : exports.slice(0, 10)
+  const hiddenExportCount = Math.max(exports.length - visibleExports.length, 0)
 
   return (
     <section className="export-center" data-testid="export-center">
@@ -126,8 +138,18 @@ export function ExportCenter({
           <p>Create metadata, GeoJSON or HTML report artifacts once the active project has data to hand off.</p>
         </div>
       ) : null}
+      {exports.length > 10 ? (
+        <div className="list-limit-banner">
+          <span>
+            Showing {visibleExports.length} latest exports. {hiddenExportCount > 0 ? `${hiddenExportCount} older artifacts hidden.` : 'All artifacts shown.'}
+          </span>
+          <button type="button" className="secondary-action" onClick={() => setShowAllExports((value) => !value)}>
+            {showAllExports ? 'Show latest 10' : 'Show all exports'}
+          </button>
+        </div>
+      ) : null}
       <ul className="export-list">
-        {exports.map((item) => (
+        {visibleExports.map((item) => (
           <li className="export-card" key={item.id}>
             <div className="export-card-header">
               <div>
@@ -138,7 +160,7 @@ export function ExportCenter({
               </div>
               <span className={item.status === 'ready' ? 'status-badge status-badge-ready' : 'status-badge'}>{item.status}</span>
             </div>
-            <p>{item.storage_path}</p>
+            <p title={item.storage_path}>{compactPath(item.storage_path)}</p>
             <div className="button-row">
               {canPreviewJson(item) ? (
                 <button type="button" className="secondary-action" onClick={() => onPreviewContent(item.id)}>

frontend/src/components/exports/ExportPreview.tsx

@@ -2,11 +2,7 @@ interface ExportPreviewProps {
   content: Record<string, unknown> | null
 }
 
-export function ExportPreview({ content }: ExportPreviewProps): JSX.Element | null {
-  if (!content) {
-    return null
-  }
-
+export function ExportPreview({ content }: ExportPreviewProps): JSX.Element {
   return (
     <section className="export-preview-panel">
       <div className="panel-title-row">
@@ -16,7 +12,14 @@ export function ExportPreview({ content }: ExportPreviewProps): JSX.Element | nu
         </div>
         <span className="count-pill">preview</span>
       </div>
-      <pre className="job-result">{JSON.stringify(content, null, 2)}</pre>
+      {content ? (
+        <pre className="job-result">{JSON.stringify(content, null, 2)}</pre>
+      ) : (
+        <div className="empty-state">
+          <strong>No export preview selected.</strong>
+          <p>Use Preview JSON content on a JSON or GeoJSON artifact to inspect the stored payload here.</p>
+        </div>
+      )}
     </section>
   )
 }