@acms-subir/core 0.3.2 → 0.3.3-next.20260929113209

package/integration.mjs

@@ -68,6 +68,7 @@ const ROUTES = [
   ['/api/email/run', 'api/email/run.ts'],
   ['/api/ops/status', 'api/ops/status.ts'],
   ['/admin/ai', 'admin/ai.astro'],
+  ['/admin/import', 'admin/import.astro'],
   ['/admin/tags', 'admin/tags.astro'],
   ['/admin/users', 'admin/users.astro'],
   // API
@@ -86,6 +87,10 @@ const ROUTES = [
   ['/api/mcp', 'api/mcp.ts'],
   ['/api/media/upload', 'api/media/upload.ts'],
   ['/api/restore', 'api/restore.ts'],
+  ['/api/export', 'api/export.ts'],
+  ['/api/import', 'api/import/index.ts'],
+  ['/api/import/asset', 'api/import/asset.ts'],
+  ['/api/import/media', 'api/import/media.ts'],
 ];
 
 // Packages imported by browser-side code (admin islands and the libs they

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.2",
+  "version": "0.3.3-next.20260929113209",
   "publishConfig": {
     "access": "public"
   },

package/src/components/import/ImportExport.tsx

@@ -0,0 +1,519 @@
+import { useEffect, useRef, useState } from 'react';
+import { openZip, type ZipIndex } from '../../lib/import/zipread';
+import { clearJournal, lite, readJournal, readSource, runImport, type ImportOptionsState, type Progress, type Source } from './runner';
+
+type Tab = 'import' | 'export' | 'history';
+type Counts = { create: number; update: number; skip: number };
+interface Decision { sourceId: string; type: 'post' | 'page'; title: string; slug: string; action: 'create' | 'update' | 'skip'; reason: string }
+interface Plan {
+  decisions: Decision[];
+  authors: { sourceId: string; name: string; email: string; choice: string; match: string }[];
+  users: { id: string; name: string; email: string }[];
+  counts: { posts: Counts; pages: Counts; tags: number; assets: number; redirects: number };
+}
+interface Run { id: string; source: string; label: string; status: 'running' | 'done' | 'undone'; report: Report; createdAt: number }
+interface Report {
+  counts?: { posts: { created: number; updated: number }; pages: { created: number; updated: number }; users: number; tags: number; media: number; redirects: number; nav: number };
+  settings?: string[];
+  warnings?: { item: string; code: string; message: string }[];
+  failedAssets?: { url: string; error: string }[];
+  undo?: { removed: number; kept: string[]; mediaRemoved: number };
+}
+
+const SOURCE_NAMES: Record<string, string> = { ghost: 'Ghost', acms: 'acms', wordpress: 'WordPress', markdown: 'Markdown' };
+const DEFAULTS: ImportOptionsState = { conflict: 'skip', identity: true, nav: true, redirects: true, headCode: false, authors: {} };
+const SETTING_NAMES: Record<string, string> = {
+  siteTitle: 'title', tagline: 'description', siteLogo: 'logo', siteFavicon: 'icon', siteCover: 'cover image',
+  timezone: 'timezone', locale: 'language', headCode: 'head code',
+};
+const settingNames = (keys: string[]) => keys.map((k) => SETTING_NAMES[k] ?? k).join(', ');
+const REASONS: Record<string, string> = { exists: 'slug already used', imported: 'imported before', done: 'already done' };
+
+async function post<T>(body: unknown): Promise<T> {
+  const res = await fetch('/api/import', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+  const data = await res.json().catch(() => null);
+  if (!res.ok || !data) throw new Error((data as { error?: string } | null)?.error ?? 'Request failed. Try again.');
+  return data as T;
+}
+const errText = (e: unknown) => (e instanceof Error && e.message ? e.message : 'Something went wrong. Try again.');
+const date = (ms: number) => new Date(ms).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+const plural = (n: number, one: string, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+
+export default function ImportExport({ initialTab = 'import' }: { initialTab?: Tab }) {
+  const [tab, setTab] = useState<Tab>(initialTab);
+  const [runs, setRuns] = useState<Run[] | null>(null);
+
+  async function loadRuns() {
+    const res = await fetch('/api/import');
+    if (res.ok) setRuns(((await res.json()) as { runs: Run[] }).runs);
+  }
+  useEffect(() => { void loadRuns(); }, []);
+
+  return (
+    <div className="imp">
+      <style>{CSS}</style>
+      <header className="page-head">
+        <div>
+          <h1>Import &amp; export</h1>
+          <p className="sub">Bring content in from another CMS, or move it between acms sites.</p>
+        </div>
+      </header>
+      <nav className="imp-tabs" role="tablist">
+        {(['import', 'export', 'history'] as const).map((t) => (
+          <button key={t} type="button" role="tab" aria-selected={tab === t} className={tab === t ? 'on' : ''} onClick={() => setTab(t)}>
+            {t === 'import' ? 'Import' : t === 'export' ? 'Export' : `History${runs?.length ? ` · ${runs.length}` : ''}`}
+          </button>
+        ))}
+        <a href="/admin/settings#backup">Backup &amp; restore</a>
+      </nav>
+      {tab === 'import' && <ImportTab onFinished={loadRuns} openHistory={() => setTab('history')} />}
+      {tab === 'export' && <ExportTab />}
+      {tab === 'history' && <HistoryTab runs={runs} reload={loadRuns} />}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+
+function ImportTab({ onFinished, openHistory }: { onFinished: () => void; openHistory: () => void }) {
+  const [file, setFile] = useState<File | null>(null);
+  const [siteUrl, setSiteUrl] = useState('');
+  const [source, setSource] = useState<Source | null>(null);
+  const [contentZip, setContentZip] = useState<{ name: string; zip: ZipIndex } | null>(null);
+  const [options, setOptions] = useState<ImportOptionsState>(DEFAULTS);
+  const [plan, setPlan] = useState<Plan | null>(null);
+  const [planKey, setPlanKey] = useState('');
+  const [busy, setBusy] = useState<'read' | 'plan' | 'run' | null>(null);
+  const [progress, setProgress] = useState<Progress | null>(null);
+  const [error, setError] = useState('');
+  const [result, setResult] = useState<Report | null>(null);
+  const [showWarnings, setShowWarnings] = useState(false);
+  const [showSkipped, setShowSkipped] = useState(false);
+  const signal = useRef({ cancelled: false });
+
+  const bundle = source?.bundle;
+  const isGhost = source?.kind === 'ghost';
+  // author picks don't change the dry run, so they don't make it stale
+  const planKeyFor = (o: ImportOptionsState) => JSON.stringify({ hash: source?.hash, siteUrl, conflict: o.conflict, redirects: o.redirects });
+  const key = planKeyFor(options);
+  const stale = !!plan && planKey !== key;
+  const assetFiles = bundle ? bundle.assets.filter((a) => a.kind !== 'media').length : 0;
+  const needsFiles = isGhost && assetFiles > 0 && !siteUrl.trim() && !contentZip && !source?.zip;
+  const resumable = source ? readJournal(source.hash) : null;
+  const toImport = plan ? plan.counts.posts.create + plan.counts.posts.update + plan.counts.pages.create + plan.counts.pages.update : 0;
+
+  async function pick(f: File | undefined) {
+    if (!f) return;
+    setFile(f); setError(''); setPlan(null); setResult(null); setSource(null); setBusy('read');
+    try {
+      const s = await readSource(f, siteUrl.trim());
+      setSource(s);
+      setOptions({ ...DEFAULTS, identity: s.kind === 'ghost', nav: s.kind === 'ghost' });
+    } catch (e) { setError(errText(e)); }
+    finally { setBusy(null); }
+  }
+
+  // absolute links back to the old site become relative, so a new address
+  // means parsing the export again. Check and Import call this too, so a
+  // typed address counts even if the field never lost focus.
+  async function applySiteUrl(): Promise<Source | null> {
+    const url = siteUrl.trim().replace(/\/+$/, '');
+    if (url && !/^https?:\/\/[^/\s]+$/.test(url)) { setError('Enter the old site’s address, like https://yoursite.com'); return null; }
+    setError('');
+    if (file && isGhost && url !== source?.bundle.source.siteUrl) {
+      try { const s = await readSource(file, url); setSource(s); return s; } catch (e) { setError(errText(e)); return null; }
+    }
+    return source;
+  }
+
+  async function pickContent(f: File | undefined) {
+    if (!f) return;
+    try { setContentZip({ name: f.name, zip: openZip(await f.arrayBuffer()) }); setError(''); }
+    catch (e) { setError(errText(e)); }
+  }
+
+  async function check() {
+    const current = await applySiteUrl();
+    if (!current) return;
+    setBusy('plan'); setError('');
+    try {
+      const p = await post<Plan>({ op: 'plan', bundle: lite(current.bundle), options });
+      setPlan(p);
+      setOptions({ ...options, authors: Object.fromEntries(p.authors.map((a) => [a.sourceId, options.authors[a.sourceId] ?? a.choice])) });
+      setPlanKey(planKeyFor(options));
+    } catch (e) { setError(errText(e)); }
+    finally { setBusy(null); }
+  }
+
+  async function run() {
+    const current = await applySiteUrl();
+    if (!current) return;
+    setBusy('run'); setError(''); signal.current = { cancelled: false };
+    try {
+      const { report } = await runImport(current, options, contentZip?.zip ?? null, setProgress, signal.current);
+      setResult(report as Report);
+      onFinished();
+    } catch (e) { setError(errText(e)); }
+    finally { setBusy(null); setProgress(null); }
+  }
+
+  function reset() {
+    setFile(null); setSource(null); setPlan(null); setResult(null); setContentZip(null); setSiteUrl(''); setError('');
+  }
+
+  if (result) return <Done report={result} reset={reset} openHistory={openHistory} />;
+
+  return (
+    <div className="imp-grid">
+      <section className="imp-card">
+        <label className={`imp-drop${file ? ' has-file' : ''}`}>
+          <input type="file" accept=".json,.zip,application/json,application/zip" disabled={!!busy} onChange={(e) => pick(e.target.files?.[0])} />
+          {file ? (
+            <span><b>{file.name}</b> · {(file.size / 1024 / 1024).toFixed(1)} MB{source && <> · detected <em>{SOURCE_NAMES[source.kind]}{source.bundle.source.version ? ` ${source.bundle.source.version.split('.').slice(0, 2).join('.')}` : ''}</em></>}</span>
+          ) : (
+            <span><b>Choose an export file</b> or drop it here</span>
+          )}
+          <small>{busy === 'read' ? 'Reading…' : file ? 'Choose another file' : 'Ghost (.json) · acms export (.zip) · WordPress and Markdown are next'}</small>
+        </label>
+
+        {source && bundle && (
+          <>
+            <dl className="imp-found">
+              <div><dt>Posts</dt><dd>{bundle.items.filter((i) => i.type === 'post').length}</dd></div>
+              <div><dt>Pages</dt><dd>{bundle.items.filter((i) => i.type === 'page').length}</dd></div>
+              <div><dt>Tags</dt><dd>{bundle.tags.length}</dd></div>
+              <div><dt>Authors</dt><dd>{bundle.authors.length}</dd></div>
+              <div><dt>Files</dt><dd>{assetFiles + bundle.media.length}</dd></div>
+            </dl>
+
+            {isGhost && (
+              <div className="imp-files">
+                <h3>Images and files</h3>
+                <p className="hint">Ghost exports don’t include images; the {plural(assetFiles, 'file')} they use are copied from the old site, or from its <code>content</code> folder as a ZIP if the site is offline.</p>
+                <label className="field"><span>Old site address</span>
+                  <input type="url" placeholder="https://yoursite.com" value={siteUrl} disabled={!!busy} onChange={(e) => setSiteUrl(e.target.value)} onBlur={() => void applySiteUrl()} />
+                </label>
+                <label className="imp-inline-file">
+                  <input type="file" accept=".zip,application/zip" disabled={!!busy} onChange={(e) => pickContent(e.target.files?.[0])} />
+                  <span className="btn sm">{contentZip ? 'Change ZIP' : 'Add content folder ZIP'}</span>
+                  <span className="hint">{contentZip ? `${contentZip.name} · ${plural(contentZip.zip.names.length, 'file')}` : 'Optional. Used first; the address is the fallback.'}</span>
+                </label>
+                {needsFiles && <p className="imp-mark warn">Without an address or ZIP, images will point at the old site and break when it goes away.</p>}
+              </div>
+            )}
+
+            <div className="imp-opts">
+              <div className="imp-opt">
+                <span>If a slug already exists</span>
+                <div className="seg" role="radiogroup">
+                  {([['skip', 'Skip'], ['update', 'Update'], ['copy', 'Import as copy']] as const).map(([v, l]) => (
+                    <button key={v} type="button" role="radio" aria-checked={options.conflict === v} className={options.conflict === v ? 'on' : ''} onClick={() => setOptions({ ...options, conflict: v })}>{l}</button>
+                  ))}
+                </div>
+              </div>
+              <div className="imp-opt">
+                <span>Also import</span>
+                <div className="imp-checks">
+                  <label className="check-row"><input type="checkbox" checked={options.identity} onChange={(e) => setOptions({ ...options, identity: e.target.checked })} />Site title, logo and icon</label>
+                  {bundle.nav.length > 0 && <label className="check-row"><input type="checkbox" checked={options.nav} onChange={(e) => setOptions({ ...options, nav: e.target.checked })} />Navigation ({bundle.nav.length})</label>}
+                  <label className="check-row"><input type="checkbox" checked={options.redirects} onChange={(e) => setOptions({ ...options, redirects: e.target.checked })} />Redirects from old URLs</label>
+                  {bundle.identity.headCode && <label className="check-row"><input type="checkbox" checked={options.headCode} onChange={(e) => setOptions({ ...options, headCode: e.target.checked })} />Head code <span className="hint">(analytics scripts: prefer Settings → Analytics)</span></label>}
+                </div>
+              </div>
+            </div>
+
+            {plan && plan.authors.length > 0 && (
+              <div className="imp-authors">
+                <h3>Authors</h3>
+                <p className="hint">New authors get a byline and an author page, but can’t sign in until you set a password in Users.</p>
+                {plan.authors.map((a) => (
+                  <div key={a.sourceId} className="imp-author">
+                    <div><b>{a.name}</b><small>{a.email}</small></div>
+                    <select value={options.authors[a.sourceId] ?? a.choice} onChange={(e) => setOptions({ ...options, authors: { ...options.authors, [a.sourceId]: e.target.value } })}>
+                      <option value="create">Create new author</option>
+                      <option value="skip">Leave off bylines</option>
+                      {plan.users.length > 0 && (
+                        <optgroup label="Existing user">
+                          {plan.users.map((u) => <option key={u.id} value={u.id}>{u.id === a.match ? `${u.name} (same email)` : u.name}</option>)}
+                        </optgroup>
+                      )}
+                      {plan.authors.length > 1 && (
+                        <optgroup label="Same person as">
+                          {plan.authors.filter((o) => o.sourceId !== a.sourceId && !(options.authors[o.sourceId] ?? '').startsWith('as:')).map((o) => <option key={o.sourceId} value={`as:${o.sourceId}`}>{o.name}</option>)}
+                        </optgroup>
+                      )}
+                    </select>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {error && <p className="flash error">{error}</p>}
+            <div className="imp-actions">
+              <button type="button" className="btn" disabled={!!busy} onClick={check}>{busy === 'plan' ? 'Checking…' : plan ? 'Check again' : 'Check import'}</button>
+              {plan && (
+                <button type="button" className="btn primary" disabled={!!busy || stale || toImport === 0} onClick={run} title={stale ? 'Options changed: check again first' : ''}>
+                  {busy === 'run' ? 'Importing…' : resumable?.runId ? `Resume import` : `Import ${plural(toImport, 'item')}`}
+                </button>
+              )}
+              {busy === 'run' && <button type="button" className="btn ghost" onClick={() => { signal.current.cancelled = true; }}>Pause</button>}
+              {resumable && !busy && <button type="button" className="btn ghost" onClick={() => { clearJournal(source.hash); setPlan(null); }}>Start over</button>}
+            </div>
+            {stale && <p className="hint">Options changed since the check. Check again to see the effect.</p>}
+          </>
+        )}
+        {!source && error && <p className="flash error">{error}</p>}
+      </section>
+
+      <aside className="imp-side">
+        {progress ? (
+          <div className="imp-card">
+            <h3>{progress.phase === 'assets' ? 'Copying files' : progress.phase === 'items' ? 'Importing posts and pages' : progress.phase === 'start' ? 'Adding authors and tags' : 'Finishing'}</h3>
+            <div className="imp-bar"><i style={{ width: `${progress.total ? Math.round((progress.done / progress.total) * 100) : 0}%` }} /></div>
+            <p className="hint">{progress.done} / {progress.total} · {progress.label}</p>
+            <p className="hint">You can leave this page; running the import again picks up where it stopped.</p>
+          </div>
+        ) : plan ? (
+          <div className="imp-card">
+            <h3>Dry run</h3>
+            <table className="imp-plan">
+              <thead><tr><th /><th>Create</th><th>Update</th><th>Skip</th></tr></thead>
+              <tbody>
+                <tr><td>Posts</td><Cells c={plan.counts.posts} /></tr>
+                <tr><td>Pages</td><Cells c={plan.counts.pages} /></tr>
+                <tr><td>Tags</td><td className="new">{plan.counts.tags}</td><td /><td /></tr>
+                <tr><td>Files</td><td className="new">{plan.counts.assets}</td><td /><td /></tr>
+                <tr><td>Redirects</td><td className="new">{plan.counts.redirects}</td><td /><td /></tr>
+              </tbody>
+            </table>
+            {plan.decisions.some((d) => d.action === 'skip') && (
+              <>
+                <button type="button" className="imp-link" onClick={() => setShowSkipped(!showSkipped)}>{showSkipped ? 'Hide' : 'Show'} skipped</button>
+                {showSkipped && (
+                  <ul className="imp-list">
+                    {plan.decisions.filter((d) => d.action === 'skip').map((d) => <li key={d.sourceId}>{d.title}<small>{REASONS[d.reason] ?? d.reason}</small></li>)}
+                  </ul>
+                )}
+              </>
+            )}
+            {bundle && bundle.warnings.length > 0 && (
+              <>
+                <p className="imp-mark warn">{plural(bundle.warnings.length, 'warning')}</p>
+                <button type="button" className="imp-link" onClick={() => setShowWarnings(!showWarnings)}>{showWarnings ? 'Hide' : 'Show'} warnings</button>
+                {showWarnings && <ul className="imp-list">{bundle.warnings.map((w, i) => <li key={i}>{w.message}</li>)}</ul>}
+              </>
+            )}
+          </div>
+        ) : (
+          <div className="imp-card imp-help">
+            <h3>How importing works</h3>
+            <ol>
+              <li>Choose an export. Nothing is saved yet.</li>
+              <li><b>Check import</b> shows what will be created, updated or skipped.</li>
+              <li>Import. Existing content is never deleted, and History can undo the run.</li>
+            </ol>
+            <p className="hint">The export file stays in your browser; only its content is sent, never Ghost’s keys or member data.</p>
+          </div>
+        )}
+      </aside>
+    </div>
+  );
+}
+
+function Cells({ c }: { c: Counts }) {
+  return (<><td className={c.create ? 'new' : ''}>{c.create}</td><td>{c.update}</td><td className={c.skip ? 'muted' : ''}>{c.skip}</td></>);
+}
+
+function Done({ report, reset, openHistory }: { report: Report; reset: () => void; openHistory: () => void }) {
+  const c = report.counts;
+  return (
+    <section className="imp-card imp-done">
+      <p className="imp-mark ok">Import finished</p>
+      {c && (
+        <p>
+          {plural(c.posts.created, 'post')} and {plural(c.pages.created, 'page')} created
+          {c.posts.updated + c.pages.updated ? `, ${c.posts.updated + c.pages.updated} updated` : ''} · {plural(c.media, 'file')} · {plural(c.users, 'author')} · {plural(c.tags, 'tag')} · {plural(c.redirects, 'redirect')}
+          {report.settings?.length ? ' · site identity updated' : ''}
+        </p>
+      )}
+      {!!report.failedAssets?.length && (
+        <>
+          <p className="imp-mark warn">{plural(report.failedAssets.length, 'file')} couldn’t be copied and still point at the old site</p>
+          <ul className="imp-list">{report.failedAssets.map((f, i) => <li key={i}>{f.url}<small>{f.error}</small></li>)}</ul>
+        </>
+      )}
+      {!!report.warnings?.length && (
+        <>
+          <p className="imp-mark warn">{plural(report.warnings.length, 'thing')} to review</p>
+          <ul className="imp-list">{report.warnings.map((w, i) => <li key={i}>{w.message}</li>)}</ul>
+        </>
+      )}
+      <div className="imp-actions">
+        <a className="btn primary" href="/admin/c/posts">View posts</a>
+        <button type="button" className="btn" onClick={openHistory}>History</button>
+        <button type="button" className="btn ghost" onClick={reset}>Import another file</button>
+      </div>
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+
+function ExportTab() {
+  return (
+    <div className="imp-grid">
+      <section className="imp-card">
+        <h3>Export content</h3>
+        <p>A ZIP with every post, page, tag, author byline, navigation item and redirect, plus your uploaded media. Import it into any acms site; it merges with what’s there instead of replacing it.</p>
+        <p className="hint">Not included: bookings, users’ passwords, API keys, email and provider settings. For a complete copy of this site, use a backup.</p>
+        <div className="imp-actions"><a className="btn primary" href="/api/export" download>Download export</a></div>
+      </section>
+      <aside className="imp-side">
+        <div className="imp-card imp-help">
+          <h3>Export or backup?</h3>
+          <table className="imp-plan imp-compare">
+            <tbody>
+              <tr><td /><th>Export</th><th>Backup</th></tr>
+              <tr><td>Use for</td><td>Moving content</td><td>Recovery</td></tr>
+              <tr><td>Import</td><td>Merges</td><td>Replaces all</td></tr>
+              <tr><td>Bookings</td><td>No</td><td>Yes</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </aside>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+
+function HistoryTab({ runs, reload }: { runs: Run[] | null; reload: () => Promise<void> }) {
+  const [open, setOpen] = useState('');
+  const [confirming, setConfirming] = useState('');
+  const [removeMedia, setRemoveMedia] = useState(true);
+  const [busy, setBusy] = useState('');
+  const [error, setError] = useState('');
+
+  async function undo(run: Run) {
+    setBusy(run.id); setError('');
+    try { await post({ op: 'undo', runId: run.id, removeMedia }); await reload(); setConfirming(''); setOpen(run.id); }
+    catch (e) { setError(errText(e)); }
+    finally { setBusy(''); }
+  }
+
+  if (!runs) return <p className="hint">Loading…</p>;
+  if (!runs.length) return <div className="imp-card empty-state"><b>No imports yet</b><p>Imports you run appear here with their report, and can be undone.</p></div>;
+  return (
+    <section className="imp-card imp-history">
+      {error && <p className="flash error">{error}</p>}
+      {runs.map((r) => {
+        const c = r.report.counts;
+        return (
+          <div key={r.id} className="imp-run">
+            <div className="imp-run-head">
+              <div className="imp-run-title">
+                <b>{r.label || SOURCE_NAMES[r.source] || r.source}</b>
+                <small>{SOURCE_NAMES[r.source] ?? r.source} · {date(r.createdAt)}</small>
+              </div>
+              <span className={`imp-mark ${r.status === 'done' ? 'ok' : r.status === 'undone' ? 'muted' : 'warn'}`}>{r.status === 'done' ? 'Imported' : r.status === 'undone' ? 'Undone' : 'Unfinished'}</span>
+              {c && <span className="hint">{plural(c.posts.created + c.pages.created, 'item')} · {plural(c.media, 'file')}</span>}
+              <div className="imp-run-actions">
+                <button type="button" className="btn sm ghost" onClick={() => setOpen(open === r.id ? '' : r.id)}>{open === r.id ? 'Hide' : 'Report'}</button>
+                {r.status !== 'undone' && confirming !== r.id && <button type="button" className="btn sm danger" onClick={() => { setConfirming(r.id); setRemoveMedia(true); }}>Undo</button>}
+              </div>
+            </div>
+            {confirming === r.id && (
+              <div className="imp-confirm">
+                <p>Delete the posts and pages this import created, plus the authors, tags, redirects and menu items it added? Anything edited since the import is kept.</p>
+                {!!c?.media && <label className="check-row"><input type="checkbox" checked={removeMedia} onChange={(e) => setRemoveMedia(e.target.checked)} />Also delete the {plural(c.media, 'file')} it uploaded</label>}
+                <div className="imp-actions">
+                  <button type="button" className="btn sm danger" disabled={busy === r.id} onClick={() => undo(r)}>{busy === r.id ? 'Undoing…' : 'Undo import'}</button>
+                  <button type="button" className="btn sm ghost" disabled={busy === r.id} onClick={() => setConfirming('')}>Cancel</button>
+                </div>
+              </div>
+            )}
+            {open === r.id && (
+              <div className="imp-run-body">
+                {c && <p>{plural(c.posts.created, 'post')}, {plural(c.pages.created, 'page')} created; {c.posts.updated + c.pages.updated} updated · {plural(c.users, 'author')} · {plural(c.tags, 'tag')} · {plural(c.redirects, 'redirect')} · {plural(c.nav, 'menu item')}{r.report.settings?.length ? ` · site ${settingNames(r.report.settings)}` : ''}</p>}
+                {r.report.undo && <p className="hint">Undo removed {plural(r.report.undo.removed, 'item')}{r.report.undo.mediaRemoved ? ` and ${plural(r.report.undo.mediaRemoved, 'file')}` : ''}.{r.report.undo.kept.length ? ` Kept because they were edited: ${r.report.undo.kept.join(', ')}.` : ''}</p>}
+                {!!r.report.failedAssets?.length && <ul className="imp-list">{r.report.failedAssets.map((f, i) => <li key={i}>{f.url}<small>{f.error}</small></li>)}</ul>}
+                {!!r.report.warnings?.length && <ul className="imp-list">{r.report.warnings.map((w, i) => <li key={i}>{w.message}</li>)}</ul>}
+                {r.status === 'running' && <p className="hint">This run stopped before finishing. Choose the same file on the Import tab to resume it.</p>}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </section>
+  );
+}
+
+const CSS = `
+.imp{max-width:1080px}
+.imp-tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin:0 0 18px;align-items:flex-end}
+.imp-tabs button,.imp-tabs a{background:none;border:0;padding:8px 0;font:600 13.5px/1.2 inherit;color:var(--muted);cursor:pointer;text-decoration:none;box-shadow:inset 0 -2px 0 transparent}
+.imp-tabs button.on{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
+.imp-tabs button:hover,.imp-tabs a:hover{color:var(--text)}
+.imp-tabs a{margin-left:auto;font-weight:500}
+.imp-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
+.imp-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:20px 22px}
+.imp-card h3{font-size:14px;margin:0 0 8px;letter-spacing:-.01em}
+.imp-card p{margin:0 0 10px;font-size:13.5px}
+.imp-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:16px}
+.imp-drop{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px dashed var(--line-strong);border-radius:12px;padding:22px;text-align:center;cursor:pointer;background:var(--bg);transition:border-color .15s}
+.imp-drop:hover{border-color:var(--accent)}
+.imp-drop.has-file{padding:14px}
+.imp-drop input{position:absolute;opacity:0;width:1px;height:1px}
+.imp-drop em{font-style:normal;color:var(--accent-deep);font-weight:600}
+.imp-drop small{color:var(--faint);font-size:12px}
+.imp-found{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0 4px}
+.imp-found div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
+.imp-found dt{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
+.imp-found dd{margin:2px 0 0;font-size:20px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
+.imp-files,.imp-authors{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
+.imp-files .field{margin:10px 0 8px}
+.imp-inline-file{display:flex;align-items:center;gap:10px;cursor:pointer}
+.imp-inline-file input{position:absolute;opacity:0;width:1px;height:1px}
+.imp-opts{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;display:grid;gap:12px}
+.imp-opt{display:grid;grid-template-columns:170px 1fr;gap:10px;align-items:start}
+.imp-opt > span{font-size:12.5px;color:var(--muted);font-weight:600;padding-top:6px}
+.imp-checks .check-row{margin:4px 0}
+.imp-author{display:grid;grid-template-columns:1fr 240px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
+.imp-author:last-child{border-bottom:0}
+.imp-author small{display:block;color:var(--faint);font-size:12px}
+.imp-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}
+.imp-bar{height:8px;background:var(--sel);border-radius:4px;overflow:hidden;margin:10px 0 8px}
+.imp-bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
+.imp-plan{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 10px}
+.imp-plan th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;text-align:right;padding:6px 4px}
+.imp-plan td{padding:7px 4px;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
+.imp-plan td:first-child{text-align:left;color:var(--text)}
+.imp-plan td.new{color:var(--accent-deep);font-weight:650}
+.imp-plan td.muted{color:var(--faint)}
+.imp-compare th,.imp-compare td{text-align:left}
+.imp-mark{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;margin:8px 0 4px}
+.imp-mark::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor;flex:none}
+.imp-mark.ok{color:var(--green)}
+.imp-mark.warn{color:var(--amber)}
+.imp-mark.muted{color:var(--faint)}
+.imp-link{background:none;border:0;padding:0;color:var(--accent-deep);font:600 12.5px inherit;cursor:pointer;display:block;margin:2px 0 6px}
+.imp-list{margin:4px 0 8px;padding:0;list-style:none;max-height:260px;overflow:auto;font-size:12.5px}
+.imp-list li{padding:6px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
+.imp-list li:last-child{border-bottom:0}
+.imp-list small{display:block;color:var(--faint)}
+.imp-help ol{margin:0 0 10px;padding-left:18px;font-size:13px}
+.imp-help li{margin:4px 0}
+.imp-done{max-width:720px}
+.imp-run{border-bottom:1px solid var(--line);padding:12px 0}
+.imp-run:first-child{padding-top:0}
+.imp-run:last-child{border-bottom:0;padding-bottom:0}
+.imp-run-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
+.imp-run-head .imp-mark{margin:0}
+.imp-run-title{flex:1;min-width:200px}
+.imp-run-title small{display:block;color:var(--faint);font-size:12px}
+.imp-run-actions{display:flex;gap:6px}
+.imp-run-body{margin-top:10px;font-size:13px}
+.imp-confirm{margin-top:10px;background:var(--red-soft);border-radius:10px;padding:12px 14px;font-size:13px}
+.imp-confirm .imp-actions{margin-top:8px}
+@media(max-width:900px){.imp-grid{grid-template-columns:1fr}.imp-side{position:static}.imp-found{grid-template-columns:repeat(3,1fr)}.imp-opt,.imp-author{grid-template-columns:1fr}}
+`;