Space UI: Hub design system, header/hero, KPI strip, status pills and episode bars

app.py

@@ -7,7 +7,7 @@ from urllib.parse import quote
 import gradio as gr
 import requests
 
-from cards import CSS, card_payload, render
+from cards import CSS, card_payload, grader_intro, header, kpis, render, section, share_strip
 from quick_grade import parse_ref, quick_grade
 
 # ZeroGPU compatibility shim. If the Space is ever scheduled on ZeroGPU hardware,
@@ -42,12 +42,14 @@ def examples():
     with ThreadPoolExecutor(max_workers=3) as pool:
         payloads = [p for p in pool.map(published, FEATURED) if p]
     if not payloads:
-        return '<p>Featured reports are unavailable. You can still grade a public dataset above.</p>'
-    totals = {k: sum(p['counts'].get(k, 0) for p in payloads) for k in ('total', 'pass_count', 'review')}
-    return (f'<p class="k-kpis">{len(payloads)} featured reports · {totals["total"]} episodes assessed · '
-            f'{totals["pass_count"]} passed within scope · {totals["review"]} requiring review</p>'
-            '<div class="k-cards">' + ''.join(render(p) for p in payloads) + '</div>'
-            '<p>Totals cover these examples only. Reports may use different revisions and assessment scopes.</p>')
+        return '<div class="k-html"><p class="k-small k-muted">Featured reports are unavailable right now. You can still grade a public dataset above.</p></div>'
+    return ('<div class="k-html"><p class="k-small k-muted" style="margin:0">KPIs cover these example reports only.</p>'
+            + kpis(payloads) + '<div class="k-cards">' + ''.join(render(p) for p in payloads) + '</div>'
+            '<p class="k-foot">Published CLI assessments · outcomes apply within the recorded scope. Reports may use different revisions and assessment scopes.</p></div>')
+
+
+def _one(html):
+    return f'<div class="k-html"><div class="k-cards" style="grid-template-columns:minmax(0,1fr);max-width:420px">{html}</div></div>' if html else ''
 
 
 def run(ref):
@@ -56,7 +58,7 @@ def run(ref):
         # Always run fresh. Existing published reports never short-circuit grading.
         card = quick_grade(ref)
         payload = card_payload(card, KALANOS_API)
-        return render(payload, published=False), payload['markdown'], 'Quick audit complete. Video: not assessed.', card
+        return _one(render(payload, published=False)), payload['markdown'], 'Quick audit complete. Video: not assessed.', card
     except ValueError as exc:
         return '', '', str(exc), None
     except Exception:
@@ -68,7 +70,7 @@ def lookup(ref):
     try:
         payload = published(parse_ref(ref))
         if payload:
-            return render(payload), payload['markdown'], 'Stored assessment shown with its recorded date and scope. Grade dataset runs a fresh audit.', None
+            return _one(render(payload)), payload['markdown'], 'Stored assessment shown with its recorded date and scope. Grade dataset runs a fresh audit.', None
     except ValueError as exc:
         return '', '', str(exc), None
     return '', '', 'No published schema-7 report found. Grade dataset to run a fresh quick audit.', None
@@ -81,25 +83,33 @@ def lookup(ref):
 # Until then: copy the HF card Markdown, or publish from the CLI.
 
 with gr.Blocks(title='Kalanos · Robotics Dataset Quality') as demo:
-    gr.Markdown('# Kalanos · Robotics Dataset Quality\nCheck a LeRobot dataset. Explore and share its quality report.')
-    gr.Markdown('### Grade your dataset\nPublic LeRobot v2/v3 · numeric checks · video off. Up to 500 episodes, 128 MiB of numeric/metadata files, 3 minutes. Larger or private datasets: use the CLI.')
-    with gr.Row():
-        ref_in = gr.Textbox(label='Public HF dataset', placeholder='lerobot/pusht', scale=4)
-        go = gr.Button('Grade dataset', variant='primary', scale=1)
-    # Secondary action stays clear; report cards themselves use compact icons.
-    lookup_btn = gr.Button('View published assessment', size='sm')
-    status = gr.Textbox(label='Audit status', interactive=False)
+    gr.HTML(header(KALANOS_API))
+    with gr.Group(elem_classes='k-grader'):
+        gr.HTML(grader_intro())
+        with gr.Row():
+            ref_in = gr.Textbox(label='Public HF dataset', placeholder='lerobot/pusht', scale=4, show_label=False, container=False)
+            go = gr.Button('Grade dataset', variant='primary', scale=1, elem_classes='k-primary')
+            # Secondary action stays clear; report cards themselves use compact icons.
+            lookup_btn = gr.Button('View published assessment', scale=1, elem_classes='k-secondary')
+        status = gr.Textbox(label='Audit status', interactive=False, lines=1, max_lines=2, elem_classes='k-status', container=False, placeholder='Audit status appears here.')
     out = gr.HTML()
     report_state = gr.State(None, time_to_live=600)
-    with gr.Accordion('HF card Markdown', open=False):
+    with gr.Accordion('HF card Markdown', open=False, elem_classes='k-accordion'):
         card_text = gr.Code(language='markdown', label='Copy into your existing dataset README', interactive=False)
-    gr.Markdown('### Featured dataset reports')
+    gr.HTML(section('Featured dataset reports', 'Live from Kalanos Hub'))
     featured = gr.HTML()
     demo.load(examples, outputs=featured)
     go.click(run, inputs=ref_in, outputs=[out, card_text, status, report_state], concurrency_limit=1, concurrency_id='audit')
     ref_in.submit(run, inputs=ref_in, outputs=[out, card_text, status, report_state], concurrency_limit=1, concurrency_id='audit')
     lookup_btn.click(lookup, inputs=ref_in, outputs=[out, card_text, status, report_state])
-    gr.Markdown(f'[Kalanos Hub]({KALANOS_API}/datasets) · [CLI](https://github.com/KalanosAI) · [Method](https://kalanos.ai/methodology)')
+    gr.HTML(share_strip(KALANOS_API))
+
+THEME = gr.themes.Base(
+    primary_hue=gr.themes.colors.slate, neutral_hue=gr.themes.colors.stone,
+    font=[gr.themes.GoogleFont('IBM Plex Sans'), 'sans-serif'],
+    font_mono=[gr.themes.GoogleFont('IBM Plex Mono'), 'monospace'],
+).set(body_background_fill='#f2efe6', body_text_color='#202622', block_radius='0px', button_large_radius='3px',
+      input_radius='3px', input_background_fill='#ffffff', input_border_color='#d2d3cb')
 
 if __name__ == '__main__':
-    demo.queue(max_size=4).launch(css=CSS)
+    demo.queue(max_size=4).launch(css=CSS, theme=THEME)

cards.py

@@ -1,4 +1,8 @@
-"""Escaped report cards; no invented scores or client-side regrading."""
+"""Escaped report cards and page chrome; no invented scores or client-side regrading.
+
+Visual language follows design/hf-card-mockup in the publisher repo: IBM Plex,
+paper/navy/sage palette, status pills, two-tone episode bars, compact icon actions.
+"""
 from html import escape
 from urllib.parse import quote
 
@@ -7,17 +11,73 @@ ICONS = {
     'card': '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M7 13h4M7 16h8"/>',
     'hf': '<path d="M14 3h7v7m0-7L10 14M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5"/>',
 }
-CSS = '''
-.k-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
-.k-card{background:var(--block-background-fill,#fff);border:1px solid #d2d3cb;padding:16px;min-width:0}
-.k-card h3{font-size:17px!important;overflow-wrap:anywhere}.k-score{font-size:30px;margin:12px 0}
-.k-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px}.k-stats b{display:block;font-size:21px}
-.k-actions{display:flex;align-items:flex-start;gap:4px;margin-top:12px;flex-wrap:wrap}
-.k-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer;list-style:none}
-.k-icon:hover{background:#e9efe8}.k-icon:focus-visible{outline:2px solid #176b62}.k-icon::-webkit-details-marker{display:none}
-.k-card details[open]{flex-basis:100%}.k-card textarea{width:100%;box-sizing:border-box;min-height:230px;font:12px/1.5 monospace}.k-card table{width:100%;font-size:12px}.k-card td{overflow-wrap:anywhere;padding:5px}
-.k-meta{font-size:11px;overflow-wrap:anywhere;margin-top:12px}.k-kpis{padding:12px 0;font-size:14px}
-@media(max-width:760px){.k-cards{grid-template-columns:1fr}}@media(pointer:coarse){.k-icon{width:44px;height:44px}}
+
+FONTS = ("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;450;500;600"
+         "&family=IBM+Plex+Mono:wght@400;500&display=swap")
+
+# Design tokens mirror the mockup's :root. Everything below is scoped to the
+# Gradio container (.gradio-container) or to k-* classes so it never leaks into
+# the HF Space chrome around the app.
+CSS = f'''
+@import url('{FONTS}');
+:root{{--k-paper:#f2efe6;--k-ink:#202622;--k-muted:#656962;--k-line:#d2d3cb;--k-navy:#102638;--k-green:#527664;--k-amber:#bd9552;--k-sage:#e9efe8;--k-link:#176b62}}
+.gradio-container{{background:var(--k-paper)!important;color:var(--k-ink)!important;font-family:'IBM Plex Sans',sans-serif!important;max-width:1150px!important;margin:auto!important}}
+.gradio-container .prose,.gradio-container label,.gradio-container input,.gradio-container textarea,.gradio-container button{{font-family:'IBM Plex Sans',sans-serif!important;color:var(--k-ink)}}
+.gradio-container .prose a,.k-html a{{color:var(--k-link)}}
+.gradio-container .block,.gradio-container .form{{background:transparent!important;border:0!important;box-shadow:none!important}}
+.gradio-container input[type=text],.gradio-container textarea{{background:#fff!important;border:1px solid var(--k-line)!important;border-radius:3px!important;box-shadow:none!important}}
+.gradio-container input[type=text]:focus-visible{{outline:3px solid #dc8437!important;outline-offset:3px}}
+.gradio-container .k-primary{{background:var(--k-navy)!important;color:#fff!important;border:1px solid var(--k-navy)!important;border-radius:3px!important;font-weight:500}}
+.gradio-container .k-primary:hover{{background:#24475a!important}}
+.gradio-container .k-secondary{{background:#fff!important;border:1px solid var(--k-line)!important;color:var(--k-ink)!important;border-radius:3px!important}}
+.gradio-container .k-secondary:hover{{border-color:#506d68!important;background:#f5f8f5!important}}
+.gradio-container .k-status textarea{{font-family:'IBM Plex Mono',monospace!important;font-size:12px!important;color:var(--k-muted)!important;background:transparent!important;border:0!important;padding:0!important}}
+.gradio-container .k-status label span{{display:none}}
+.gradio-container .accordion,.gradio-container .k-accordion{{border:1px solid var(--k-line)!important;background:#fff!important;border-radius:0!important}}
+
+.k-mono,.k-eyebrow{{font-family:'IBM Plex Mono',monospace;font-size:12px}}
+.k-eyebrow{{letter-spacing:1px;text-transform:uppercase;color:var(--k-muted)}}
+.k-eyebrow.accent{{color:var(--k-link)}}
+.k-muted{{color:var(--k-muted)}}.k-small{{font-size:13px}}
+
+.k-nav{{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid #afb4a9;margin-bottom:8px}}
+.k-nav a{{color:var(--k-ink);text-decoration:none}}.k-nav .k-links{{display:flex;align-items:center;gap:22px;flex-wrap:wrap}}
+.k-btn{{border:1px solid var(--k-line);background:#fff;padding:9px 14px;border-radius:3px;text-decoration:none;display:inline-block;color:var(--k-ink)}}
+.k-btn.primary{{background:var(--k-navy);color:#fff!important;border-color:var(--k-navy)}}.k-btn.primary:hover{{background:#24475a}}
+.k-hero{{max-width:750px;margin:22px 0 12px}}.k-hero h1{{font-size:34px;letter-spacing:-1px;line-height:1.2;margin:4px 0 6px;font-weight:500}}.k-hero p{{margin:6px 0 10px;color:var(--k-muted)}}
+.k-hero .k-linklist{{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}}
+.k-grader{{background:var(--k-sage);border:1px solid #bdcbbb;padding:16px 20px 6px;margin:14px 0 22px}}.k-grader h3{{margin:0 0 4px;font-size:19px;font-weight:500}}.k-grader p{{margin:4px 0 8px;font-size:13px;color:var(--k-muted)}}
+.k-section{{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:20px 0 4px}}.k-section h2{{font-size:24px;letter-spacing:-.5px;margin:0;font-weight:500}}
+
+.k-kpis{{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--k-line);margin:12px 0 16px}}
+.k-kpis>div{{padding:12px 18px;border-right:1px solid var(--k-line)}}.k-kpis>div:last-child{{border:0}}
+.k-kpis strong{{display:block;font-size:26px;font-weight:500;line-height:1.2}}.k-kpis span{{font-size:12px;color:var(--k-muted)}}
+
+.k-cards{{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}}
+.k-card{{background:#fff;border:1px solid var(--k-line);padding:17px;min-width:0;display:flex;flex-direction:column}}
+.k-card h3{{font-size:21px;margin:8px 0 4px;font-weight:500}}
+.k-pill{{display:inline-block;align-self:flex-start;padding:4px 9px;font-size:12px;border:0}}
+.k-pill.review{{background:#fbedd4;color:#70501d}}.k-pill.pass{{background:#e8f0e9;color:#375b44}}.k-pill.blocked{{background:#f3dcd8;color:#6b2a22}}.k-pill.incomplete{{background:#ebebe6;color:#4b4f49}}
+.k-card-id{{font:11px 'IBM Plex Mono',monospace;overflow-wrap:anywhere;min-height:32px;color:var(--k-muted)}}
+.k-score{{min-height:82px;margin:10px 0 6px;border-bottom:1px solid var(--k-line);padding-bottom:10px}}
+.k-score strong{{font-size:40px;font-weight:500;line-height:1.2;display:block}}.k-score strong.unestablished{{font-size:23px;margin:10px 0}}.k-score .k-small{{font-size:16px}}
+.k-stats{{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:6px 0 12px}}.k-stats strong{{display:block;font-size:21px;font-weight:500}}.k-stats span{{font-size:12px;color:var(--k-muted)}}
+.k-bar{{height:8px;display:flex;margin:8px 0;border-radius:3px;overflow:hidden;background:#ebebe6}}
+.k-bar span{{display:block;height:100%}}.k-bar .pass{{background:var(--k-green)}}.k-bar .review{{background:var(--k-amber)}}.k-bar .blocked{{background:#a6473a}}
+.k-counts{{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;justify-content:space-between;margin-bottom:12px}}
+.k-note{{font-size:13px;min-height:58px;margin:0 0 12px}}
+.k-meta{{font:11px/1.8 'IBM Plex Mono',monospace;border-top:1px solid var(--k-line);padding-top:12px;color:var(--k-muted);margin-top:auto;overflow-wrap:anywhere}}
+.k-actions{{display:flex;align-items:flex-start;gap:4px;margin-top:10px;flex-wrap:wrap}}
+.k-icon{{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:5px;background:transparent;color:var(--k-navy);cursor:pointer;list-style:none}}
+.k-icon:hover{{background:var(--k-sage)}}.k-icon:focus-visible{{outline:3px solid #dc8437;outline-offset:3px}}.k-icon::-webkit-details-marker{{display:none}}
+.k-card details[open]{{flex-basis:100%}}.k-card details textarea{{width:100%;box-sizing:border-box;min-height:230px;font:12px/1.5 'IBM Plex Mono',monospace;border:1px solid var(--k-line)}}
+.k-card details table{{width:100%;font-size:12px;border-collapse:collapse}}.k-card details td{{overflow-wrap:anywhere;padding:6px;border-bottom:1px solid var(--k-line);vertical-align:top}}
+.k-foot{{font-size:12px;color:var(--k-muted);margin:4px 0 16px}}
+.k-share{{border:1px solid #b5c7bb;background:var(--k-sage);padding:18px 22px;margin:22px 0 10px;display:flex;justify-content:space-between;align-items:center;gap:20px}}
+.k-share h3{{margin:0 0 4px;font-size:19px;font-weight:500}}.k-share p{{margin:0;font-size:13px;color:var(--k-muted)}}
+.k-footer{{font:12px 'IBM Plex Mono',monospace;color:var(--k-muted);padding:18px 0 8px;border-top:1px solid #afb4a9;margin-top:20px}}
+@media(max-width:760px){{.k-nav{{flex-direction:column;align-items:flex-start}}.k-hero h1{{font-size:28px}}.k-kpis{{grid-template-columns:1fr 1fr}}.k-kpis>div:nth-child(2){{border-right:0}}.k-kpis>div:nth-child(-n+2){{border-bottom:1px solid var(--k-line)}}.k-cards{{grid-template-columns:1fr}}.k-score,.k-note,.k-card-id{{min-height:0}}.k-share{{flex-direction:column;align-items:flex-start}}}}
+@media(pointer:coarse){{.k-icon{{width:44px;height:44px}}}}
 '''
 
 
@@ -29,6 +89,41 @@ def link(url, label, kind):
     return f'<a class="k-icon" href="{escape(url, quote=True)}" title="{label}" aria-label="{label}" target="_blank" rel="noopener">{svg(kind)}</a>'
 
 
+def header(base):
+    """Site chrome matching the Hub nav: Hub → Search → GitHub → Method → Audit."""
+    return (f'<div class="k-html"><nav class="k-nav"><a class="k-mono" href="https://kalanos.ai/">KALANOS <span class="k-muted">/ ROBOTICS DATASET QUALITY</span></a>'
+            f'<div class="k-links k-mono"><a href="{base}/datasets">HUB</a><a href="{base}/search">SEARCH</a>'
+            f'<a href="https://github.com/KalanosAI" target="_blank" rel="noopener">GITHUB ↗</a><a href="https://kalanos.ai/methodology">METHOD</a>'
+            f'<a class="k-btn primary" href="{base}/dashboard">Audit your dataset</a></div></nav>'
+            f'<div class="k-hero"><div class="k-eyebrow accent">Public dataset assessments</div><h1>Kalanos · Robotics Dataset Quality</h1>'
+            f'<p>Check a LeRobot dataset. Explore and share its quality report.</p>'
+            f'<div class="k-linklist"><a href="{base}/datasets">Browse Kalanos Hub ↗</a>'
+            f'<a href="https://huggingface.co/collections/kalanosdev/robotics-dataset-quality-grades" target="_blank" rel="noopener">HF Collection ↗</a></div></div></div>')
+
+
+def grader_intro():
+    return ('<div class="k-html"><h3 style="margin:0 0 4px;font-size:19px;font-weight:500">Grade your dataset</h3>'
+            '<p class="k-small k-muted" style="margin:0 0 6px">Public LeRobot v2/v3 · numeric checks · video off. Up to 500 episodes, 128 MiB of numeric/metadata files, 3 minutes. Larger or private datasets: use the CLI.</p></div>')
+
+
+def section(title, note=''):
+    return f'<div class="k-html k-section"><h2>{escape(title)}</h2><span class="k-small k-muted">{escape(note)}</span></div>'
+
+
+def share_strip(base):
+    return (f'<div class="k-html"><div class="k-share"><div><h3>Make your assessment easy to share.</h3>'
+            f'<p>Open the card icon on any report, or the Markdown panel above, and paste the section into your HF dataset README.</p></div>'
+            f'<a class="k-btn" href="{base}/datasets">See all reports →</a></div>'
+            f'<footer class="k-footer">KALANOS / DATA QUALITY FOR PHYSICAL AI · <a href="{base}/datasets">Hub</a> · <a href="https://github.com/KalanosAI" target="_blank" rel="noopener">CLI</a> · <a href="https://kalanos.ai/methodology">Method</a></footer></div>')
+
+
+def kpis(payloads):
+    totals = {k: sum(p['counts'].get(k, 0) for p in payloads) for k in ('total', 'pass_count', 'review')}
+    tiles = [(len(payloads), 'Dataset reports'), (totals['total'], 'Episodes assessed'),
+             (totals['pass_count'], 'Episodes passed within scope'), (totals['review'], 'Episodes requiring review')]
+    return '<div class="k-kpis">' + ''.join(f'<div><strong>{n}</strong><span>{label}</span></div>' for n, label in tiles) + '</div>'
+
+
 def card_payload(card, base):
     d = card['decision_summary']
     ref = card['source']['ref']
@@ -51,15 +146,68 @@ def card_payload(card, base):
                 dataset_url='https://huggingface.co/datasets/' + quote(ref, safe='/'), report_url=None)
 
 
+def _status(c):
+    if not c.get('inventory_complete') or c.get('unknown') or not c.get('total'):
+        return 'incomplete', 'Incomplete evidence'
+    if c.get('blocked'):
+        return 'blocked', 'Blocking findings'
+    if c.get('review'):
+        return 'review', 'Review required'
+    return 'pass', 'Pass within scope'
+
+
+def _bar(c):
+    total = c.get('total') or 0
+    if not total:
+        return ''
+    segs = ''.join(f'<span class="{k}" style="width:{100 * c.get(key, 0) / total:.1f}%"></span>'
+                   for k, key in (('pass', 'pass_count'), ('review', 'review'), ('blocked', 'blocked')))
+    label = f'{c.get("pass_count", 0)} pass, {c.get("review", 0)} review, {c.get("blocked", 0)} blocked, {c.get("unknown", 0)} unknown'
+    counts = ''.join(f'<span>{c.get(key, 0)} {name}</span>' for key, name in (('pass_count', 'pass'), ('review', 'review'), ('blocked', 'blocked'), ('unknown', 'unknown')))
+    return f'<div class="k-bar" role="img" aria-label="{label}">{segs}</div><div class="k-counts">{counts}</div>'
+
+
+def _note(payload, status):
+    if status == 'pass':
+        return 'No blocking or review findings recorded within scope.'
+    if status == 'review':
+        return f'{payload["counts"].get("review", 0)} episode(s) carry findings that require review.'
+    if status == 'blocked':
+        return f'{payload["counts"].get("blocked", 0)} episode(s) have blocking findings.'
+    return 'Inventory incomplete or undetermined episodes; outcomes are not established.'
+
+
+def _assessed(ts):
+    # "2026-10-05T12:12:03Z" -> "05 Oct 2026 · 12:12 UTC"; leave anything else alone.
+    try:
+        from datetime import datetime
+        dt = datetime.strptime(str(ts)[:19], '%Y-%m-%dT%H:%M:%S')
+        return dt.strftime('%d %b %Y · %H:%M UTC')
+    except ValueError:
+        return str(ts)
+
+
 def render(payload, published=True):
     c = payload['counts']
     score = payload['readiness']
-    score_text = 'Not established' if score is None else f'{score:g}/100'
-    status = ('Incomplete evidence' if not c.get('inventory_complete') or c.get('unknown') or not c.get('total') else
-              'Blocking findings' if c.get('blocked') else 'Review required' if c.get('review') else 'Pass within scope')
+    status, status_text = _status(c)
+    score_html = ('<strong class="unestablished">Not established</strong>' if score is None
+                  else f'<strong>{score:g}<span class="k-small"> /100</span></strong>')
+    name = payload['dataset'].split('/', 1)[-1].replace('_', ' ')
     actions = link(payload['report_url'], 'View full report', 'report') if published and payload.get('report_url') else ''
     preview = '<table>' + ''.join(f'<tr><td>{escape(str(k))}</td><td>{escape(str(v))}</td></tr>' for k, v in payload['details']) + '</table>'
-    actions += f'<details><summary class="k-icon" title="Preview and copy HF dataset card" aria-label="Preview and copy HF dataset card">{svg("card")}</summary>{preview}<p>Select and copy this Markdown into your existing HF README. Copying does not publish.</p><textarea readonly aria-label="HF dataset card Markdown">{escape(payload["markdown"])}</textarea></details>'
+    actions += (f'<details><summary class="k-icon" title="Preview and copy HF dataset card" aria-label="Preview and copy HF dataset card">{svg("card")}</summary>'
+                f'{preview}<p class="k-small">Select and copy this Markdown into your existing HF README. Copying does not publish.</p>'
+                f'<textarea readonly aria-label="HF dataset card Markdown">{escape(payload["markdown"])}</textarea></details>')
     actions += link(payload['dataset_url'], 'Open dataset on Hugging Face', 'hf')
-    stats = ''.join(f'<div><b>{c.get(key, "—")}</b>{label}</div>' for key, label in [('total', 'Episodes assessed'), ('pass_count', 'Passed within scope'), ('review', 'Review'), ('blocked', 'Blocked')])
-    return f'<article class="k-card"><small>{status}</small><h3>{escape(payload["dataset"])}</h3><small>Technical readiness</small><div class="k-score">{score_text}</div><div class="k-stats">{stats}</div><p class="k-meta">{escape(payload["requirements"])}<br>Assessed {escape(payload["assessed_at"])}<br>{"Published report" if published else "Unpublished · video not assessed"}</p><div class="k-actions">{actions}</div></article>'
+    stats = ''.join(f'<div><strong>{v}</strong><span>{label}</span></div>' for v, label in [
+        (c.get('total', '—'), 'Episodes assessed'), (f'{c.get("pass_count", 0)}/{c.get("total", 0)}', 'Eligible episodes'),
+        (c.get('review', 0), 'Requiring review'), (c.get('blocked', 0), 'Blocked')])
+    kind = 'Published report' if published else 'Unpublished quick audit · video not assessed'
+    return (f'<article class="k-card"><span class="k-pill {status}">{status_text}</span><h3>{escape(name)}</h3>'
+            f'<div class="k-card-id">{escape(payload["dataset"])}</div>'
+            f'<div class="k-score"><span class="k-eyebrow">Technical readiness</span>{score_html}</div>'
+            f'<div class="k-stats">{stats}</div>{_bar(c)}'
+            f'<p class="k-note">{escape(_note(payload, status))}</p>'
+            f'<div class="k-meta">{escape(payload["requirements"])}<br>Assessed {escape(_assessed(payload["assessed_at"]))}<br>{kind}</div>'
+            f'<div class="k-actions">{actions}</div></article>')