Port Harbor Visualiser from Gradio to FastAPI + Hugging Face theme

- FastAPI backend (Docker Space) replacing the Gradio app
- Hugging Face themed SPA: dark slate + yellow/orange, 🤗 logo
- Browse Harbor-tagged HF datasets live (other=harbor), no stale cache
- Large datasets list via shallow Hub tree listing; per-task lazy fetch
(2k-task datasets list in ~2s instead of bulk-downloading the repo)
- Task master-detail view: collapsible task side-panel, in-place switching
- Per-task copy-able `harbor run` command
- Deep-link + dataset-card badge; real Space URL via $SPACE_HOST

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Dockerfile

@@ -0,0 +1,20 @@
+# Hugging Face Docker Space — FastAPI Harbor Visualiser.
+FROM python:3.11-slim
+
+# git: needed for gh:// dataset clones. (harbor CLI installs via pip for harbor://.)
+RUN apt-get update && apt-get install -y --no-install-recommends git \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH" \
+    HARBOR_VIEWER_CACHE=/tmp/.harbor-viewer-cache
+WORKDIR /app
+
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY --chown=user . .
+
+# HF routes public traffic to app_port (7860, set in README.md frontmatter).
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,21 +1,20 @@
 ---
-title: Harbor Visualiser
-emoji: 🔭
-colorFrom: gray
-colorTo: gray
-sdk: gradio
-sdk_version: "6.14.0"
-app_file: app.py
+title: Hugging Face Harbor Visualiser
+emoji: 🤗
+colorFrom: yellow
+colorTo: orange
+sdk: docker
+app_port: 7860
 pinned: false
 license: apache-2.0
-short_description: Browse Harbor task specs from HF, GitHub, or local
+short_description: Browse Harbor task specs from HF Hub, GitHub, or local
 ---
 
-# Harbor Visualiser
+# 🤗 Hugging Face Harbor Visualiser
 
-A tiny Gradio Space for browsing [Harbor](https://www.harborframework.com/) task spec directories — the dataset format used by Harbor for agent evaluation + RL environments.
+A FastAPI Space for browsing [Harbor](https://www.harborframework.com/) task spec directories — the dataset format used by Harbor for agent evaluation + RL environments.
 
-Drop in a Hugging Face dataset id, a GitHub repo, or a local Harbor dataset directory; the viewer renders every task's metadata, instruction, oracle patch, test script, and Dockerfile side-by-side.
+Drop in a Hugging Face dataset id, a GitHub repo, or a local Harbor dataset directory; the viewer renders every task's metadata, instruction, oracle patch, test script, and Dockerfile side-by-side. Large datasets (2k+ tasks) list and open instantly — task ids come from a shallow Hub listing and only the opened task's files are fetched, so nothing is bulk-downloaded.
 
 ## Use it
 
@@ -41,7 +40,7 @@ https://huggingface.co/spaces/AdithyaSK/harbor-visualiser?dataset=<owner>/<datas
 
 ```bash
 pip install -r requirements.txt
-python app.py
+uvicorn app:app --port 7860
 # → http://127.0.0.1:7860
 ```
 
@@ -85,7 +84,8 @@ Either of these:
 
 ## Stack
 
-- [Gradio 5](https://www.gradio.app/) — UI
-- [huggingface_hub](https://github.com/huggingface/huggingface_hub) — HF dataset download
+- [FastAPI](https://fastapi.tiangolo.com/) + [uvicorn](https://www.uvicorn.org/) — server
+- Vanilla-JS single-page UI (hash-routed) with a Hugging Face theme
+- [huggingface_hub](https://github.com/huggingface/huggingface_hub) — Hub listing + per-task download
 - `git` (system binary) — GitHub clone
 - Python stdlib `tomllib` — task.toml parsing

app.py

@@ -1,17 +1,20 @@
-"""Harbor Visualiser — a Gradio Space for browsing Harbor task specs.
+"""Harbor Visualiser — FastAPI backend + Harbor Hub UI.
+
+Serves a single-page "Harbor Hub" themed UI (static/) plus a JSON API that
+reuses the existing loader/parser:
+
+    GET /                       → the SPA (static/index.html)
+    GET /api/hub/datasets       → live list of Harbor-tagged HF datasets
+    GET /api/hub/count?id=      → task count for one Hub dataset (memoised)
+    GET /api/dataset?uri=       → fetch a dataset, return its task ids + meta
+    GET /api/task?uri=&task=    → one task's parsed spec (files + metadata)
+    GET /healthz
 
 Run locally:
     pip install -r requirements.txt
-    python app.py
-
-Or deploy to a Hugging Face Space — the `README.md` frontmatter pins
-`sdk: gradio` and `app_file: app.py`, so the Space picks this up directly.
+    uvicorn app:app --reload --port 7860      # → http://127.0.0.1:7860
 
-URL prefill:
-    https://<space>/?dataset=owner/name
-    https://<space>/?dataset=harbor://org/name@tag
-    https://<space>/?dataset=gh://owner/repo
-    https://<space>/?d=owner/name           (short alias)
+On a Hugging Face Docker Space it runs via the Dockerfile (uvicorn :7860).
 """
 
 from __future__ import annotations
@@ -19,567 +22,141 @@ from __future__ import annotations
 import logging
 from pathlib import Path
 
-import gradio as gr
+from fastapi import FastAPI, HTTPException, Query
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
 
-from viewer import (
-    HarborTask,
-    fetch_dataset,
-    list_tasks,
-    load_task,
-    parse_dataset_uri,
-)
+from viewer import fetch_dataset, fetch_hf_task, list_tasks, load_task, parse_dataset_uri
+from viewer.hub import count_tasks, list_harbor_datasets, list_hf_tasks
 
 logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(name)s %(message)s")
 logger = logging.getLogger("harbor-visualiser")
 
+HERE = Path(__file__).resolve().parent
+STATIC = HERE / "static"
 
-# ---------------------------------------------------------------------------
-# File-tree definition + helpers
-# ---------------------------------------------------------------------------
-
-# Virtual entry id for the metadata overview (not a real file).
-_OVERVIEW = "__overview__"
-
-# Folder pseudo-ids — selecting one routes to its first present child.
-_FOLDER_PREFIX = "__folder__"
-
-
-# Map suffix → Gradio Code language token. Everything else falls back to "shell".
-_EXTENSION_LANGUAGE: dict[str, str] = {
-    ".toml": "yaml",  # Gradio Prism has no TOML; YAML is the closest fit
-    ".diff": "python",  # closest available; +/- lines render fine
-    ".patch": "python",
-    ".sh": "shell",
-    ".bash": "shell",
-    ".py": "python",
-    ".json": "json",
-    ".yaml": "yaml",
-    ".yml": "yaml",
-    ".md": "markdown",
-    ".markdown": "markdown",
-    ".txt": "shell",
-    ".csv": "shell",
-    ".tsv": "shell",
-    ".ini": "yaml",
-    ".cfg": "yaml",
-    ".conf": "shell",
-    ".html": "html",
-    ".css": "css",
-    ".js": "javascript",
-    ".ts": "typescript",
-}
-
-
-def _file_language(filename: str) -> str:
-    """Pick a Gradio Code `language=` token for a given filename."""
-    if filename.endswith("Dockerfile"):
-        return "dockerfile"
-    suffix = Path(filename).suffix.lower()
-    return _EXTENSION_LANGUAGE.get(suffix, "shell")
-
-
-def _read_task_file(task: HarborTask, file_id: str) -> str | None:
-    """Fetch the content for a file_id; None when the file isn't present.
-
-    task.toml and instruction.md have special handling (task.toml uses the
-    pre-captured raw text; instruction.md falls back to the inline `task.instruction`
-    field from task.toml when no instruction.md file is on disk). Everything else
-    is a direct lookup against the dict populated by walking the task dir.
-    """
-    if file_id == "task.toml":
-        return task.task_toml_raw or None
-    if file_id == "instruction.md":
-        return task.files.get("instruction.md") or task.instruction_inline
-    return task.files.get(file_id)
-
-
-def _build_file_tree(task: HarborTask) -> tuple[list[tuple[str, str]], dict[str, str]]:
-    """Render a file-explorer-style choice list for a task.
-
-    Walks every file discovered under the task dir (via `task.files`) and groups
-    them by their first path segment. Order: Overview → top-level files
-    (task.toml, instruction.md, anything else) → folders alphabetically with
-    their children alphabetically. No hardcoded allowlist — what's on disk is
-    what gets shown.
-
-    Returns:
-      choices: list of (label, value) tuples for `gr.Radio`. Labels use unicode
-               tree glyphs (📂, ├─, └─) so the radio reads like a file tree.
-      folder_redirects: maps each folder pseudo-id to its first present child
-                        file_id so clicking a folder header opens its first file.
-    """
-    choices: list[tuple[str, str]] = [("ⓘ  Overview", _OVERVIEW)]
-    redirects: dict[str, str] = {}
-
-    # Bucket every discovered file by top-level dir ("" = at task root)
-    top_level: list[str] = []
-    by_folder: dict[str, list[str]] = {}
-    for path in sorted(task.files):
-        if "/" in path:
-            folder = path.split("/", 1)[0]
-            by_folder.setdefault(folder, []).append(path)
-        else:
-            top_level.append(path)
-
-    # Top-level files: task.toml first, then instruction.md (with inline
-    # fallback), then anything else alphabetically. Order is presentational.
-    if (task.task_toml_raw or "").strip():
-        choices.append(("📄  task.toml", "task.toml"))
-    if (task.files.get("instruction.md") or task.instruction_inline):
-        choices.append(("📄  instruction.md", "instruction.md"))
-    for path in sorted(top_level):
-        if path in ("task.toml", "instruction.md"):
-            continue   # already added
-        choices.append((f"📄  {path}", path))
-
-    # Folders alphabetically (environment / solution / tests / ...) with
-    # children alphabetical within each.
-    for folder in sorted(by_folder):
-        children = sorted(by_folder[folder])
-        if not children:
-            continue
-        folder_id = f"{_FOLDER_PREFIX}{folder}"
-        choices.append((f"📂  {folder}/", folder_id))
-        redirects[folder_id] = children[0]  # folder header → first child
-        for i, full_id in enumerate(children):
-            # Show the path *inside* the folder (handles nested subdirs too)
-            basename = full_id[len(folder) + 1:]   # strip "<folder>/"
-            glyph = "└─" if i == len(children) - 1 else "├─"
-            choices.append((f"     {glyph}  {basename}", full_id))
-
-    return choices, redirects
+app = FastAPI(title="Harbor Visualiser", docs_url="/api/docs")
 
 
 # ---------------------------------------------------------------------------
-# Backend handlers
+# API
 # ---------------------------------------------------------------------------
 
+@app.get("/api/hub/datasets")
+def api_hub_datasets(
+    q: str | None = Query(None, description="substring filter on dataset id"),
+    sort: str = Query("downloads"),
+    limit: int = Query(500, ge=1, le=2000),
+) -> JSONResponse:
+    """Live list of Harbor-tagged datasets on the HF Hub (no stale cache)."""
+    try:
+        ds = list_harbor_datasets(query=q, sort=sort, limit=limit)
+    except Exception as exc:  # noqa: BLE001
+        raise HTTPException(502, f"HF Hub listing failed: {exc}") from exc
+    return JSONResponse({"datasets": [d.as_dict() for d in ds], "count": len(ds)})
+
 
-def load_dataset_action(uri: str):
-    """Top-level "Load" button handler.
+@app.get("/api/hub/count")
+def api_hub_count(id: str = Query(..., description="dataset id, e.g. owner/name")) -> JSONResponse:
+    """Task count for a single Hub dataset (one cheap list_repo_files call)."""
+    return JSONResponse({"id": id, "tasks": count_tasks(id)})
 
-    Outputs (in order):
-      status_md, source_state, root_state, all_tasks_state, folder_redirects_state,
-      task_search_value, task_radio_update,
-      file_radio_update, markdown_update, code_update
-    """
-    if not uri or not uri.strip():
-        return _empty_state("Enter a dataset URI to begin.")
 
+@app.get("/api/dataset")
+def api_dataset(
+    uri: str = Query(..., description="owner/name | hf:// | gh:// | harbor:// | local path"),
+    refresh: int = Query(0, description="1 = force re-fetch (bypass cache)"),
+) -> JSONResponse:
+    """Fetch a dataset and return its task ids + source metadata."""
     try:
         source = parse_dataset_uri(uri)
     except ValueError as exc:
-        return _empty_state(f"❌ {exc}")
-
+        raise HTTPException(400, str(exc)) from exc
     try:
-        root = fetch_dataset(source)
-    except Exception as exc:
-        logger.exception("fetch failed")
-        return _empty_state(f"❌ fetch failed: {exc}")
-
-    tasks = list_tasks(root)
-    if not tasks:
-        return _empty_state(
-            f"⚠ No `task.toml` files found in `{source.display}`. "
-            f"Looked under `{root}` for `<id>/task.toml` and `tasks/<id>/task.toml`."
-        )
-
-    first = tasks[0]
-    task = load_task(root, first)
-    file_choices, redirects = _build_file_tree(task)
-    md_html, code_update = _render_file(task, _OVERVIEW)
-    status = (
-        f"✅ Loaded **{source.display}** — {len(tasks)} task"
-        f"{'s' if len(tasks) != 1 else ''} found."
-    )
-    return (
-        status,
-        source.display,
-        str(root),
-        tasks,
-        redirects,
-        "",  # clear search box
-        gr.update(choices=tasks, value=first, label=f"Tasks ({len(tasks)})"),
-        gr.update(choices=file_choices, value=_OVERVIEW, label="Files"),
-        md_html,
-        code_update,
-    )
-
-
-def select_task_action(task_id: str, root: str):
-    """Switch task → repopulate file tree, render the Overview."""
-    if not task_id or not root:
-        return (
-            {},
-            gr.update(choices=[], value=None, label="Files"),
-            "Pick a task from the list.",
-            gr.update(value="", visible=False),
-        )
+        if source.kind == "hf":
+            # List task ids via the Hub API — no download. Critical for large
+            # datasets (2k+ tasks) which would otherwise snapshot the whole repo.
+            tasks = list_hf_tasks(source.ident, source.revision)
+        else:
+            root = fetch_dataset(source, force=bool(refresh))
+            tasks = list_tasks(root)
+    except Exception as exc:  # noqa: BLE001
+        raise HTTPException(502, f"fetch failed: {exc}") from exc
+    return JSONResponse({
+        "uri": uri,
+        "display": source.display,
+        "kind": source.kind,
+        "ident": source.ident,
+        "revision": source.revision,
+        "tasks": tasks,
+        "count": len(tasks),
+    })
+
+
+@app.get("/api/task")
+def api_task(
+    uri: str = Query(...),
+    task: str = Query(..., description="task id (directory name)"),
+    refresh: int = Query(0),
+) -> JSONResponse:
+    """Return one task's full parsed spec — metadata + every file."""
     try:
-        task = load_task(Path(root), task_id)
-    except Exception as exc:
-        logger.exception("load_task failed")
-        return (
-            {},
-            gr.update(choices=[], value=None, label="Files"),
-            f"❌ {exc}",
-            gr.update(value="", visible=False),
-        )
-    file_choices, redirects = _build_file_tree(task)
-    md_html, code_update = _render_file(task, _OVERVIEW)
-    return (
-        redirects,
-        gr.update(choices=file_choices, value=_OVERVIEW, label="Files"),
-        md_html,
-        code_update,
-    )
-
-
-def select_file_action(file_id: str, root: str, task_id: str, folder_redirects: dict):
-    """Switch file inside a task → render its content.
-
-    Folder pseudo-ids are routed to their first child via `folder_redirects`.
-    The file_tree radio's value is also updated so the user sees which file
-    was opened.
-    """
-    if not file_id or not root or not task_id:
-        return ("Pick a task first.", gr.update(value="", visible=False), gr.update())
-
-    # Folder header click → redirect to first child + update radio selection
-    redirect = (folder_redirects or {}).get(file_id)
-    if redirect is not None:
-        file_id = redirect
-        radio_update = gr.update(value=file_id)
-    else:
-        radio_update = gr.update()  # no-op for normal file clicks
-
+        source = parse_dataset_uri(uri)
+    except ValueError as exc:
+        raise HTTPException(400, str(exc)) from exc
     try:
-        task = load_task(Path(root), task_id)
-    except Exception as exc:
-        return (f"❌ {exc}", gr.update(value="", visible=False), gr.update())
-
-    md_html, code_update = _render_file(task, file_id)
-    return (md_html, code_update, radio_update)
-
-
-def filter_tasks_action(query: str, all_tasks: list[str], current_root: str):
-    """Search-box onchange — re-derive the radio choices.
-
-    Doesn't touch the file/content panels; selection is preserved when the
-    currently-selected task still matches the filter.
-    """
-    if not all_tasks:
-        return gr.update(choices=[], value=None)
-    q = (query or "").strip().lower()
-    if not q:
-        return gr.update(choices=all_tasks, label=f"Tasks ({len(all_tasks)})")
-    filtered = [t for t in all_tasks if q in t.lower()]
-    label = f"Tasks ({len(filtered)} / {len(all_tasks)})"
-    return gr.update(choices=filtered, label=label)
-
-
-def init_from_url(request: gr.Request):
-    """Read `?dataset=` (or `?d=`) on page load and prefill the input."""
-    if request is None:
-        return ""
-    qs = dict(request.query_params or {})
-    return (qs.get("dataset") or qs.get("d") or "").strip()
-
-
-# ---------------------------------------------------------------------------
-# Rendering helpers
-# ---------------------------------------------------------------------------
-
-
-def _empty_state(status: str):
-    """Reset the UI when no dataset is loaded."""
-    return (
-        status,
-        "",  # source_state
-        "",  # root_state
-        [],  # all_tasks_state
-        {},  # folder_redirects_state
-        "",  # task search clear
-        gr.update(choices=[], value=None, label="Tasks"),
-        gr.update(choices=[], value=None, label="Files"),
-        "Pick a task from the list once a dataset is loaded.",
-        gr.update(value="", visible=False),
-    )
-
-
-def _render_file(task: HarborTask, file_id: str):
-    """Return (markdown_html, code_update) for the right-panel content area.
-
-    Exactly ONE of the two panels is visible at a time:
-      - Overview + .md files → markdown panel
-      - everything else → code panel with language=auto
-    """
-    if file_id == _OVERVIEW:
-        return (_overview_markdown(task), gr.update(value="", visible=False))
-
-    content = _read_task_file(task, file_id)
-    if content is None:
-        return (
-            f"_(no `{file_id}` in this task)_",
-            gr.update(value="", visible=False),
-        )
-
-    if file_id.endswith(".md"):
-        # Render Markdown for instruction.md (no code box)
-        return (content, gr.update(value="", visible=False))
-
-    lang = _file_language(file_id)
-    return (
-        "",  # markdown empty
-        gr.update(value=content, language=lang, visible=True, label=file_id),
-    )
-
-
-def _overview_markdown(task: HarborTask) -> str:
-    """Render the task's metadata as a clean markdown table."""
-    rows: list[tuple[str, str]] = []
-    rows.append(("task id", f"`{task.id}`"))
-    if task.name:
-        rows.append(("name", f"`{task.name}`"))
-    if task.version:
-        rows.append(("spec version", task.version))
-    if task.description:
-        rows.append(("description", task.description))
-    if task.difficulty:
-        rows.append(("difficulty", task.difficulty))
-    if task.category:
-        rows.append(("category", task.category))
-    if task.keywords:
-        rows.append(("keywords", ", ".join(f"`{k}`" for k in task.keywords)))
-    if task.agent_timeout_sec is not None:
-        rows.append(("agent timeout", f"{task.agent_timeout_sec}s"))
-    if task.verifier_timeout_sec is not None:
-        rows.append(("verifier timeout", f"{task.verifier_timeout_sec}s"))
-
-    md = ["| Field | Value |", "|---|---|"]
-    for k, v in rows:
-        md.append(f"| **{k}** | {v} |")
-
-    if task.repo2env:
-        md.append("\n### `[metadata.repo2env]` extension (Repo2RLEnv)\n")
-        md.append("| Field | Value |")
-        md.append("|---|---|")
-        for k, v in sorted(task.repo2env.items()):
-            if isinstance(v, dict):
-                md.append(f"| **{k}** | _(nested — see below)_ |")
-                for kk, vv in sorted(v.items()):
-                    md.append(f"| &nbsp;&nbsp;`{kk}` | `{_short(vv)}` |")
-            else:
-                md.append(f"| **{k}** | `{_short(v)}` |")
-
-    return "\n".join(md)
-
-
-def _short(v) -> str:
-    """Truncate long values for the metadata table cells."""
-    if isinstance(v, list):
-        return ", ".join(str(x) for x in v)
-    s = str(v)
-    return s if len(s) < 110 else s[:107] + "…"
+        if source.kind == "hf":
+            # Pull just this one task's files, not the entire dataset.
+            root = fetch_hf_task(source, task, force=bool(refresh))
+        else:
+            root = fetch_dataset(source, force=bool(refresh))
+        t = load_task(root, task)
+    except FileNotFoundError as exc:
+        raise HTTPException(404, str(exc)) from exc
+    except Exception as exc:  # noqa: BLE001
+        raise HTTPException(502, f"load failed: {exc}") from exc
+    return JSONResponse({
+        "id": t.id,
+        "name": t.name,
+        "org": t.org,
+        "version": t.version,
+        "description": t.description,
+        "instruction_inline": t.instruction_inline,
+        "difficulty": t.difficulty,
+        "category": t.category,
+        "keywords": t.keywords,
+        "agent_timeout_sec": t.agent_timeout_sec,
+        "verifier_timeout_sec": t.verifier_timeout_sec,
+        "repo2env": t.repo2env,
+        "task_toml_raw": t.task_toml_raw,
+        "files": t.files,
+    })
+
+
+@app.get("/api/config")
+def api_config() -> JSONResponse:
+    """Runtime config for the UI. On a Hugging Face Space, $SPACE_HOST is the
+    public app host (e.g. owner-name.hf.space) — we surface it so the deep-link
+    / badge examples show the real Space URL instead of localhost."""
+    import os
+    return JSONResponse({
+        "space_host": os.environ.get("SPACE_HOST") or None,
+        "space_id": os.environ.get("SPACE_ID") or None,
+    })
+
+
+@app.get("/healthz")
+def healthz() -> dict:
+    return {"ok": True}
 
 
 # ---------------------------------------------------------------------------
-# UI
+# UI (static SPA)
 # ---------------------------------------------------------------------------
 
-
-_INTRO_MD = """# Harbor Visualiser
-
-Browse [Harbor](https://www.harborframework.com/) task spec datasets — Hugging Face, GitHub, Harbor registry, or local."""
-
-
-_FOOTER_MD = """<sub>Built with [Gradio](https://www.gradio.app/) · Harbor framework [docs](https://www.harborframework.com/)</sub>"""
-
-
-# A small set of popular / known-working datasets surfaced as one-click examples.
-_EXAMPLES: list[tuple[str, str]] = [
-    ("cookbook/test (Harbor)", "harbor://cookbook/test"),
-    ("SWE-Atlas QnA (Harbor)", "harbor://scale-ai/swe-atlas-qna"),
-    ("SWE-Bench Pro (Harbor)", "harbor://cais/swebenchpro"),
-    ("Click PRs (HF / Repo2RLEnv)", "AdithyaSK/click-r2e-v082post1"),
-    ("Click PRs (GitHub demo)", "https://github.com/adithya-s-k/harbor-tasks-demo"),
-]
-
-
-# Minimal monochrome aesthetic — file-explorer feel for both task list and file tree.
-_CUSTOM_CSS = """
-.gradio-container { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }
-h1, h2, h3 { font-weight: 600; }
-
-button.primary { background: #111 !important; color: white !important; border: 1px solid #111 !important; }
-button.primary:hover { background: #333 !important; }
-
-/* Task list — scrollable + monospace + ellipsis on long IDs */
-#task-list .wrap { max-height: 65vh; overflow-y: auto; padding-right: 4px; }
-#task-list label,
-#task-list label > span {
-  font-family: ui-monospace, Menlo, Consolas, monospace;
-  font-size: 11.5px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-  max-width: 100%;
-}
-
-/* File tree — also monospace, slightly larger, preserve indent whitespace */
-#file-tree .wrap { max-height: 55vh; overflow-y: auto; }
-#file-tree label,
-#file-tree label > span {
-  font-family: ui-monospace, Menlo, Consolas, monospace;
-  font-size: 12.5px;
-  white-space: pre;
-}
-
-#task-search input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
-
-footer { display: none !important; }
-"""
-
-
-def build_ui() -> gr.Blocks:
-    with gr.Blocks(title="Harbor Visualiser") as demo:
-        gr.Markdown(_INTRO_MD)
-
-        with gr.Row():
-            uri_input = gr.Textbox(
-                label="Dataset",
-                placeholder="owner/name  |  gh://owner/repo  |  harbor://org/name  |  https://github.com/owner/repo",
-                lines=1,
-                scale=8,
-            )
-            load_btn = gr.Button("Load", variant="primary", scale=1, min_width=80)
-
-        # Quick-access popular examples
-        with gr.Row():
-            example_btns: list[gr.Button] = []
-            for label, _ in _EXAMPLES:
-                example_btns.append(gr.Button(label, size="sm", variant="secondary"))
-
-        status = gr.Markdown("Enter a dataset URI to begin.")
-
-        # Hidden state for the dispatch handlers
-        source_state = gr.State("")
-        root_state = gr.State("")
-        all_tasks_state = gr.State([])  # full unfiltered list for the search box
-        folder_redirects_state = gr.State({})  # folder pseudo-id → first child file_id
-
-        # ─── 3-column file-explorer layout ────────────────────────────────
-        with gr.Row():
-            # Column 1 — Tasks (scrollable + searchable)
-            with gr.Column(scale=2, min_width=240):
-                task_search = gr.Textbox(
-                    label="Filter tasks",
-                    placeholder="type to filter…",
-                    lines=1,
-                    elem_id="task-search",
-                )
-                task_list = gr.Radio(
-                    choices=[],
-                    label="Tasks",
-                    value=None,
-                    interactive=True,
-                    elem_id="task-list",
-                )
-            # Column 2 — File tree for the selected task
-            with gr.Column(scale=2, min_width=200):
-                file_tree = gr.Radio(
-                    choices=[],
-                    label="Files",
-                    value=None,
-                    interactive=True,
-                    elem_id="file-tree",
-                )
-            # Column 3 — content viewer (markdown OR code, mutually exclusive)
-            with gr.Column(scale=6):
-                content_md = gr.Markdown("Pick a task from the list once a dataset is loaded.")
-                content_code = gr.Code(
-                    value="",
-                    language="shell",
-                    label="",
-                    interactive=False,
-                    visible=False,
-                )
-
-        gr.Markdown(_FOOTER_MD)
-
-        # --- Event wiring ---------------------------------------------------
-
-        load_outputs = [
-            status,
-            source_state,
-            root_state,
-            all_tasks_state,
-            folder_redirects_state,
-            task_search,
-            task_list,
-            file_tree,
-            content_md,
-            content_code,
-        ]
-
-        load_btn.click(
-            fn=load_dataset_action,
-            inputs=[uri_input],
-            outputs=load_outputs,
-        )
-        uri_input.submit(
-            fn=load_dataset_action,
-            inputs=[uri_input],
-            outputs=load_outputs,
-        )
-
-        task_list.change(
-            fn=select_task_action,
-            inputs=[task_list, root_state],
-            outputs=[folder_redirects_state, file_tree, content_md, content_code],
-        )
-
-        file_tree.change(
-            fn=select_file_action,
-            inputs=[file_tree, root_state, task_list, folder_redirects_state],
-            outputs=[content_md, content_code, file_tree],
-        )
-
-        task_search.change(
-            fn=filter_tasks_action,
-            inputs=[task_search, all_tasks_state, root_state],
-            outputs=[task_list],
-        )
-
-        # Example buttons → set input + auto-load
-        for btn, (_, uri_value) in zip(example_btns, _EXAMPLES, strict=True):
-            btn.click(fn=lambda u=uri_value: u, outputs=uri_input).then(
-                fn=load_dataset_action,
-                inputs=[uri_input],
-                outputs=load_outputs,
-            )
-
-        # On page load: read ?dataset= → prefill → auto-load if non-empty
-        demo.load(fn=init_from_url, inputs=None, outputs=uri_input).then(
-            fn=lambda u: load_dataset_action(u) if u else _empty_state("Enter a dataset URI to begin."),
-            inputs=[uri_input],
-            outputs=load_outputs,
-        )
-
-    return demo
+@app.get("/")
+def index() -> FileResponse:
+    return FileResponse(STATIC / "index.html", media_type="text/html")
 
 
-if __name__ == "__main__":
-    theme = gr.themes.Monochrome(
-        radius_size=gr.themes.sizes.radius_sm,
-        spacing_size=gr.themes.sizes.spacing_md,
-        text_size=gr.themes.sizes.text_md,
-    )
-    demo = build_ui()
-    demo.queue(default_concurrency_limit=4).launch(
-        server_name="0.0.0.0",
-        theme=theme,
-        css=_CUSTOM_CSS,
-    )
+app.mount("/static", StaticFiles(directory=str(STATIC)), name="static")

requirements.txt

@@ -1,4 +1,4 @@
-gradio>=6.0.0
+fastapi>=0.115
+uvicorn[standard]>=0.30
 huggingface_hub>=0.27.0
 harbor>=0.6.0
-

static/app.js

@@ -0,0 +1,515 @@
+/* Harbor Hub — SPA frontend. Vanilla JS, hash-routed, talks to the FastAPI API. */
+'use strict';
+
+const APP = document.getElementById('app');
+
+/* ── tiny helpers ─────────────────────────────────── */
+const esc = (s) => String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const fmtNum = (n) => (n == null || n < 0) ? '—' : n.toLocaleString();
+const enc = encodeURIComponent;
+const qs = (o) => Object.entries(o).filter(([, v]) => v != null && v !== '').map(([k, v]) => `${k}=${enc(v)}`).join('&');
+
+async function api(path) {
+  const r = await fetch(path);
+  if (!r.ok) {
+    let msg = `${r.status}`;
+    try { msg = (await r.json()).detail || msg; } catch {}
+    throw new Error(msg);
+  }
+  return r.json();
+}
+
+const ICON = {
+  copy: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>',
+  check: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>',
+  search: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>',
+  file: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>',
+  dir: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>',
+  info: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>',
+  back: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>',
+  next: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>',
+  term: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17l6-6-6-6M12 19h8"/></svg>',
+  panel: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg>',
+};
+
+function copyButton(text, cls = 'copy') {
+  const b = document.createElement('button');
+  b.className = cls; b.innerHTML = ICON.copy; b.title = 'Copy';
+  b.onclick = (e) => {
+    e.stopPropagation(); e.preventDefault();
+    navigator.clipboard.writeText(text).then(() => {
+      b.innerHTML = ICON.check; b.classList.add('copied');
+      setTimeout(() => { b.innerHTML = ICON.copy; b.classList.remove('copied'); }, 1100);
+    });
+  };
+  return b;
+}
+
+/* ── theme ────────────────────────────────────────── */
+function applyTheme(mode) {
+  const sys = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-theme', mode === 'system' ? sys : mode);
+  document.querySelectorAll('#theme-toggle button').forEach(b =>
+    b.classList.toggle('active', b.dataset.mode === mode));
+}
+(function initTheme() {
+  let mode = localStorage.getItem('hh-theme') || 'dark';
+  applyTheme(mode);
+  document.getElementById('theme-toggle').addEventListener('click', (e) => {
+    const b = e.target.closest('button'); if (!b) return;
+    mode = b.dataset.mode; localStorage.setItem('hh-theme', mode); applyTheme(mode);
+  });
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if ((localStorage.getItem('hh-theme') || 'dark') === 'system') applyTheme('system');
+  });
+})();
+
+/* ── data row with lazy task count ────────────────── */
+function datasetRow(id, count) {
+  const row = document.createElement('div');
+  row.className = 'row';
+  row.onclick = () => { location.hash = `dataset?uri=${enc(id)}`; };
+  const name = document.createElement('span'); name.className = 'name'; name.textContent = id;
+  row.appendChild(name);
+  row.appendChild(copyButton(id));
+  const t = document.createElement('span'); t.className = 'tasks';
+  if (count == null) { t.innerHTML = '<span class="spin">···</span>'; t.dataset.lazy = id; }
+  else t.textContent = fmtNum(count);
+  row.appendChild(t);
+  return row;
+}
+
+// Fill in lazy counts for visible rows, throttled.
+async function fillCounts(container) {
+  const pending = [...container.querySelectorAll('.tasks[data-lazy]')];
+  let i = 0;
+  const worker = async () => {
+    while (i < pending.length) {
+      const cell = pending[i++]; const id = cell.dataset.lazy; delete cell.dataset.lazy;
+      try { const r = await api(`/api/hub/count?id=${enc(id)}`); cell.textContent = fmtNum(r.tasks); }
+      catch { cell.textContent = '—'; }
+    }
+  };
+  await Promise.all([worker(), worker(), worker(), worker()]); // 4 in parallel
+}
+
+/* ── routes ───────────────────────────────────────── */
+function setActiveNav(name) {
+  document.querySelectorAll('.nav .links a').forEach(a => a.classList.toggle('active', a.dataset.nav === name));
+}
+
+async function renderHome() {
+  setActiveNav('home');
+  // Resolve the public base URL: on a HF Space this is the real .hf.space host,
+  // so deep-link / badge examples don't show localhost.
+  let origin = location.origin;
+  try { const cfg = await api('/api/config'); if (cfg.space_host) origin = `https://${cfg.space_host}`; } catch {}
+  const badgeUrl = 'https://img.shields.io/badge/%F0%9F%A4%97%20Harbor%20Visualiser-View%20Tasks-ffd21e';
+  const deepLink = `${origin}/?dataset=YOUR_DATASET_ID`;
+  const badgeMd = `[![Open in Harbor Visualiser](${badgeUrl})](${deepLink})`;
+  APP.innerHTML = `
+    <div class="hero">
+      <div class="mark">🤗</div>
+      <h1><span class="hf">Hugging Face</span> Harbor Visualiser</h1>
+      <p>Visualise <a href="https://www.harborframework.com" target="_blank" rel="noopener" class="hl">Harbor&nbsp;↗</a> task-spec datasets <strong style="color:var(--text)">straight from the Hugging&nbsp;Face&nbsp;Hub</strong> — metadata, instructions, oracle patches, tests &amp; Dockerfiles. Also works with GitHub repos and local paths. No bulk download, always the latest.</p>
+    </div>
+    <div class="search" id="load-box">
+      ${ICON.search}
+      <input id="load-input" placeholder="Load any dataset — owner/name · hf:// · gh://owner/repo · harbor://org/name · /local/path" />
+      <span class="kbd">↵</span>
+    </div>
+    <div style="display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px">
+      <h2 style="margin:0">Harbor datasets on the Hub</h2>
+      <span class="faint" id="hub-status">loading…</span>
+    </div>
+    <div class="card" id="hub-table">
+      <div class="thead"><span>Dataset</span><span class="col-tasks">Tasks</span></div>
+      <div class="loading"><span class="spinner"></span>fetching from huggingface.co/datasets?other=harbor</div>
+    </div>
+    <div class="center"><a class="btn" href="#/datasets">View all datasets →</a></div>
+
+    <div class="howto">
+      <h2>Link your dataset to the visualiser</h2>
+      <div class="steps">
+        <div class="step">
+          <h3>Deep-link any dataset</h3>
+          <p>Append <code>?dataset=&lt;owner&gt;/&lt;name&gt;</code> to open straight into a dataset's tasks — handy from a dataset card or docs.</p>
+          <div class="snippet"><code id="snip-link">${esc(origin)}/?dataset=&lt;owner&gt;/&lt;name&gt;</code><span id="copy-link"></span></div>
+        </div>
+        <div class="step">
+          <h3>Add a badge to your dataset card</h3>
+          <p>Paste this Markdown into your dataset README so a 🤗 badge always links here:</p>
+          <span class="badge-preview"><span class="l">🤗 Harbor Visualiser</span><span class="r">View Tasks</span></span>
+          <div class="snippet"><code id="snip-badge">${esc(badgeMd)}</code><span id="copy-badge"></span></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer">
+      A read-only visualiser for <a href="https://www.harborframework.com" target="_blank" rel="noopener" class="hl">Harbor</a>
+      task-spec datasets — the format used by Harbor for agent evaluation &amp; RL environments.
+      Runs on Hugging Face Spaces · not affiliated with the Harbor project.
+    </div>
+  `;
+  document.getElementById('copy-link').appendChild(copyButton(`${origin}/?dataset=<owner>/<name>`));
+  document.getElementById('copy-badge').appendChild(copyButton(badgeMd));
+  const input = document.getElementById('load-input');
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && input.value.trim()) location.hash = `dataset?uri=${enc(input.value.trim())}`;
+  });
+
+  try {
+    const { datasets } = await api('/api/hub/datasets?sort=downloads&limit=12');
+    const card = document.getElementById('hub-table');
+    card.innerHTML = '<div class="thead"><span>Dataset</span><span class="col-tasks">Tasks</span></div>';
+    datasets.slice(0, 8).forEach(d => card.appendChild(datasetRow(d.id, null)));
+    document.getElementById('hub-status').textContent = `${datasets.length}+ datasets`;
+    fillCounts(card);
+  } catch (e) {
+    document.getElementById('hub-table').innerHTML = `<div class="errbox">Couldn't reach the Hub: ${esc(e.message)}</div>`;
+    document.getElementById('hub-status').textContent = '';
+  }
+}
+
+let _hubCache = null;
+async function renderDatasets(params) {
+  setActiveNav('datasets');
+  const sort = params.get('sort') || 'downloads';
+  APP.innerHTML = `
+    <div class="page">
+      <h1>Datasets</h1>
+      <p class="muted" style="margin:-8px 0 20px;font-size:13.5px">Search across every <strong style="color:var(--text)">Harbor-tagged dataset on the Hugging&nbsp;Face&nbsp;Hub</strong> — the live <code style="background:var(--panel-2);padding:1px 6px;border-radius:4px">other=harbor</code> filter.</p>
+      <div class="search">
+        ${ICON.search}
+        <input id="ds-search" placeholder="Search Harbor datasets on the Hub…" autofocus />
+        <select id="ds-sort">
+          <option value="downloads">Most downloads</option>
+          <option value="likes">Most likes</option>
+          <option value="lastModified">Recently updated</option>
+        </select>
+        <span class="kbd">⌘K</span>
+      </div>
+      <div class="card" id="ds-table"><div class="loading"><span class="spinner"></span>loading…</div></div>
+      <div class="hint" style="margin-top:18px">
+        <span class="ic">${ICON.info}</span>
+        <span><strong style="color:var(--text)">Want your dataset to show up here?</strong> Add the <code>harbor</code> tag to your dataset card's metadata (<code>tags: [harbor]</code> in the README front-matter) and it'll appear in this list automatically.</span>
+      </div>
+    </div>`;
+  const tbl = document.getElementById('ds-table');
+  const search = document.getElementById('ds-search');
+  const sortSel = document.getElementById('ds-sort'); sortSel.value = sort;
+
+  async function load() {
+    tbl.innerHTML = '<div class="loading"><span class="spinner"></span>loading…</div>';
+    try {
+      const { datasets } = await api(`/api/hub/datasets?${qs({ sort: sortSel.value, limit: 1000 })}`);
+      _hubCache = datasets; draw(datasets);
+    } catch (e) { tbl.innerHTML = `<div class="errbox">${esc(e.message)}</div>`; }
+  }
+  function draw(list) {
+    tbl.innerHTML = '<div class="thead"><span>Dataset</span><span class="col-tasks">Tasks</span></div>';
+    if (!list.length) { tbl.innerHTML += '<div class="empty">no matching datasets</div>'; return; }
+    list.slice(0, 300).forEach(d => tbl.appendChild(datasetRow(d.id, null)));
+    if (list.length > 300) tbl.innerHTML += `<div class="empty">showing 300 of ${list.length} — refine your search</div>`;
+    fillCounts(tbl);
+  }
+  let t;
+  search.addEventListener('input', () => {
+    clearTimeout(t);
+    t = setTimeout(() => {
+      const q = search.value.trim().toLowerCase();
+      draw(q ? _hubCache.filter(d => d.id.toLowerCase().includes(q)) : _hubCache);
+    }, 120);
+  });
+  sortSel.addEventListener('change', load);
+  await load();
+}
+
+async function renderDataset(params) {
+  setActiveNav(null);
+  const uri = params.get('uri');
+  APP.innerHTML = `
+    <div class="page">
+      <div class="crumb"><a href="#/datasets">Datasets</a><span class="sep">/</span><span>${esc(uri)}</span></div>
+      <div class="loading"><span class="spinner"></span>fetching <b>${esc(uri)}</b> …
+        <span class="sub">Loading the Harbor spec — this can take a few seconds to a minute for large datasets (the more tasks, the longer the listing).</span>
+      </div>
+    </div>`;
+  let data;
+  try { data = await api(`/api/dataset?uri=${enc(uri)}`); }
+  catch (e) { APP.querySelector('.page').innerHTML = `<div class="crumb"><a href="#/datasets">Datasets</a></div><div class="errbox">Failed to load <b>${esc(uri)}</b>: ${esc(e.message)}</div>`; return; }
+
+  const page = APP.querySelector('.page');
+  page.innerHTML = `
+    <div class="crumb"><a href="#/datasets">Datasets</a><span class="sep">/</span><span>${esc(data.display)}</span>
+      <span class="pill">${data.count} tasks</span>
+      <button class="btn" id="refresh" style="margin-left:auto;padding:5px 11px;font-size:12px">↻ refresh</button>
+    </div>
+    <div class="search"><span style="color:var(--faint)">${ICON.search}</span>
+      <input id="task-search" placeholder="Search ${data.count} tasks…" autofocus /></div>
+    <div class="card tasklist" id="tasks"></div>`;
+  const tasksCard = document.getElementById('tasks');
+  const tsearch = document.getElementById('task-search');
+  function draw(list) {
+    tasksCard.innerHTML = '<div class="thead"><span>Task</span></div>';
+    if (!list.length) { tasksCard.innerHTML += '<div class="empty">no matching tasks</div>'; return; }
+    list.slice(0, 500).forEach(tid => {
+      const row = document.createElement('div'); row.className = 'row';
+      row.onclick = () => { location.hash = `task?${qs({ uri, task: tid })}`; };
+      row.innerHTML = `<span class="name">${esc(tid)}</span>`;
+      row.appendChild(copyButton(tid));
+      tasksCard.appendChild(row);
+    });
+    if (list.length > 500) tasksCard.innerHTML += `<div class="empty">showing 500 of ${list.length} — refine your search</div>`;
+  }
+  draw(data.tasks);
+  let t;
+  tsearch.addEventListener('input', () => {
+    clearTimeout(t);
+    t = setTimeout(() => {
+      const q = tsearch.value.trim().toLowerCase();
+      draw(q ? data.tasks.filter(x => x.toLowerCase().includes(q)) : data.tasks);
+    }, 100);
+  });
+  document.getElementById('refresh').onclick = async () => {
+    page.querySelector('.crumb').insertAdjacentHTML('beforeend', ' <span class="faint">refreshing…</span>');
+    try { const fresh = await api(`/api/dataset?${qs({ uri, refresh: 1 })}`); data.tasks = fresh.tasks; draw(fresh.tasks); }
+    catch (e) { alert('refresh failed: ' + e.message); }
+    location.reload();
+  };
+}
+
+/* ── task viewer (file tree + content) ────────────── */
+const LANG = { toml: 'ini', diff: 'diff', patch: 'diff', sh: 'bash', bash: 'bash', py: 'python', json: 'json', yaml: 'yaml', yml: 'yaml', md: 'markdown', js: 'javascript', ts: 'typescript', html: 'xml', css: 'css' };
+function langFor(path) {
+  if (path.endsWith('Dockerfile')) return 'dockerfile';
+  const ext = path.split('.').pop().toLowerCase();
+  return LANG[ext] || 'plaintext';
+}
+
+function harborCmd(kind, ident, taskId) {
+  if (kind === 'gh') return `harbor run --task-git-url https://github.com/${ident}.git -i ${taskId} -a oracle`;
+  if (kind === 'local') return `harbor run -p ${ident} -i ${taskId} -a oracle`;
+  // hf: pull from the Hub, then run the single task with the oracle agent
+  const dir = ident.split('/').pop();
+  return `huggingface-cli download ${ident} --repo-type dataset --local-dir ${dir} && harbor run -p ${dir} -i ${taskId} -a oracle`;
+}
+
+let _taskSiblings = { uri: null, tasks: [], ident: null, kind: null };
+async function renderTask(params) {
+  setActiveNav(null);
+  const uri = params.get('uri');
+  let task = params.get('task');
+  let initialFile = params.get('f');
+
+  APP.innerHTML = `<div class="page"><div class="loading"><span class="spinner"></span>loading task…
+      <span class="sub">Fetching this task's files from the Hub — usually a second or two.</span>
+    </div></div>`;
+
+  // Sibling task list (for the side panel) + canonical ident/kind (run command).
+  // Cached per-uri so flipping between tasks doesn't refetch the list.
+  if (_taskSiblings.uri !== uri) {
+    try {
+      const ds = await api(`/api/dataset?uri=${enc(uri)}`);
+      _taskSiblings = { uri, tasks: ds.tasks || [], ident: ds.ident, kind: ds.kind };
+    } catch { _taskSiblings = { uri, tasks: [], ident: uri, kind: 'hf' }; }
+  }
+  const siblings = _taskSiblings.tasks;
+  const ident = _taskSiblings.ident || uri;
+  const kind = _taskSiblings.kind || 'hf';
+
+  const page = APP.querySelector('.page');
+  const collapsed = localStorage.getItem('hh-tasks-collapsed') === '1';
+  page.innerHTML = `
+    <div class="crumb">
+      <button class="nav-btn ghost" id="toggle-tasks" title="Toggle task list">${ICON.panel}</button>
+      <a href="#dataset?uri=${enc(uri)}">${esc(ident)}</a>
+      <span class="sep">/</span><span id="crumb-task">${esc(task)}</span>
+      <span id="crumb-diff"></span>
+      <span class="pos" id="crumb-pos" style="margin-left:auto"></span>
+    </div>
+    <div class="runbar">
+      <span class="lbl">${ICON.term}</span>
+      <code id="run-cmd"></code>
+      <span id="run-copy"></span>
+    </div>
+    <div class="taskview${collapsed ? ' collapsed' : ''}" id="taskview">
+      <div class="tasks-panel" id="tasks-panel">
+        <div class="tp-head">Tasks <span class="faint">${siblings.length}</span></div>
+        <div class="tp-search">${ICON.search}<input id="tp-search" placeholder="Filter tasks…" /></div>
+        <div class="tp-list" id="tp-list"></div>
+      </div>
+      <div class="tree" id="tree"></div>
+      <div class="content" id="content"></div>
+    </div>`;
+
+  const taskview = document.getElementById('taskview');
+  const tpList = document.getElementById('tp-list');
+  const tree = document.getElementById('tree');
+  const content = document.getElementById('content');
+  const runbar = page.querySelector('.runbar');
+  const runCode = document.getElementById('run-cmd');
+  const runCopyHolder = document.getElementById('run-copy');
+
+  document.getElementById('toggle-tasks').onclick = () => {
+    taskview.classList.toggle('collapsed');
+    localStorage.setItem('hh-tasks-collapsed', taskview.classList.contains('collapsed') ? '1' : '0');
+  };
+
+  // ── tasks side panel ──
+  function drawPanel(filter = '') {
+    tpList.innerHTML = '';
+    const q = filter.trim().toLowerCase();
+    const list = q ? siblings.filter(s => s.toLowerCase().includes(q)) : siblings;
+    list.slice(0, 1000).forEach(tid => {
+      const r = document.createElement('div');
+      r.className = 'tp-item' + (tid === task ? ' active' : '');
+      r.textContent = tid; r.title = tid; r.dataset.tid = tid;
+      r.onclick = () => { if (tid !== task) loadDetail(tid, null); };
+      tpList.appendChild(r);
+    });
+    if (list.length > 1000) {
+      const m = document.createElement('div'); m.className = 'empty'; m.textContent = `showing 1000 of ${list.length} — filter to narrow`;
+      tpList.appendChild(m);
+    }
+  }
+  drawPanel();
+  const tps = document.getElementById('tp-search');
+  let ft;
+  tps.addEventListener('input', () => { clearTimeout(ft); ft = setTimeout(() => drawPanel(tps.value), 100); });
+
+  function syncPanelActive(tid) {
+    tpList.querySelectorAll('.tp-item').forEach(n => n.classList.toggle('active', n.dataset.tid === tid));
+    const a = tpList.querySelector('.tp-item.active'); if (a) a.scrollIntoView({ block: 'nearest' });
+  }
+
+  // ─�� load one task's detail into the tree + content (no full re-render) ──
+  async function loadDetail(tid, wantFile) {
+    task = tid;
+    syncPanelActive(tid);
+    document.getElementById('crumb-task').textContent = tid;
+    const i = siblings.indexOf(tid);
+    document.getElementById('crumb-pos').textContent = i >= 0 ? `${i + 1} / ${siblings.length}` : '';
+    history.replaceState(null, '', '#' + `task?${qs({ uri, task: tid })}`);
+
+    const cmd = harborCmd(kind, ident, tid);
+    runCode.textContent = cmd;
+    runCopyHolder.innerHTML = '';
+    const rc = copyButton(cmd);
+    rc.addEventListener('click', () => { runbar.classList.add('copied'); setTimeout(() => runbar.classList.remove('copied'), 1100); });
+    runCopyHolder.appendChild(rc);
+
+    tree.innerHTML = '';
+    content.innerHTML = `<div class="loading"><span class="spinner"></span>loading task…</div>`;
+    let t;
+    try { t = await api(`/api/task?${qs({ uri, task: tid })}`); }
+    catch (e) { content.innerHTML = `<div class="errbox">${esc(e.message)}</div>`; return; }
+    if (task !== tid) return; // a newer click superseded this fetch
+
+    document.getElementById('crumb-diff').innerHTML = t.difficulty ? `<span class="pill">${esc(t.difficulty)}</span>` : '';
+    buildDetail(t, wantFile);
+  }
+
+  function buildDetail(t, wantFile) {
+    const files = t.files || {};
+    const paths = Object.keys(files).sort();
+    tree.innerHTML = `<div class="thead2">${esc(t.id)}</div>`;
+
+    function node(label, indent, type, onClick, active) {
+      const n = document.createElement('div');
+      n.className = 'tnode' + (type === 'dir' ? ' dir' : '') + (active ? ' active' : '');
+      n.style.paddingLeft = (14 + indent * 16) + 'px';
+      n.innerHTML = (type === 'dir' ? ICON.dir : type === 'info' ? ICON.info : ICON.file) + `<span>${esc(label)}</span>`;
+      if (onClick) n.onclick = onClick;
+      return n;
+    }
+    const nodes = {};
+    function setHashFile(f) { return `task?${qs({ uri, task: t.id, f })}`; }
+    function select(id) {
+      Object.values(nodes).forEach(n => n.classList.remove('active'));
+      if (nodes[id]) nodes[id].classList.add('active');
+      if (id === '__overview__') showOverview(); else showFile(id);
+    }
+    const ov = node('Overview', 0, 'info', () => { history.replaceState(null, '', '#' + setHashFile('__overview__')); select('__overview__'); });
+    nodes['__overview__'] = ov; tree.appendChild(ov);
+    const groups = {}; const top = [];
+    paths.forEach(p => { if (p.includes('/')) { const f = p.split('/')[0]; (groups[f] = groups[f] || []).push(p); } else top.push(p); });
+    top.forEach(p => { const n = node(p, 0, 'file', () => { history.replaceState(null, '', '#' + setHashFile(p)); select(p); }); nodes[p] = n; tree.appendChild(n); });
+    Object.keys(groups).sort().forEach(folder => {
+      tree.appendChild(node(folder + '/', 0, 'dir'));
+      groups[folder].sort().forEach(p => { const n = node(p.split('/').slice(1).join('/'), 1, 'file', () => { history.replaceState(null, '', '#' + setHashFile(p)); select(p); }); nodes[p] = n; tree.appendChild(n); });
+    });
+
+    function showOverview() {
+      const rows = [];
+      const add = (k, v) => { if (v != null && v !== '' && !(Array.isArray(v) && !v.length)) rows.push([k, v]); };
+      add('Task id', t.id); add('Name', t.name); add('Org', t.org); add('Version', t.version);
+      add('Difficulty', t.difficulty); add('Category', t.category);
+      add('Agent timeout', t.agent_timeout_sec != null ? t.agent_timeout_sec + 's' : null);
+      add('Verifier timeout', t.verifier_timeout_sec != null ? t.verifier_timeout_sec + 's' : null);
+      let html = `<div class="fhead"><span class="path">${ICON.info} Overview</span></div>`;
+      if (t.description) html += `<div class="md">${marked.parse(t.description)}</div>`;
+      html += '<table class="kv">';
+      rows.forEach(([k, v]) => html += `<tr><td>${esc(k)}</td><td>${esc(v)}</td></tr>`);
+      if (t.keywords && t.keywords.length) html += `<tr><td>Keywords</td><td>${t.keywords.map(k => `<span class="kw">${esc(k)}</span>`).join('')}</td></tr>`;
+      if (t.repo2env) html += `<tr><td>repo2env</td><td><pre style="margin:0;padding:0;background:none">${esc(JSON.stringify(t.repo2env, null, 2))}</pre></td></tr>`;
+      html += '</table>';
+      const instr = files['instruction.md'] || t.instruction_inline;
+      if (instr) html += `<div class="fhead"><span class="path">${ICON.file} instruction.md</span></div><div class="md">${marked.parse(instr)}</div>`;
+      content.innerHTML = html;
+    }
+    function showFile(path) {
+      const body = files[path] != null ? files[path] : (path === 'task.toml' ? t.task_toml_raw : '');
+      const fhead = document.createElement('div'); fhead.className = 'fhead';
+      fhead.innerHTML = `<span class="path">${ICON.file} ${esc(path)}</span>`;
+      fhead.appendChild(copyButton(body));
+      content.innerHTML = '';
+      content.appendChild(fhead);
+      if (path.endsWith('.md')) {
+        const d = document.createElement('div'); d.className = 'md'; d.innerHTML = marked.parse(body); content.appendChild(d);
+      } else {
+        const pre = document.createElement('pre'); const code = document.createElement('code');
+        code.className = 'language-' + langFor(path); code.textContent = body;
+        pre.appendChild(code); content.appendChild(pre);
+        try { hljs.highlightElement(code); } catch {}
+      }
+      content.scrollTop = 0;
+    }
+
+    select(wantFile && (nodes[wantFile] || wantFile === '__overview__') ? wantFile : '__overview__');
+  }
+
+  await loadDetail(task, initialFile);
+}
+
+/* ── router ───────────────────────────────────────── */
+function router() {
+  const raw = location.hash.slice(1) || '/';
+  const [route, query] = raw.split('?');
+  const params = new URLSearchParams(query || '');
+  window.scrollTo(0, 0);
+  if (route === '/' || route === '' || route === 'home') return renderHome();
+  if (route === '/datasets' || route === 'datasets') return renderDatasets(params);
+  if (route === 'dataset') return renderDataset(params);
+  if (route === 'task') return renderTask(params);
+  renderHome();
+}
+
+// ⌘K focuses search on datasets page (and jumps there otherwise)
+document.addEventListener('keydown', (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault();
+    const s = document.getElementById('ds-search') || document.getElementById('load-input');
+    if (s) s.focus(); else location.hash = '/datasets';
+  }
+});
+
+// ?dataset= / ?d= prefill (legacy Gradio-style deep link) → dataset view
+(function prefill() {
+  const p = new URLSearchParams(location.search);
+  const d = p.get('dataset') || p.get('d');
+  if (d && !location.hash) { location.hash = `dataset?uri=${enc(d)}`; }
+})();
+
+window.addEventListener('hashchange', router);
+router();

static/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hugging Face Harbor Visualiser — browse Harbor task-spec datasets</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤗</text></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+  <nav class="nav">
+    <a class="brand" href="#/"><span class="logo">🤗</span> Harbor&nbsp;Visualiser</a>
+    <div class="links">
+      <a href="#/" data-nav="home">Home</a>
+      <a href="#/datasets" data-nav="datasets">Datasets</a>
+      <a href="https://www.harborframework.com" target="_blank" rel="noopener" class="ext">Harbor&nbsp;↗</a>
+    </div>
+    <div class="spacer"></div>
+    <div class="theme-toggle" id="theme-toggle">
+      <button data-mode="light" title="Light"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></button>
+      <button data-mode="system" title="System"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></button>
+      <button data-mode="dark" title="Dark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg></button>
+    </div>
+  </nav>
+  <main id="app" class="wrap"></main>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.0/marked.min.js"></script>
+  <script src="/static/app.js"></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,285 @@
+/* Hugging Face Harbor Visualiser — Hugging Face themed dark/light. */
+:root {
+  --bg: #ffffff; --panel: #f9fafb; --panel-2: #f1f3f5;
+  --border: #e5e7eb; --border-strong: #d4d7dd;
+  --text: #1b1b1f; --muted: #5b6270; --faint: #99a0ad;
+  --accent: #e88b00; --accent-soft: rgba(255,157,0,.12);
+  --hf-yellow: #ffd21e; --hf-orange: #ff9d00;
+  --ok: #16a34a; --warn: #d97706; --err: #dc2626;
+  --hover: #f1f3f5;
+  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+  --radius: 10px; --nav-h: 56px; --maxw: 1180px;
+}
+:root[data-theme="dark"] {
+  --bg: #0b0d12; --panel: #11141b; --panel-2: #1a1e27;
+  --border: #232834; --border-strong: #323847;
+  --text: #f3f4f6; --muted: #9aa1ad; --faint: #646b78;
+  --accent: #ffae45; --accent-soft: rgba(255,174,69,.13);
+  --hf-yellow: #ffd21e; --hf-orange: #ff9d00;
+  --ok: #4ade80; --warn: #fbbf24; --err: #f87171;
+  --hover: #181c24;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
+body {
+  background: var(--bg); color: var(--text);
+  font-family: var(--mono); font-size: 14px; line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; text-decoration: none; }
+button { font-family: inherit; cursor: pointer; }
+code, pre { font-family: var(--mono); }
+::selection { background: var(--accent-soft); }
+
+/* ── nav ───────────────────────────────────────────── */
+.nav {
+  position: sticky; top: 0; z-index: 50;
+  height: var(--nav-h); display: flex; align-items: center; gap: 22px;
+  padding: 0 22px; background: color-mix(in srgb, var(--bg) 86%, transparent);
+  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
+}
+.nav .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
+.nav .brand:hover { color: var(--text); }
+.nav .brand .logo { font-size: 20px; line-height: 1; filter: saturate(1.15); }
+.nav .brand .tag { font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
+  color: #1b1b1f; background: var(--hf-yellow); padding: 2px 6px; border-radius: 5px; }
+.nav .links { display: flex; gap: 18px; }
+.nav .links a { color: var(--muted); font-size: 13px; }
+.nav .links a:hover, .nav .links a.active { color: var(--text); }
+.nav .spacer { flex: 1; }
+.theme-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+.theme-toggle button {
+  background: transparent; border: 0; color: var(--faint);
+  padding: 6px 9px; display: grid; place-items: center; line-height: 0;
+}
+.theme-toggle button:hover { color: var(--text); background: var(--hover); }
+.theme-toggle button.active { color: var(--text); background: var(--panel-2); }
+.theme-toggle svg { width: 15px; height: 15px; }
+
+/* ── layout ────────────────────────────────────────── */
+.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
+.page { padding: 34px 0 80px; }
+h1 { font-size: 30px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 18px; }
+h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
+.muted { color: var(--muted); }
+.faint { color: var(--faint); }
+
+/* thin Hugging Face accent strip at the very top */
+body::before { content: ""; display: block; height: 3px;
+  background: linear-gradient(90deg, var(--hf-yellow), var(--hf-orange)); }
+
+/* hero */
+.hero { text-align: center; padding: 60px 0 30px; }
+.hero .mark { font-size: 56px; line-height: 1; margin-bottom: 10px; }
+.hero h1 { font-size: 46px; margin: 0 0 14px; letter-spacing: -1.4px; }
+.hero h1 .hf { background: linear-gradient(90deg, var(--hf-orange), var(--hf-yellow));
+  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
+.hero p { color: var(--muted); font-size: 14.5px; margin: 0 auto; max-width: 640px; line-height: 1.6; }
+
+/* how-to / embed instructions */
+.howto { margin: 46px 0 0; }
+.howto h2 { font-size: 15px; margin: 0 0 14px; }
+.howto .steps { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
+.howto .step { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 16px 18px; }
+.howto .step h3 { font-size: 13px; margin: 0 0 4px; font-weight: 600; }
+.howto .step p { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; line-height: 1.55; }
+.snippet { display: flex; align-items: center; gap: 10px; background: var(--panel-2);
+  border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; max-width: 100%; overflow: hidden; }
+.snippet code { font-size: 12px; color: var(--text); overflow-x: auto; white-space: nowrap; flex: 1; min-width: 0; }
+.snippet code::-webkit-scrollbar { height: 5px; }
+.snippet code::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
+.snippet .copy { color: var(--faint); line-height: 0; flex: none; }
+.snippet .copy:hover { color: var(--accent); }
+.snippet .copy svg { width: 14px; height: 14px; }
+.howto .badge-preview { display: inline-flex; align-items: stretch; font-size: 11px; font-weight: 700;
+  border-radius: 5px; overflow: hidden; margin-bottom: 11px; }
+.howto .badge-preview .l { background: #555; color: #fff; padding: 3px 8px; }
+.howto .badge-preview .r { background: var(--hf-yellow); color: #1b1b1f; padding: 3px 8px; }
+@media (max-width: 700px) { .howto .steps { grid-template-columns: 1fr; } }
+/* accent link + nav external link */
+.hl { color: var(--accent); }
+.hl:hover { text-decoration: underline; }
+.nav .links a.ext { color: var(--faint); }
+.nav .links a.ext:hover { color: var(--accent); }
+/* footer attribution */
+.footer { max-width: 620px; margin: 56px auto 0; text-align: center; color: var(--faint);
+  font-size: 12px; line-height: 1.7; border-top: 1px solid var(--border); padding-top: 22px; }
+
+/* ── table card ────────────────────────────────────── */
+.card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
+.thead { display: flex; padding: 11px 18px; border-bottom: 1px solid var(--border);
+  font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--faint); }
+.thead .col-tasks { margin-left: auto; }
+.row {
+  display: flex; align-items: center; gap: 8px; padding: 13px 18px;
+  border-bottom: 1px solid var(--border); cursor: pointer; transition: background .08s;
+}
+.row:last-child { border-bottom: 0; }
+.row:hover { background: var(--hover); }
+.row .name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.row .copy { color: var(--faint); opacity: 0; transition: opacity .1s; line-height: 0; }
+.row:hover .copy { opacity: 1; }
+.row .copy:hover { color: var(--text); }
+.row .copy svg { width: 13px; height: 13px; }
+.row .tasks { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; padding-left: 14px; }
+.row .tasks .spin { color: var(--faint); }
+
+/* search */
+.search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 11px 16px; background: var(--panel); margin-bottom: 18px; }
+.search:focus-within { border-color: var(--border-strong); }
+.search svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
+.search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-family: var(--mono); font-size: 14px; }
+.search input::placeholder { color: var(--faint); }
+.search .kbd { color: var(--faint); font-size: 11px; border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
+.search select { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-family: var(--mono); font-size: 12px; }
+
+/* buttons */
+.btn { display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2);
+  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
+  padding: 9px 16px; font-size: 13px; transition: background .1s, border-color .1s; }
+.btn:hover { background: var(--hover); border-color: var(--border-strong); }
+.center { text-align: center; margin-top: 26px; }
+
+/* pills / badges */
+.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 8px;
+  border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--panel-2); }
+.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
+
+/* breadcrumb */
+.crumb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 16px; flex-wrap: wrap; }
+.crumb a:hover { color: var(--text); }
+.crumb .sep { color: var(--faint); }
+
+/* ── dataset / task viewer (split) ─────────────────── */
+.viewer { display: grid; grid-template-columns: 300px 1fr; gap: 0; border: 1px solid var(--border);
+  border-radius: var(--radius); overflow: hidden; min-height: 70vh; }
+.tree { border-right: 1px solid var(--border); background: var(--panel); overflow: auto; max-height: 80vh; }
+.tree .thead2 { padding: 11px 16px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
+  color: var(--faint); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); }
+.tnode { display: flex; align-items: center; gap: 7px; padding: 6px 14px; cursor: pointer; font-size: 13px;
+  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tnode:hover { background: var(--hover); color: var(--text); }
+.tnode.active { background: var(--accent-soft); color: var(--text); }
+.tnode.dir { color: var(--text); }
+.tnode .ind { display: inline-block; }
+.tnode svg { width: 14px; height: 14px; flex: none; color: var(--faint); }
+.tnode.active svg { color: var(--accent); }
+
+/* task master-detail: [tasks panel | file tree | content] */
+.taskview { display: grid; grid-template-columns: 250px 230px 1fr; border: 1px solid var(--border);
+  border-radius: var(--radius); overflow: hidden; height: calc(100vh - 200px); min-height: 460px;
+  transition: grid-template-columns .18s ease; }
+.taskview.collapsed { grid-template-columns: 0 230px 1fr; }
+.taskview.collapsed .tasks-panel { opacity: 0; pointer-events: none; }
+.tasks-panel { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border);
+  background: var(--panel-2); overflow: hidden; transition: opacity .15s ease; }
+.tasks-panel .tp-head { padding: 11px 14px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
+  color: var(--faint); border-bottom: 1px solid var(--border); flex: none; }
+.tasks-panel .tp-search { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex: none; }
+.tasks-panel .tp-search svg { width: 14px; height: 14px; color: var(--faint); flex: none; }
+.tasks-panel .tp-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font-family: var(--mono); font-size: 12.5px; }
+.tasks-panel .tp-search input::placeholder { color: var(--faint); }
+.tp-list { overflow: auto; flex: 1; }
+.tp-item { padding: 8px 14px; font-size: 12.5px; color: var(--muted); cursor: pointer;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid transparent; }
+.tp-item:hover { background: var(--hover); color: var(--text); }
+.tp-item.active { background: var(--accent-soft); color: var(--text); border-left-color: var(--hf-orange); }
+.tp-list .empty { padding: 14px; font-size: 11.5px; color: var(--faint); }
+
+.content { overflow: auto; max-height: 80vh; background: var(--bg); }
+.taskview .tree, .taskview .content { max-height: none; }
+.content .fhead { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
+  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 2; }
+.content .fhead .path { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); min-width: 0; }
+.content .fhead svg { width: 15px; height: 15px; flex: none; color: var(--faint); }
+.content .fhead .copy { margin-left: auto; }
+.content pre { margin: 0; padding: 16px; overflow: auto; font-size: 12.5px; line-height: 1.6; }
+.content pre code { background: transparent !important; padding: 0 !important; }
+.content .md { padding: 18px 22px; }
+.content .md h1 { font-size: 22px; } .content .md h2 { font-size: 17px; } .content .md pre { background: var(--panel-2); border-radius: 8px; }
+.content .md code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
+
+/* overview */
+.kv { width: 100%; border-collapse: collapse; }
+.kv td { padding: 9px 16px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 13px; }
+.kv td:first-child { color: var(--muted); width: 180px; white-space: nowrap; }
+.kw { display: inline-block; font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; margin: 0 4px 4px 0; color: var(--muted); }
+
+/* task list (within dataset) — scrolls internally, not the whole page */
+.tasklist { max-height: calc(100vh - 240px); overflow-y: auto; }
+.tasklist .thead { position: sticky; top: 0; background: var(--panel); z-index: 1; }
+.tasklist .row .name { font-size: 13px; }
+.tasklist .row .tasks { font-size: 12px; }
+
+/* states */
+.loading, .empty, .errbox { padding: 50px 20px; text-align: center; color: var(--muted); }
+.errbox { color: var(--err); }
+.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent);
+  border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; margin-right: 8px; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.copied { color: var(--ok) !important; }
+
+/* code section (publish-style) */
+.codeblock { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); margin: 14px 0; overflow: hidden; }
+.codeblock .chead { display: flex; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); }
+.codeblock .chead .copy { margin-left: auto; }
+.codeblock pre { margin: 0; padding: 14px; font-size: 12.5px; overflow: auto; }
+
+/* run-this-task command — styled like a terminal block */
+.runbar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
+  background: #0d1117; border: 1px solid var(--border-strong); border-radius: var(--radius);
+  padding: 11px 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
+:root[data-theme="light"] .runbar { background: #1b1f27; }
+.runbar .lbl { display: inline-flex; align-items: center; flex: none; color: #4ade80; line-height: 0; }
+.runbar .lbl svg { width: 15px; height: 15px; }
+.runbar code { font-family: var(--mono); font-size: 12.5px; color: #d7dce4; white-space: nowrap;
+  overflow-x: auto; flex: 1; min-width: 0; }
+.runbar code::before { content: "$ "; color: #6b7280; }
+.runbar code::-webkit-scrollbar { height: 5px; }
+.runbar code::-webkit-scrollbar-thumb { background: #2b313b; border-radius: 3px; }
+.runbar .copy { flex: none; color: #6b7280; line-height: 0; }
+.runbar .copy:hover { color: var(--hf-yellow); }
+.runbar .copy svg { width: 15px; height: 15px; }
+.runbar.copied .copy { color: #4ade80; }
+
+/* generic icon button (crumb toggle etc.) */
+.nav-btn { display: grid; place-items: center; width: 30px; height: 30px; flex: none;
+  border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--muted); }
+.nav-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
+.nav-btn:disabled { opacity: .35; cursor: default; }
+.nav-btn svg { width: 15px; height: 15px; }
+.nav-btn.ghost { background: transparent; }
+.crumb .pos { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; flex: none; }
+
+/* inline hint / note (loading warnings, tag instruction) */
+.hint { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 12.5px;
+  line-height: 1.55; background: var(--panel); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 13px 15px; }
+.hint .ic { color: var(--hf-orange); flex: none; line-height: 0; margin-top: 1px; }
+.hint code { background: var(--panel-2); padding: 1px 6px; border-radius: 4px; color: var(--text); font-size: 12px; }
+.loading .sub { display: block; margin-top: 8px; font-size: 12px; color: var(--faint); }
+
+/* responsive */
+@media (max-width: 760px) {
+  .nav { gap: 12px; padding: 0 14px; }
+  .nav .brand { font-size: 13px; }
+  .wrap { padding: 0 14px; }
+  .hero h1 { font-size: 32px; }
+  .hero .mark { font-size: 46px; }
+  .viewer { grid-template-columns: 1fr; }
+  .tree { max-height: 200px; border-right: 0; border-bottom: 1px solid var(--border); }
+  .content { max-height: none; }
+  .nav .links { gap: 12px; }
+  .nav .links a:not(.ext) { display: none; }
+  .crumb { gap: 6px; }
+  .kv td:first-child { width: auto; }
+
+  /* task view stacks: tasks panel (toggleable) over tree over content */
+  .taskview { grid-template-columns: 1fr; height: auto; }
+  .taskview.collapsed { grid-template-columns: 1fr; }
+  .tasks-panel { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--border); }
+  .taskview.collapsed .tasks-panel { display: none; }
+  .taskview .tree { max-height: 200px; border-right: 0; border-bottom: 1px solid var(--border); }
+  .taskview .content { max-height: 70vh; }
+}

viewer/__init__.py

@@ -1,12 +1,13 @@
 """Harbor Visualiser — load + parse Harbor task spec datasets."""
 
-from viewer.load import DatasetSource, fetch_dataset, parse_dataset_uri
+from viewer.load import DatasetSource, fetch_dataset, fetch_hf_task, parse_dataset_uri
 from viewer.parse import HarborTask, list_tasks, load_task
 
 __all__ = [
     "DatasetSource",
     "HarborTask",
     "fetch_dataset",
+    "fetch_hf_task",
     "list_tasks",
     "load_task",
     "parse_dataset_uri",

viewer/hub.py

@@ -0,0 +1,121 @@
+"""Discover Harbor task-spec datasets on the Hugging Face Hub.
+
+Harbor datasets are tagged `harbor` on the Hub — the same filter as
+https://huggingface.co/datasets?other=harbor . This module lists them (fast,
+no per-dataset round-trips) and computes per-dataset task counts on demand
+(one cheap `list_repo_files` call, memoised).
+
+All listing is done live against the Hub so the UI always reflects the latest
+published datasets (no stale snapshot).
+"""
+
+from __future__ import annotations
+
+import logging
+import os
+import time
+from dataclasses import dataclass
+
+logger = logging.getLogger(__name__)
+
+_HARBOR_TAG = "harbor"
+
+
+@dataclass(slots=True)
+class HubDataset:
+    id: str
+    downloads: int = 0
+    likes: int = 0
+    updated: str | None = None
+    private: bool = False
+
+    def as_dict(self) -> dict:
+        return {
+            "id": self.id,
+            "downloads": self.downloads,
+            "likes": self.likes,
+            "updated": self.updated,
+            "private": self.private,
+        }
+
+
+def _token() -> str | None:
+    return os.environ.get("HF_TOKEN") or None
+
+
+def list_harbor_datasets(query: str | None = None, sort: str = "downloads",
+                         limit: int = 500) -> list[HubDataset]:
+    """List datasets tagged `harbor` on the Hub. Always live (no caching).
+
+    `sort` ∈ {downloads, likes, lastModified, trending}. `query` filters by
+    substring on the dataset id (server-side search)."""
+    from huggingface_hub import HfApi
+
+    api = HfApi(token=_token())
+    # `filter=` matches the `other:harbor` tag used by the Hub UI.
+    kwargs: dict = {"filter": _HARBOR_TAG, "limit": limit}
+    if sort in ("downloads", "likes", "lastModified", "trendingScore"):
+        kwargs["sort"] = sort
+    if query:
+        kwargs["search"] = query
+    out: list[HubDataset] = []
+    for d in api.list_datasets(**kwargs):
+        lm = getattr(d, "last_modified", None)
+        out.append(HubDataset(
+            id=d.id,
+            downloads=int(getattr(d, "downloads", 0) or 0),
+            likes=int(getattr(d, "likes", 0) or 0),
+            updated=lm.isoformat() if lm else None,
+            private=bool(getattr(d, "private", False)),
+        ))
+    return out
+
+
+# task-id memo: {(id, rev): (ids, ts)} — derived from a shallow tree listing,
+# never a download. Short TTL so freshly-pushed tasks still surface.
+_TASKS_CACHE: dict[tuple[str, str], tuple[list[str], float]] = {}
+_TASKS_TTL = 120.0  # seconds
+
+
+def _is_dir(entry) -> bool:
+    return entry.__class__.__name__ == "RepoFolder"
+
+
+def list_hf_tasks(dataset_id: str, revision: str | None = None, *, ttl: float = _TASKS_TTL) -> list[str]:
+    """Task ids in a Hub dataset WITHOUT downloading it.
+
+    Uses *shallow* tree listings so even 2k-task datasets resolve in ~1 API call
+    instead of walking every file: if a top-level `tasks/` folder exists we list
+    its immediate children (Repo2RLEnv's nested layout); otherwise we treat the
+    top-level folders as flat task dirs. This is the fix for huge datasets that
+    used to hang while the whole repo was enumerated/downloaded."""
+    key = (dataset_id, revision or "head")
+    now = time.time()
+    hit = _TASKS_CACHE.get(key)
+    if hit and (now - hit[1]) < ttl:
+        return hit[0]
+
+    from huggingface_hub import HfApi
+
+    api = HfApi(token=_token())
+    root = list(api.list_repo_tree(dataset_id, repo_type="dataset", revision=revision, recursive=False))
+    names = {e.path: e for e in root}
+
+    if "tasks" in names and _is_dir(names["tasks"]):
+        sub = api.list_repo_tree(dataset_id, "tasks", repo_type="dataset", revision=revision, recursive=False)
+        ids = sorted(e.path.split("/")[-1] for e in sub if _is_dir(e))
+    else:
+        # flat layout: top-level folders are the tasks (skip dotfiles/README/etc.)
+        ids = sorted(e.path for e in root if _is_dir(e) and not e.path.startswith("."))
+
+    _TASKS_CACHE[key] = (ids, now)
+    return ids
+
+
+def count_tasks(dataset_id: str) -> int:
+    """Number of Harbor tasks in a Hub dataset (shallow listing, memoised)."""
+    try:
+        return len(list_hf_tasks(dataset_id))
+    except Exception as exc:  # noqa: BLE001
+        logger.warning("count_tasks(%s) failed: %s", dataset_id, exc)
+        return -1

viewer/load.py

@@ -139,16 +139,21 @@ def _fetch_hf(source: DatasetSource, force: bool) -> Path:
     from huggingface_hub import snapshot_download
 
     target = CACHE_ROOT / source.cache_key
-    if not force and target.exists() and any(target.iterdir()):
-        logger.info("hf cache hit: %s", target)
+    # Pinned revisions (tag/commit) are immutable → caching is always safe.
+    # Unpinned ("head") datasets MUST re-sync every load so we never show stale
+    # data — snapshot_download is etag-aware, so re-syncing only pulls files
+    # that actually changed (cheap). This is the fix for "doesn't show latest".
+    pinned = source.revision is not None
+    if not force and pinned and target.exists() and any(target.iterdir()):
+        logger.info("hf cache hit (pinned %s): %s", source.revision, target)
         return target
 
-    if target.exists():
-        shutil.rmtree(target)
     target.mkdir(parents=True, exist_ok=True)
     # Public datasets work without a token; private ones rely on $HF_TOKEN
     # being set in the Space's secrets.
     token = os.environ.get("HF_TOKEN") or None
+    logger.info("hf %s: %s@%s", "fetch" if pinned else "re-sync",
+                source.ident, source.revision or "head")
     snapshot_download(
         repo_id=source.ident,
         repo_type="dataset",
@@ -159,6 +164,52 @@ def _fetch_hf(source: DatasetSource, force: bool) -> Path:
     return target
 
 
+def fetch_hf_task(source: DatasetSource, task_id: str, *, force: bool = False) -> Path:
+    """Download ONLY one task's files from an HF dataset (not the whole repo).
+
+    Snapshot-downloading a 2k-task dataset just to open one task is the slowness
+    the user hit; even `snapshot_download(allow_patterns=...)` still walks the
+    entire repo tree first. Instead we list just this task's subtree (one shallow
+    API call) and `hf_hub_download` each file. A handful of small files, no
+    full-repo walk. Files accumulate under one per-dataset cache dir so
+    revisiting is free. Returns a root that `load_task(root, task_id)` resolves
+    for either flat or nested layout.
+    """
+    from huggingface_hub import HfApi, hf_hub_download
+
+    target = CACHE_ROOT / f"{source.cache_key}__bytask"
+    target.mkdir(parents=True, exist_ok=True)
+    token = os.environ.get("HF_TOKEN") or None
+    api = HfApi(token=token)
+    logger.info("hf per-task fetch: %s :: %s", source.ident, task_id)
+
+    # Resolve the task's directory in the repo: nested (`tasks/<id>`) first, then flat.
+    # `list_repo_tree` is a generator, so the 404 for a non-existent prefix only
+    # fires while iterating — force it inside the try (via list()) so we fall
+    # through to the other layout instead of bubbling the error up.
+    files: list[str] = []
+    for prefix in (f"tasks/{task_id}", task_id):
+        try:
+            entries = list(api.list_repo_tree(
+                source.ident, prefix, repo_type="dataset",
+                revision=source.revision, recursive=True,
+            ))
+        except Exception:  # noqa: BLE001 — path doesn't exist in this layout
+            continue
+        files = [e.path for e in entries if getattr(e, "size", None) is not None]
+        if files:
+            break
+    if not files:
+        raise FileNotFoundError(f"task {task_id!r} not found in {source.ident}")
+
+    for f in files:
+        hf_hub_download(
+            repo_id=source.ident, repo_type="dataset", revision=source.revision,
+            filename=f, local_dir=str(target), token=token,
+        )
+    return target
+
+
 def _fetch_harbor(source: DatasetSource, force: bool) -> Path:
     """Shell out to `harbor datasets download` to fetch a Harbor-registry dataset.