Unify dataset+task into one master-detail workspace; UI polish

- Merge the dataset task-list view and the task detail view into a single
workspace: tasks side-panel (master) + tree/content (detail), in-place
task switching, empty "select a task" state when none chosen
- Home: curated example bubbles (HF + GitHub) instead of the live table;
no longer leads with a specific dataset
- Datasets tab: example quick-pick chips above the searchable Hub list
- Minimal thin scrollbars; terminal-styled run command; wider layout (1500px)
- Remove the top accent strip; deep-link/badge use the real $SPACE_HOST

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

static/app.js

@@ -30,6 +30,7 @@ const ICON = {
   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>',
+  refresh: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>',
 };
 
 function copyButton(text, cls = 'copy') {
@@ -45,6 +46,31 @@ function copyButton(text, cls = 'copy') {
   return b;
 }
 
+/* ── curated example datasets (shown as bubbles) ──── */
+const EXAMPLES = [
+  { label: 'Terminal-Bench 2.0', uri: 'harborframework/terminal-bench-2.0' },
+  { label: 'TaskTrove', uri: 'open-thoughts/TaskTrove' },
+  { label: 'Repo2RLEnv · PR diffs', uri: 'AdithyaSK/repo2rlenv-v083-pr_diff' },
+  { label: 'TitanBench', uri: 'billshockley/titanbench' },
+  { label: 'Harbor tasks demo', uri: 'gh://adithya-s-k/harbor-tasks-demo' },
+];
+function srcTag(uri) {
+  if (uri.startsWith('gh://') || uri.includes('github.com')) return 'gh';
+  if (uri.startsWith('harbor://')) return 'harbor';
+  return 'hf';
+}
+function exampleChips() {
+  const wrap = document.createElement('div'); wrap.className = 'chips';
+  EXAMPLES.forEach(ex => {
+    const tag = srcTag(ex.uri);
+    const c = document.createElement('button'); c.className = 'chip'; c.title = ex.uri;
+    c.innerHTML = `<span class="src ${tag}">${tag}</span><span>${esc(ex.label)}</span>`;
+    c.onclick = () => { location.hash = `dataset?uri=${enc(ex.uri)}`; };
+    wrap.appendChild(c);
+  });
+  return wrap;
+}
+
 /* ── theme ────────────────────────────────────────── */
 function applyTheme(mode) {
   const sys = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
@@ -118,15 +144,11 @@ async function renderHome() {
       <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 style="display:flex;align-items:center;justify-content:space-between;margin:30px 0 14px">
+      <h2 style="margin:0">Examples</h2>
+      <a class="faint hl" href="#/datasets" style="font-size:13px">Browse all Harbor datasets →</a>
     </div>
-    <div class="center"><a class="btn" href="#/datasets">View all datasets →</a></div>
+    <div id="examples"></div>
 
     <div class="howto">
       <h2>Link your dataset to the visualiser</h2>
@@ -153,22 +175,11 @@ async function renderHome() {
   `;
   document.getElementById('copy-link').appendChild(copyButton(`${origin}/?dataset=<owner>/<name>`));
   document.getElementById('copy-badge').appendChild(copyButton(badgeMd));
+  document.getElementById('examples').appendChild(exampleChips());
   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;
@@ -178,7 +189,8 @@ async function renderDatasets(params) {
   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>
+      <p class="muted" style="margin:-8px 0 18px;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 id="ds-examples" style="margin-bottom:20px"></div>
       <div class="search">
         ${ICON.search}
         <input id="ds-search" placeholder="Search Harbor datasets on the Hub…" autofocus />
@@ -195,6 +207,7 @@ async function renderDatasets(params) {
         <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>`;
+  document.getElementById('ds-examples').appendChild(exampleChips());
   const tbl = document.getElementById('ds-table');
   const search = document.getElementById('ds-search');
   const sortSel = document.getElementById('ds-sort'); sortSel.value = sort;
@@ -225,60 +238,6 @@ async function renderDatasets(params) {
   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) {
@@ -295,40 +254,49 @@ function harborCmd(kind, ident, taskId) {
   return `huggingface-cli download ${ident} --repo-type dataset --local-dir ${dir} && harbor run -p ${dir} -i ${taskId} -a oracle`;
 }
 
+// Unified dataset+task workspace: tasks side-panel (master) + file tree + content (detail).
+// Used by BOTH the `dataset?uri=` route (no task → empty detail) and the
+// `task?uri=&task=` route (task preselected). Switching tasks happens in place.
 let _taskSiblings = { uri: null, tasks: [], ident: null, kind: null };
-async function renderTask(params) {
-  setActiveNav(null);
+async function renderWorkspace(params) {
+  setActiveNav('datasets');
   const uri = params.get('uri');
-  let task = params.get('task');
+  let task = params.get('task') || null;
   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>
+  APP.innerHTML = `<div class="page"><div class="loading"><span class="spinner"></span>loading…
+      <span class="sub">Loading the Harbor spec — a few seconds to a minute for large datasets (the more tasks, the longer the listing).</span>
     </div></div>`;
 
-  // Sibling task list (for the side panel) + canonical ident/kind (run command).
+  // Sibling task list (the 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' }; }
+    } 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 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';
+  // Honour the collapse pref only when a task is open; with no task the panel is the focus.
+  const collapsed = task && 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>
+      <a href="#/datasets">Datasets</a><span class="sep">/</span>
+      <a href="#dataset?uri=${enc(uri)}" id="crumb-ident">${esc(ident)}</a>
+      <span class="pill">${siblings.length} tasks</span>
+      <span id="crumb-task-wrap"></span>
       <span class="pos" id="crumb-pos" style="margin-left:auto"></span>
+      <button class="nav-btn ghost" id="ws-refresh" title="Refresh dataset">${ICON.refresh}</button>
     </div>
-    <div class="runbar">
+    <div class="runbar" id="runbar" hidden>
       <span class="lbl">${ICON.term}</span>
       <code id="run-cmd"></code>
       <span id="run-copy"></span>
@@ -336,7 +304,7 @@ async function renderTask(params) {
     <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-search">${ICON.search}<input id="tp-search" placeholder="Filter tasks…" autofocus /></div>
         <div class="tp-list" id="tp-list"></div>
       </div>
       <div class="tree" id="tree"></div>
@@ -347,7 +315,7 @@ async function renderTask(params) {
   const tpList = document.getElementById('tp-list');
   const tree = document.getElementById('tree');
   const content = document.getElementById('content');
-  const runbar = page.querySelector('.runbar');
+  const runbar = document.getElementById('runbar');
   const runCode = document.getElementById('run-cmd');
   const runCopyHolder = document.getElementById('run-copy');
 
@@ -355,6 +323,13 @@ async function renderTask(params) {
     taskview.classList.toggle('collapsed');
     localStorage.setItem('hh-tasks-collapsed', taskview.classList.contains('collapsed') ? '1' : '0');
   };
+  document.getElementById('ws-refresh').onclick = async () => {
+    try {
+      const ds = await api(`/api/dataset?${qs({ uri, refresh: 1 })}`);
+      _taskSiblings = { uri, tasks: ds.tasks || [], ident: ds.ident, kind: ds.kind };
+    } catch (e) { alert('refresh failed: ' + e.message); return; }
+    renderWorkspace(params);
+  };
 
   // ── tasks side panel ──
   function drawPanel(filter = '') {
@@ -383,16 +358,31 @@ async function renderTask(params) {
     const a = tpList.querySelector('.tp-item.active'); if (a) a.scrollIntoView({ block: 'nearest' });
   }
 
+  // Empty (no task selected) — master-detail "nothing selected" state.
+  function showEmpty() {
+    task = null;
+    runbar.hidden = true;
+    syncPanelActive(null);
+    document.getElementById('crumb-task-wrap').innerHTML = '';
+    document.getElementById('crumb-pos').textContent = '';
+    history.replaceState(null, '', '#' + `dataset?${qs({ uri })}`);
+    tree.innerHTML = '';
+    content.innerHTML = `<div class="emptysel"><div class="ic">${ICON.panel}</div>
+      <p>Select a task from the list to view its spec, files & run command.</p></div>`;
+  }
+
   // ── 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;
+    document.getElementById('crumb-task-wrap').innerHTML =
+      `<span class="sep">/</span><span id="crumb-task">${esc(tid)}</span><span id="crumb-diff"></span>`;
     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);
+    runbar.hidden = false;
     runCode.textContent = cmd;
     runCopyHolder.innerHTML = '';
     const rc = copyButton(cmd);
@@ -406,7 +396,8 @@ async function renderTask(params) {
     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>` : '';
+    const diffEl = document.getElementById('crumb-diff');
+    if (diffEl) diffEl.innerHTML = t.difficulty ? ` <span class="pill">${esc(t.difficulty)}</span>` : '';
     buildDetail(t, wantFile);
   }
 
@@ -479,7 +470,8 @@ async function renderTask(params) {
     select(wantFile && (nodes[wantFile] || wantFile === '__overview__') ? wantFile : '__overview__');
   }
 
-  await loadDetail(task, initialFile);
+  if (task) await loadDetail(task, initialFile);
+  else showEmpty();
 }
 
 /* ── router ───────────────────────────────────────── */
@@ -490,8 +482,7 @@ function router() {
   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);
+  if (route === 'dataset' || route === 'task') return renderWorkspace(params);
   renderHome();
 }
 
@@ -499,7 +490,7 @@ function router() {
 document.addEventListener('keydown', (e) => {
   if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
     e.preventDefault();
-    const s = document.getElementById('ds-search') || document.getElementById('load-input');
+    const s = document.getElementById('tp-search') || document.getElementById('ds-search') || document.getElementById('load-input');
     if (s) s.focus(); else location.hash = '/datasets';
   }
 });

static/style.css

@@ -8,7 +8,7 @@
   --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;
+  --radius: 10px; --nav-h: 56px; --maxw: 1500px;
 }
 :root[data-theme="dark"] {
   --bg: #0b0d12; --panel: #11141b; --panel-2: #1a1e27;
@@ -21,6 +21,14 @@
 }
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
+
+/* minimal scrollbars everywhere */
+* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
+::-webkit-scrollbar { width: 7px; height: 7px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }
+::-webkit-scrollbar-corner { background: transparent; }
 body {
   background: var(--bg); color: var(--text);
   font-family: var(--mono); font-size: 14px; line-height: 1.55;
@@ -64,10 +72,6 @@ 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; }
@@ -76,6 +80,19 @@ body::before { content: ""; display: block; height: 3px;
   -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; }
 
+/* example bubbles / quick-pick chips */
+.chips { display: flex; flex-wrap: wrap; gap: 10px; }
+.chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 11px; border-radius: 999px;
+  border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 13px;
+  cursor: pointer; transition: border-color .12s, background .12s, transform .08s; }
+.chip:hover { border-color: var(--hf-orange); background: var(--hover); }
+.chip:active { transform: translateY(1px); }
+.chip .src { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
+  padding: 2px 6px; border-radius: 5px; flex: none; }
+.chip .src.hf { background: color-mix(in srgb, var(--hf-yellow) 22%, var(--panel-2)); color: var(--hf-orange); }
+.chip .src.gh { background: var(--panel-2); color: var(--muted); }
+.chip .src.harbor { background: var(--accent-soft); color: var(--accent); }
+
 /* how-to / embed instructions */
 .howto { margin: 46px 0 0; }
 .howto h2 { font-size: 15px; margin: 0 0 14px; }
@@ -187,6 +204,13 @@ body::before { content: ""; display: block; height: 3px;
 .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); }
 
+/* nothing-selected state in the detail pane */
+.emptysel { display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 14px; height: 100%; min-height: 320px; padding: 40px; text-align: center; color: var(--faint); }
+.emptysel .ic { color: var(--border-strong); line-height: 0; }
+.emptysel .ic svg { width: 44px; height: 44px; }
+.emptysel p { margin: 0; font-size: 13px; max-width: 320px; line-height: 1.6; }
+
 .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;