Polish submission copy and candidate board naming

README.md

@@ -19,18 +19,19 @@ models:
 
 # HF Agentic Search
 
-Finding a dataset is easy. Deciding whether it actually fits a project is not.
+Finding a dataset is easy. Deciding whether it actually fits an ML project is not.
 
-HF Agentic Search turns a project brief into a research plan, searches the Hugging Face Hub
-from several angles, inspects candidate metadata and Dataset Viewer evidence, tests explicit
-constraints, and returns a ranked shortlist with visible reasons. It is designed to be honest
-about what it could verify and what still requires human review.
+HF Agentic Search turns a plain-language project brief into a small research loop: it plans
+targeted Hugging Face Hub searches, inspects candidate cards and Dataset Viewer evidence,
+checks schemas and samples, then returns a ranked shortlist with transparent reasons. The app
+is built for engineers who care less about popularity and more about whether the data can
+actually support the model or evaluation they are trying to ship.
 
 - **Submission Space:** https://huggingface.co/spaces/build-small-hackathon/HF-Agentic-Search
 - **Working staging Space:** https://huggingface.co/spaces/sammoftah/HF-Agentic-Search
 - **Source:** https://github.com/OsamaMoftah/HF-Agentic-Search
-- **Demo video:** `TODO: add a public demo-video URL before final validation`
-- **Social post:** `TODO: add the public social-media post URL before final validation`
+- **Demo video:** `PENDING: add a public demo-video URL before final validation`
+- **Social post:** `PENDING: add the public social-media post URL before final validation`
 - **Team usernames:** `sammoftah`
 
 ## Why it is agentic
@@ -119,17 +120,16 @@ cd frontend && npm run build
 
 ## Build Small submission
 
-Submitted to the **Backyard AI** track and targeting **Best Agent**, **Tiny Titan**, and
-**Off Brand**. The custom interface is served through Gradio rather than default Gradio
-components.
+Submitted to the **Backyard AI** track and positioned for **Best Agent**, **Tiny Titan**, and
+**Off Brand**. The app runs as a Gradio Space inside the `build-small-hackathon` organization,
+with a custom React interface served through `gr.Server`.
 
-Final README checklist from the hackathon email:
+Submission readiness:
 
-- Tags are present in the YAML block: `track:backyard`, `sponsor:openai`, `achievement:offbrand`.
-- The app runs as a Gradio Space inside `build-small-hackathon`.
-- The declared model is `HuggingFaceTB/SmolLM2-360M-Instruct` at 360M parameters, below the 32B limit.
+- YAML tags are present: `track:backyard`, `sponsor:openai`, `achievement:offbrand`.
+- The model is `HuggingFaceTB/SmolLM2-360M-Instruct` at 360M parameters, well below the 32B limit.
 - Team username is listed above.
-- Demo video and social-post URLs must be replaced with real public links before running the final validator.
+- Demo video and social-post URLs are the remaining fields to replace before the final validator run.
 
-This project was designed, implemented, tested, and prepared for deployment with OpenAI Codex.
-Codex-attributed commits are available in the linked public GitHub repository.
+Built, tested, deployed, and prepared for submission with OpenAI Codex. Codex-attributed commits
+are available in the linked public GitHub repository.

frontend/dist/index.html

@@ -6,7 +6,7 @@
   <meta name="theme-color" content="#f4faff" />
   <meta name="description" content="Evidence-led agentic dataset discovery for Hugging Face." />
   <title>HF Agentic Search</title>
-  <script type="module" crossorigin src="/assets/index-QsNcetEb.js"></script>
+  <script type="module" crossorigin src="/assets/index-D5kjkl_L.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-DnaN9mhA.css">
 </head>
 <body>

frontend/src/App.jsx

@@ -28,7 +28,7 @@ function Workspace() {
       <section className="hero">
         <div className="hero-copy">
           <span className="section-index">Agentic dataset research</span>
-          <h1>A new way to search for datasets.</h1>
+          <h1>A new way to search for Hugging Face datasets.</h1>
           <p>
             Describe the model or evaluation you want to build. The agent turns that brief
             into testable data requirements, searches the Hub from several angles, inspects

frontend/src/components/CandidateBoard.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { useGame } from '../GameProvider.jsx';
+
+const LANES = [
+  {
+    status: 'recommended',
+    title: 'Recommended',
+    description: 'Ready for a first experiment',
+  },
+  {
+    status: 'conditional',
+    title: 'Review gaps',
+    description: 'Useful, but one or more checks need attention',
+  },
+  {
+    status: 'rejected',
+    title: 'Rejected',
+    description: 'Does not satisfy this project brief',
+  },
+];
+
+const CHECKS = [
+  ['domain', 'Domain'],
+  ['required_fields', 'Schema'],
+  ['language', 'Lang'],
+  ['license', 'License'],
+  ['accessible', 'Access'],
+];
+
+function shortName(id) {
+  return id?.split('/').pop()?.replaceAll('_', ' ') || id;
+}
+
+function mainGap(dataset) {
+  if (dataset.status === 'recommended') return 'All critical evidence checks passed.';
+  if (dataset.rejection_reasons?.length) return dataset.rejection_reasons[0];
+  return dataset.weakness || 'Review the remaining evidence gaps before using it.';
+}
+
+function compactEvidence(dataset) {
+  const features = dataset.features?.slice(0, 3).join(', ');
+  const examples = dataset.num_examples ? `${dataset.num_examples.toLocaleString()} rows` : 'size unknown';
+  return features ? `${features} · ${examples}` : examples;
+}
+
+export default function CandidateBoard() {
+  const { state, selected, selectDataset } = useGame();
+  const datasets = state.datasets || [];
+  const counts = LANES.map((lane) => ({
+    ...lane,
+    count: datasets.filter((dataset) => dataset.status === lane.status).length,
+  }));
+
+  if (!datasets.length) {
+    return (
+      <div className="candidate-board empty">
+        <div className="workflow-preview" aria-hidden="true">
+          <div><span>01</span><strong>Search</strong><small>Multiple Hub queries</small></div>
+          <i />
+          <div><span>02</span><strong>Test</strong><small>Schema and sample checks</small></div>
+          <i />
+          <div><span>03</span><strong>Explain</strong><small>Documented evidence</small></div>
+        </div>
+        <strong>Every candidate must earn its place.</strong>
+        <p>The agent searches broadly, then narrows the field by checking the actual dataset, not just its title.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="candidate-board">
+      <div className="decision-summary">
+        {counts.map((lane) => (
+          <div className={`decision-stat stat-${lane.status}`} key={lane.status}>
+            <span>{lane.title}</span>
+            <strong>{lane.count}</strong>
+          </div>
+        ))}
+        <p>Read left to right as a decision queue: usable now, usable with caveats, or not a fit for this brief.</p>
+      </div>
+
+      <div className="candidate-lanes">
+        {counts.map((lane) => {
+          const laneDatasets = datasets.filter((dataset) => dataset.status === lane.status);
+          return (
+            <section className={`candidate-lane lane-${lane.status}`} key={lane.status}>
+              <div className="lane-heading">
+                <div>
+                  <strong>{lane.title}</strong>
+                  <span>{lane.description}</span>
+                </div>
+                <b>{lane.count}</b>
+              </div>
+
+              {laneDatasets.length ? laneDatasets.map((dataset) => (
+                <button
+                  type="button"
+                  className={`candidate-card ${selected?.id === dataset.id ? 'active' : ''}`}
+                  key={dataset.id}
+                  onClick={() => selectDataset(dataset)}
+                >
+                  <div className="candidate-card-top">
+                    <strong title={dataset.id}>{shortName(dataset.id)}</strong>
+                    <span>{dataset.score}</span>
+                  </div>
+                  <p>{mainGap(dataset)}</p>
+                  <small>{compactEvidence(dataset)}</small>
+                  <div className="check-dots" aria-label="Evidence checks">
+                    {CHECKS.map(([key, label]) => {
+                      const value = dataset.checks?.[key] || 'unknown';
+                      return (
+                        <span className={`check-dot check-${value}`} key={key} title={`${label}: ${value}`}>
+                          {label}
+                        </span>
+                      );
+                    })}
+                  </div>
+                </button>
+              )) : (
+                <div className="candidate-empty">No candidates in this tier yet.</div>
+              )}
+            </section>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/src/components/ResearchWorkspace.jsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useGame } from '../GameProvider.jsx';
-import Canvas from './Canvas.jsx';
+import CandidateBoard from './CandidateBoard.jsx';
 
 const STEPS = [
   { type: 'plan', label: 'Understand', detail: 'Turn the brief into explicit requirements' },
@@ -89,7 +89,7 @@ export default function ResearchWorkspace() {
             </div>
             <span className="panel-count">{state.datasets.length}</span>
           </div>
-          <Canvas />
+          <CandidateBoard />
         </section>
 
         <aside className="check-panel">