Simplify annotation setup and add compact expandable job rows

deploy.py

@@ -57,7 +57,7 @@ def main():
             "frontend/dist/**",
         ],
         delete_patterns=["app.py"],
-        commit_message="Brand Annotation Studio and copy only successfully annotated episodes",
+        commit_message="Simplify annotation setup and add compact expandable job rows",
     )
     print(f"https://huggingface.co/spaces/{repo}\nRevision: {result.oid}")
 

frontend/src/JobsView.tsx

@@ -0,0 +1,315 @@
+import type { ReactNode } from "react";
+import {
+  ArrowUpRight,
+  ChevronDown,
+  LoaderCircle,
+  Plus,
+  RefreshCw,
+} from "lucide-react";
+import "./jobs.css";
+
+export type Job = {
+  id: string;
+  name?: string;
+  stage: string;
+  created_at: string;
+  owner: string;
+  output?: string;
+};
+export type Progress = {
+  model?: string;
+  status: string;
+  expected: number;
+  completed: number;
+  failed: number;
+  stopped?: number;
+  pending?: number;
+  usage: {
+    measured_inference_usd?: number;
+    successful_calls?: number;
+    input_tokens?: number;
+    output_tokens?: number;
+    rate_limited_requests?: number;
+  };
+  cost?: {
+    inference_usd: number | null;
+    cpu_usd: number | null;
+    total_usd: number | null;
+    uncertain_inference_usd: number;
+    running_seconds: number | null;
+    basis: string;
+    billing_url: string;
+  };
+  annotation_url?: string | null;
+  output_mode?: string;
+};
+const terminal = new Set(["COMPLETED", "ERROR", "CANCELED", "DELETED"]);
+const usd = (value: number | null | undefined) =>
+  value == null
+    ? "—"
+    : new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: value > 0 && value < 1 ? 4 : 2,
+        maximumFractionDigits: 4,
+      }).format(value);
+
+function status(job: Job, progress?: Progress) {
+  if (job.stage === "ERROR") return "Failed";
+  if (job.stage === "COMPLETED")
+    return progress?.status === "partial" ? "Partial" : "Completed";
+  if (job.stage === "CANCELED") return "Canceled";
+  if (["PENDING", "QUEUED"].includes(job.stage)) return "Queued";
+  return job.stage[0] + job.stage.slice(1).toLowerCase();
+}
+
+export default function JobsView({
+  jobs,
+  progress,
+  models,
+  signedIn,
+  loading,
+  signIn,
+  onRefresh,
+  onNew,
+  onCancel,
+}: {
+  jobs: Job[];
+  progress: Record<string, Progress>;
+  models: { route: string; name: string; provider_name: string }[];
+  signedIn: boolean;
+  loading: boolean;
+  signIn: ReactNode;
+  onRefresh: () => void;
+  onNew: () => void;
+  onCancel: (id: string) => void;
+}) {
+  return (
+    <div className="jobs-page">
+      <div className="page-heading">
+        <h1>Jobs</h1>
+        <div className="heading-actions">
+          <button
+            className="icon-button"
+            onClick={onRefresh}
+            disabled={!signedIn || loading}
+            aria-label="Refresh jobs"
+          >
+            <RefreshCw size={17} className={loading ? "spin" : ""} />
+          </button>
+          <button className="button primary" onClick={onNew}>
+            <Plus size={15} /> New job
+          </button>
+        </div>
+      </div>
+      {!signedIn ? (
+        <div className="jobs-empty">
+          <p>Sign in to see your jobs.</p>
+          {signIn}
+        </div>
+      ) : jobs.length === 0 ? (
+        <div className="jobs-empty">
+          {loading ? (
+            <>
+              <LoaderCircle size={20} className="spin" />
+              <p>Loading jobs…</p>
+            </>
+          ) : (
+            <>
+              <p>No jobs yet.</p>
+              <button className="button secondary" onClick={onNew}>
+                New annotation
+              </button>
+            </>
+          )}
+        </div>
+      ) : (
+        <div className="compact-jobs">
+          <div className="jobs-columns" aria-hidden="true">
+            <span>Job</span>
+            <span>Status</span>
+            <span>Episodes</span>
+            <span>Usage cost</span>
+            <span />
+          </div>
+          {jobs.map((job) => {
+            const p = progress[job.id];
+            const ended = terminal.has(job.stage);
+            const state = status(job, p);
+            const profile = models.find((m) => m.route === p?.model);
+            const model =
+              profile?.name || p?.model?.split(":")[0].split("/").pop();
+            const provider = profile?.provider_name || p?.model?.split(":")[1];
+            const name =
+              job.output?.split("/")[1] || job.name || "Annotation job";
+            const logs = `https://huggingface.co/jobs/${job.owner}/${job.id}`;
+            const results =
+              job.output && p?.completed
+                ? `https://huggingface.co/datasets/${job.output}`
+                : null;
+            const annotations = ended ? p?.annotation_url : null;
+            const action = annotations
+              ? "Show annotations"
+              : results
+                ? "Results"
+                : "Logs";
+            const knownCost = p?.cost?.total_usd ?? p?.cost?.cpu_usd;
+            const incompleteCost =
+              p?.cost &&
+              (p.cost.total_usd == null ||
+                p.cost.uncertain_inference_usd > 0.000001);
+            return (
+              <details className="compact-job" key={job.id}>
+                <summary className="compact-job-row">
+                  <span className="job-identity">
+                    <strong title={job.output || name}>{name}</strong>
+                    <span>
+                      <time dateTime={job.created_at}>
+                        {new Date(job.created_at).toLocaleString(undefined, {
+                          month: "short",
+                          day: "numeric",
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </time>
+                      {model && (
+                        <>
+                          <span className="job-meta-separator">·</span>
+                          <span className="job-model">{model}</span>
+                        </>
+                      )}
+                    </span>
+                  </span>
+                  <span className={`compact-status ${state.toLowerCase()}`}>
+                    <i />
+                    {state}
+                  </span>
+                  <span className="compact-progress">
+                    <span>
+                      {p?.expected
+                        ? `${p.completed.toLocaleString()} / ${p.expected.toLocaleString()}`
+                        : "—"}
+                      <span className="mobile-label"> episodes</span>
+                    </span>
+                    {!ended && !!p?.expected && (
+                      <progress
+                        max={p.expected}
+                        value={p.completed}
+                        aria-label={`${name} episodes completed`}
+                      />
+                    )}
+                  </span>
+                  <span
+                    className="compact-cost"
+                    title={
+                      incompleteCost
+                        ? "Some usage is unconfirmed. Expand for details."
+                        : "Usage-derived cost"
+                    }
+                  >
+                    <span className="mobile-label">Cost </span>
+                    {usd(knownCost)}
+                    {incompleteCost && knownCost != null && <sup>*</sup>}
+                  </span>
+                  <span className="compact-job-action">
+                    <a
+                      href={annotations || results || logs}
+                      target="_blank"
+                      rel="noreferrer"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {action}
+                      <ArrowUpRight size={13} />
+                    </a>
+                    <ChevronDown
+                      size={15}
+                      className="job-expand"
+                      aria-hidden="true"
+                    />
+                  </span>
+                </summary>
+                <div className="compact-job-details">
+                  <dl>
+                    <div>
+                      <dt>Model</dt>
+                      <dd>
+                        {model
+                          ? `${model}${provider ? ` · ${provider}` : ""}`
+                          : "—"}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt>Inference</dt>
+                      <dd>{usd(p?.cost?.inference_usd)}</dd>
+                    </div>
+                    <div>
+                      <dt>Compute</dt>
+                      <dd>{usd(p?.cost?.cpu_usd)}</dd>
+                    </div>
+                    <div>
+                      <dt>Model calls</dt>
+                      <dd>
+                        {p?.usage.successful_calls?.toLocaleString() ?? "—"}
+                      </dd>
+                    </div>
+                  </dl>
+                  {p &&
+                    (p.failed > 0 ||
+                      (p.stopped || 0) > 0 ||
+                      (p.pending || 0) > 0) && (
+                      <p className="job-outcomes">
+                        {[
+                          p.failed ? `${p.failed} failed` : "",
+                          p.stopped ? `${p.stopped} stopped` : "",
+                          p.pending ? `${p.pending} not processed` : "",
+                        ]
+                          .filter(Boolean)
+                          .join(" · ")}
+                      </p>
+                    )}
+                  {incompleteCost && (
+                    <p className="job-cost-note">
+                      {p.cost!.uncertain_inference_usd > 0.000001
+                        ? `Unconfirmed inference: up to ${usd(p.cost!.uncertain_inference_usd)} extra.`
+                        : "Some usage has not been reported yet."}
+                    </p>
+                  )}
+                  <div className="job-detail-actions">
+                    <a href={logs} target="_blank" rel="noreferrer">
+                      Logs <ArrowUpRight size={12} />
+                    </a>
+                    {results && (
+                      <a href={results} target="_blank" rel="noreferrer">
+                        Output files <ArrowUpRight size={12} />
+                      </a>
+                    )}
+                    {p?.cost && (
+                      <a
+                        href={p.cost.billing_url}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Billing <ArrowUpRight size={12} />
+                      </a>
+                    )}
+                    {!ended && (
+                      <button
+                        className="text-danger"
+                        onClick={() => onCancel(job.id)}
+                      >
+                        Cancel job
+                      </button>
+                    )}
+                  </div>
+                  <p className="job-billing-note">
+                    Usage estimates; final billing may differ.
+                  </p>
+                </div>
+              </details>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/jobs.css

@@ -0,0 +1,314 @@
+.jobs-page {
+  max-width: 1100px;
+  margin: 0 auto 56px;
+}
+.jobs-page h1 {
+  font-size: 27px;
+  font-weight: 600;
+}
+.jobs-page .page-heading {
+  margin-bottom: 30px;
+}
+.jobs-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 100px 20px;
+  color: var(--fg-muted);
+  font-size: 14px;
+}
+.jobs-columns,
+.compact-job-row {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) 92px 85px 90px 155px;
+  gap: 20px;
+  align-items: center;
+}
+.jobs-columns {
+  padding: 0 21px 12px;
+  color: var(--fg-muted);
+  font-size: 11px;
+}
+.compact-jobs {
+  min-width: 0;
+}
+.compact-job {
+  background: var(--surface-0);
+  border: 1px solid var(--line);
+  border-bottom: 0;
+}
+.compact-job:nth-child(2) {
+  border-radius: 10px 10px 0 0;
+}
+.compact-job:last-child {
+  border-bottom: 1px solid var(--line);
+  border-radius: 0 0 10px 10px;
+}
+.compact-job:nth-child(2):last-child {
+  border-radius: 10px;
+}
+.compact-job-row {
+  list-style: none;
+  cursor: pointer;
+  padding: 21px;
+  font-size: 12px;
+}
+.compact-job-row::-webkit-details-marker {
+  display: none;
+}
+.compact-job-row:hover {
+  background: var(--surface-1);
+}
+.compact-job-row:focus-visible {
+  outline: 2px solid #66aafc;
+  outline-offset: -2px;
+  border-radius: 7px;
+}
+.job-identity {
+  min-width: 0;
+}
+.job-identity > strong {
+  display: block;
+  font-size: 13px;
+  font-weight: 550;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1.6;
+}
+.job-identity > span {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  color: var(--fg-muted);
+  font-size: 11px;
+  margin-top: 5px;
+}
+.job-identity time {
+  flex-shrink: 0;
+}
+.job-model {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.compact-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--fg-muted);
+}
+.compact-status i {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.compact-status.completed {
+  color: var(--green);
+}
+.compact-status.running {
+  color: #5176cb;
+}
+.compact-status.partial {
+  color: #a97c22;
+}
+.compact-status.failed {
+  color: #c35757;
+}
+.dark .compact-status.failed {
+  color: #ef9797;
+}
+.dark .compact-status.running {
+  color: #99b7f5;
+}
+.dark .compact-status.partial {
+  color: #e7bf70;
+}
+.compact-progress {
+  font-variant-numeric: tabular-nums;
+  line-height: 1.5;
+}
+.compact-progress progress {
+  display: block;
+  width: 100%;
+  height: 3px;
+  margin-top: 7px;
+  border: 0;
+  border-radius: 5px;
+  overflow: hidden;
+  background: var(--surface-2);
+  accent-color: var(--fg-muted);
+}
+.compact-progress progress::-webkit-progress-bar {
+  background: var(--surface-2);
+}
+.compact-progress progress::-webkit-progress-value {
+  background: var(--fg-muted);
+}
+.compact-cost {
+  font-variant-numeric: tabular-nums;
+}
+.compact-cost sup {
+  color: var(--fg-muted);
+  padding-left: 2px;
+}
+.compact-job-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 18px;
+}
+.compact-job-action a {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  padding: 8px 0;
+}
+.compact-job-action a:hover,
+.job-detail-actions a:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.job-expand {
+  color: var(--fg-muted);
+}
+.compact-job[open] .job-expand {
+  transform: rotate(180deg);
+}
+.compact-job-details {
+  padding: 0 21px 21px;
+}
+.compact-job-details dl {
+  margin: 0;
+  padding-top: 20px;
+  border-top: 1px solid var(--line);
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 20px;
+}
+.compact-job-details dt {
+  font-size: 11px;
+  color: var(--fg-muted);
+  margin-bottom: 6px;
+}
+.compact-job-details dd {
+  font-size: 12px;
+  margin: 0;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+.job-outcomes,
+.job-cost-note {
+  color: var(--fg-muted);
+  font-size: 12px;
+  margin-top: 17px;
+}
+.job-cost-note {
+  color: var(--fg-soft);
+}
+.job-detail-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-top: 22px;
+}
+.job-detail-actions a,
+.job-detail-actions button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  padding: 0;
+}
+.job-detail-actions .text-danger {
+  margin-left: auto;
+}
+.job-billing-note {
+  font-size: 11px;
+  color: var(--fg-faint);
+  margin-top: 14px;
+}
+.mobile-label {
+  display: none;
+}
+@media (max-width: 1200px) {
+  .jobs-columns,
+  .compact-job-row {
+    grid-template-columns: minmax(160px, 1fr) 80px 65px 75px 142px;
+    gap: 12px;
+  }
+}
+@media (max-width: 800px) {
+  .jobs-columns {
+    display: none;
+  }
+  .compact-job-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 15px 12px;
+  }
+  .job-identity {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  .compact-status {
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: end;
+  }
+  .compact-progress {
+    grid-column: 1;
+    grid-row: 2;
+    font-size: 11px;
+    color: var(--fg-muted);
+  }
+  .compact-cost {
+    grid-column: 1;
+    grid-row: 3;
+    font-size: 11px;
+  }
+  .compact-job-action {
+    grid-column: 2;
+    grid-row: 2 / 4;
+    align-self: end;
+  }
+  .compact-progress progress {
+    width: 110px;
+  }
+  .mobile-label {
+    display: inline;
+  }
+  .compact-job-details dl {
+    grid-template-columns: 1fr 1fr;
+  }
+  .compact-job-row,
+  .compact-job-details {
+    padding-left: 17px;
+    padding-right: 17px;
+  }
+  .job-identity > span {
+    flex-wrap: wrap;
+    gap: 2px 7px;
+  }
+  .job-model {
+    flex-basis: 100%;
+  }
+  .job-meta-separator {
+    display: none;
+  }
+  .compact-job-action {
+    gap: 12px;
+  }
+}
+
+.jobs-page .page-heading .heading-actions {
+  flex-direction: row;
+  align-items: center;
+}

frontend/src/main.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import {
-  ArrowDownToLine,
   ArrowLeft,
   ArrowRight,
   ArrowUpRight,
@@ -12,13 +11,10 @@ import {
   Check,
   CheckCheck,
   ChevronDown,
-  ChevronRight,
   Coins,
   Database,
   FileJson2,
   FolderOpen,
-  Gauge,
-  Github,
   Globe,
   HelpCircle,
   Layers3,
@@ -34,9 +30,7 @@ import {
   Rocket,
   Search,
   Settings2,
-  ShieldCheck,
   Sun,
-  Terminal,
   Video,
   WandSparkles,
   X,
@@ -44,6 +38,7 @@ import {
 import "./style.css";
 import "./wizard.css";
 import AnnotationExamples from "./AnnotationExamples";
+import JobsView, { type Job, type Progress } from "./JobsView";
 
 type Feature =
   | "Subtasks"
@@ -127,41 +122,6 @@ type Session = {
   csrf: string;
   auth_available: boolean;
 };
-type Job = {
-  id: string;
-  name?: string;
-  stage: string;
-  created_at: string;
-  owner: string;
-  output?: string;
-};
-type Progress = {
-  model?: string;
-  status: string;
-  expected: number;
-  completed: number;
-  failed: number;
-  stopped?: number;
-  pending?: number;
-  usage: {
-    measured_inference_usd?: number;
-    successful_calls?: number;
-    input_tokens?: number;
-    output_tokens?: number;
-    rate_limited_requests?: number;
-  };
-  cost?: {
-    inference_usd: number | null;
-    cpu_usd: number | null;
-    total_usd: number | null;
-    uncertain_inference_usd: number;
-    running_seconds: number | null;
-    basis: string;
-    billing_url: string;
-  };
-  annotation_url?: string | null;
-  output_mode?: string;
-};
 const EXPORT = "Annotation files only",
   COPY = "Annotated dataset copy";
 const defaults: Options = {
@@ -242,7 +202,6 @@ const money = (n: number) =>
 const num = (n: number) => new Intl.NumberFormat("en-US").format(n);
 const duration = (s: number) =>
   s >= 3600 ? `${(s / 3600).toFixed(1)} hours` : `${(s / 60).toFixed(1)} min`;
-const terminal = new Set(["COMPLETED", "ERROR", "CANCELED", "DELETED"]);
 function initial() {
   try {
     return {
@@ -741,16 +700,6 @@ function App() {
             <BookOpen size={18} /> How it works
           </button>
         </nav>
-        <div className="sidebar-bottom">
-          <a
-            className="source-link"
-            href="https://huggingface.co/spaces/lerobot/annotation-studio/tree/main"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Github size={16} /> Open source <ArrowUpRight size={13} />
-          </a>
-        </div>
       </aside>
       <div className="workspace">
         <header className="topbar">
@@ -762,8 +711,6 @@ function App() {
             >
               <Menu size={20} />
             </button>
-            <span>Workspace</span>
-            <ChevronRight size={14} />
             <strong>
               {page === "new"
                 ? "New annotation"
@@ -826,7 +773,6 @@ function App() {
               <div className="page-heading">
                 <div>
                   <h1>New annotation</h1>
-                  <p>A little more context for your robot data.</p>
                 </div>
               </div>
               <nav className="wizard-steps" aria-label="Annotation setup">
@@ -858,7 +804,6 @@ function App() {
                 ))}
               </nav>
               <div className="step-intro">
-                <span>STEP {step + 1} OF 4</span>
                 <h2 ref={stepHeading} tabIndex={-1}>
                   {
                     [
@@ -869,16 +814,6 @@ function App() {
                     ][step]
                   }
                 </h2>
-                <p>
-                  {
-                    [
-                      "Select a dataset, episode range and camera view.",
-                      "Start with subtasks, or add more context to each episode.",
-                      "Use the default, or choose another vision model.",
-                      "Check the estimate and choose where to save your annotations.",
-                    ][step]
-                  }
-                </p>
               </div>
               {step === 0 && (
                 <section
@@ -886,7 +821,7 @@ function App() {
                   aria-label="Dataset settings"
                 >
                   <label className="field-label" htmlFor="dataset">
-                    Dataset ID <span>Public or private</span>
+                    Dataset ID
                   </label>
                   <div className="dataset-input">
                     <Database size={17} />
@@ -901,8 +836,7 @@ function App() {
                     {metadata && <Check size={18} className="success-text" />}
                   </div>
                   <div className="field-help">
-                    Use <code>owner/dataset</code>. Sign in to access private or
-                    gated datasets.
+                    Sign in to access private datasets.
                   </div>
                   <div className="fields-row">
                     <label>
@@ -1112,9 +1046,6 @@ function App() {
 
                   {selectedModel && (
                     <>
-                      <p className="model-description">
-                        {selectedModel.description}
-                      </p>
                       <div className="model-overview">
                         <span>{selectedModel.provider_name}</span>
                         <span>
@@ -1271,14 +1202,6 @@ function App() {
                         </label>
                       ))}
                     </div>
-                    {options.mode === COPY && (
-                      <p className="field-help">
-                        Only successfully annotated episodes are copied. Videos
-                        from all RGB cameras are trimmed to those episodes;
-                        skipped and failed episodes are excluded. Storage
-                        charges are separate.
-                      </p>
-                    )}
                     <fieldset className="visibility-control">
                       <legend>Repository visibility</legend>
                       <div className="visibility-options">
@@ -1310,15 +1233,6 @@ function App() {
                           </label>
                         ))}
                       </div>
-                      {visibility === "public" && (
-                        <p className="field-help">
-                          {options.mode === COPY
-                            ? "Copied episodes, including their videos and annotations, will be public."
-                            : "Annotations, source references and run details will be public. Source videos are not copied."}
-                          {quote?.private &&
-                            " Your source dataset is private; this publishes content derived from it."}
-                        </p>
-                      )}
                     </fieldset>
                     <button
                       className="disclosure"
@@ -1361,14 +1275,6 @@ function App() {
                             </select>
                           </label>
                         </div>
-                        <p>
-                          The tuned preset is experimental, not finetuned
-                          weights. Its small held-out benchmark did not
-                          establish a quality improvement. Image and JSON
-                          compatibility checks do not establish annotation
-                          quality. Provider limits and smaller budgets can
-                          reduce parallelism.
-                        </p>
                       </div>
                     )}
                   </section>
@@ -1387,9 +1293,6 @@ function App() {
                           <span>–</span>
                           {money(quote.costs.high)}
                         </div>
-                        <p className="price-description">
-                          Based on your selected video and annotations.
-                        </p>
                         <details className="progressive-details cost-breakdown">
                           <summary>
                             Cost breakdown <ChevronDown size={15} />
@@ -1487,8 +1390,7 @@ function App() {
                       />
                     </div>
                     <p className="microcopy">
-                      The worker checks cost before each request. Completed
-                      results are kept if the target or timeout is reached.
+                      Stops near this target; completed results are kept.
                     </p>
                     {quote && budget < quote.costs.high && (
                       <div className="budget-hint">
@@ -1525,27 +1427,11 @@ function App() {
                             <Rocket size={16} /> Review & launch{" "}
                             <ArrowRight size={16} />
                           </button>
-                          <div className="billed-to">
-                            Billed to <strong>{session.user.name}</strong>
-                          </div>
                         </>
                       ) : (
-                        <>
-                          {signIn}
-                          <div className="billed-to">
-                            To launch jobs in your own account.
-                          </div>
-                        </>
+                        <>{signIn}</>
                       )}
                     </div>
-                    <div className="summary-fineprint">
-                      <ShieldCheck size={14} />
-                      <p>
-                        Your dataset is preserved. Run costs are billed to you
-                        through Hugging Face. This spending guard is not a
-                        billing guarantee.
-                      </p>
-                    </div>
                   </section>
                 </div>
               )}
@@ -1559,9 +1445,7 @@ function App() {
                     <ArrowLeft size={15} /> Back
                   </button>
                 ) : (
-                  <span className="quiet-note">
-                    Your source dataset stays unchanged.
-                  </span>
+                  <span />
                 )}
                 {step < 3 && (
                   <button
@@ -1593,271 +1477,17 @@ function App() {
             </div>
           )}
           {page === "jobs" && (
-            <>
-              <div className="page-heading">
-                <div>
-                  <div className="overline">YOUR WORKSPACE</div>
-                  <h1>Annotation jobs</h1>
-                  <p>
-                    Follow runs, inspect outputs, and pick up where your data
-                    left off.
-                  </p>
-                </div>
-                <div className="heading-actions">
-                  <button
-                    className="button secondary"
-                    onClick={loadJobs}
-                    disabled={!session?.user || jobsLoading}
-                  >
-                    <RefreshCw
-                      size={15}
-                      className={jobsLoading ? "spin" : ""}
-                    />{" "}
-                    Refresh
-                  </button>
-                  <button
-                    className="button primary"
-                    onClick={() => navigate("new")}
-                  >
-                    <Plus size={16} /> New job
-                  </button>
-                </div>
-              </div>
-              {!session?.user ? (
-                <div className="empty-state card">
-                  <div className="empty-icon">
-                    <FolderOpen size={30} />
-                  </div>
-                  <h2>Your runs, in one place.</h2>
-                  <p>
-                    Sign in to see the annotation jobs launched from your
-                    account.
-                  </p>
-                  {signIn}
-                </div>
-              ) : jobs.length === 0 ? (
-                <div className="empty-state card">
-                  <div className="empty-icon">
-                    <Rocket size={30} />
-                  </div>
-                  <h2>
-                    {jobsLoading
-                      ? "Loading your jobs…"
-                      : "Your first annotation starts here."}
-                  </h2>
-                  <p>
-                    Configure a dataset, review the estimate, and launch your
-                    first job.
-                  </p>
-                  <button
-                    className="button primary"
-                    onClick={() => navigate("new")}
-                  >
-                    <Plus size={16} /> Create an annotation job
-                  </button>
-                </div>
-              ) : (
-                <div className="jobs-list">
-                  {jobs.map((j) => (
-                    <article className="card job" key={j.id}>
-                      <div className="job-head">
-                        <span className="section-icon">
-                          <Layers3 size={19} />
-                        </span>
-                        <div>
-                          <h2>
-                            {j.output?.split("/")[1] ||
-                              j.name ||
-                              "Annotation job"}
-                          </h2>
-                          <p>
-                            {new Date(j.created_at).toLocaleString()} ·{" "}
-                            <code>{j.id.slice(0, 8)}</code>
-                          </p>
-                          {progress[j.id]?.model && (
-                            <p>
-                              {modelCatalog?.models.find(
-                                (m) => m.route === progress[j.id].model,
-                              )?.name ||
-                                progress[j.id].model
-                                  ?.split(":")[0]
-                                  .split("/")
-                                  .pop()}{" "}
-                              ·{" "}
-                              {modelCatalog?.models.find(
-                                (m) => m.route === progress[j.id].model,
-                              )?.provider_name ||
-                                progress[j.id].model?.split(":")[1]}
-                            </p>
-                          )}
-                        </div>
-                        <span
-                          className={`job-status ${progress[j.id]?.status === "partial" ? "partial" : j.stage.toLowerCase()}`}
-                        >
-                          {!terminal.has(j.stage) && (
-                            <LoaderCircle size={12} className="spin" />
-                          )}
-                          {progress[j.id]?.status === "partial"
-                            ? "Partial"
-                            : j.stage.toLowerCase()}
-                        </span>
-                      </div>
-                      {progress[j.id] && (
-                        <div className="job-progress">
-                          <div>
-                            <span>
-                              {num(progress[j.id].completed)} /{" "}
-                              {num(progress[j.id].expected)} episodes saved
-                            </span>
-                            <strong>{progress[j.id].status}</strong>
-                          </div>
-                          <progress
-                            max={progress[j.id].expected}
-                            value={progress[j.id].completed}
-                          />
-                          <small>
-                            {progress[j.id].failed} failed ·{" "}
-                            {progress[j.id].stopped || 0} stopped ·{" "}
-                            {progress[j.id].pending || 0} not processed ·
-                            measured inference{" "}
-                            {money(
-                              progress[j.id].usage.measured_inference_usd || 0,
-                            )}
-                          </small>
-                        </div>
-                      )}
-                      {progress[j.id]?.cost && (
-                        <div className="job-cost">
-                          <div className="job-cost-total">
-                            <div>
-                              <span>Usage cost</span>
-                              <strong>
-                                {progress[j.id].cost!.total_usd == null
-                                  ? "Pending"
-                                  : new Intl.NumberFormat("en-US", {
-                                      style: "currency",
-                                      currency: "USD",
-                                      minimumFractionDigits: 4,
-                                    }).format(progress[j.id].cost!.total_usd!)}
-                              </strong>
-                            </div>
-                            <span className="quiet-badge">
-                              {terminal.has(j.stage)
-                                ? "Run ended"
-                                : "Updates every 15 s"}
-                            </span>
-                          </div>
-                          <div className="job-cost-breakdown">
-                            <span>
-                              Model inference{" "}
-                              <b>
-                                {progress[j.id].cost!.inference_usd == null
-                                  ? "Pending"
-                                  : "$" +
-                                    progress[j.id].cost!.inference_usd!.toFixed(
-                                      4,
-                                    )}
-                              </b>
-                            </span>
-                            <span>
-                              CPU runtime{" "}
-                              <b>
-                                {progress[j.id].cost!.cpu_usd == null
-                                  ? "Pending"
-                                  : "$" +
-                                    progress[j.id].cost!.cpu_usd!.toFixed(4)}
-                              </b>
-                            </span>
-                            <span>
-                              Model calls{" "}
-                              <b>
-                                {num(
-                                  progress[j.id].usage.successful_calls || 0,
-                                )}
-                              </b>
-                            </span>
-                          </div>
-                          {progress[j.id].cost!.uncertain_inference_usd >
-                            0.000001 && (
-                            <p className="cost-uncertain">
-                              Additional uncertain inference charges: up to $
-                              {progress[
-                                j.id
-                              ].cost!.uncertain_inference_usd.toFixed(4)}
-                              . These are reserved separately.
-                            </p>
-                          )}
-                          <p>
-                            {progress[j.id].cost!.basis}{" "}
-                            <a
-                              href={progress[j.id].cost!.billing_url}
-                              target="_blank"
-                              rel="noreferrer"
-                            >
-                              View HF billing <ArrowUpRight size={10} />
-                            </a>
-                          </p>
-                        </div>
-                      )}
-                      <div className="job-actions">
-                        {terminal.has(j.stage) &&
-                          progress[j.id]?.annotation_url && (
-                            <a
-                              className="button primary"
-                              href={progress[j.id].annotation_url!}
-                              target="_blank"
-                              rel="noreferrer"
-                            >
-                              <Layers3 size={14} /> Show annotations{" "}
-                              <ArrowUpRight size={13} />
-                            </a>
-                          )}
-                        <button
-                          className="button secondary"
-                          onClick={() => getProgress(j)}
-                        >
-                          <Gauge size={14} /> Check progress
-                        </button>
-                        <a
-                          className="button secondary"
-                          href={`https://huggingface.co/jobs/${j.owner}/${j.id}`}
-                          target="_blank"
-                          rel="noreferrer"
-                        >
-                          <Terminal size={14} /> Logs <ArrowUpRight size={13} />
-                        </a>
-                        {j.output && (
-                          <a
-                            className="button secondary"
-                            href={`https://huggingface.co/datasets/${j.output}`}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            <ArrowDownToLine size={14} /> Results{" "}
-                            <ArrowUpRight size={13} />
-                          </a>
-                        )}
-                        {!terminal.has(j.stage) && (
-                          <button
-                            className="text-danger"
-                            onClick={() => setCancelId(j.id)}
-                          >
-                            Cancel job
-                          </button>
-                        )}
-                      </div>
-                    </article>
-                  ))}
-                </div>
-              )}
-              <p className="section-footnote">
-                Show annotations opens the visualizer’s Annotations tab for an
-                annotated dataset copy. Sign in there to access private results.
-                Annotation-file exports can be downloaded from Results. Only
-                jobs launched from Annotation Studio appear here. A completed
-                job can contain partial results; check the saved run report.
-              </p>
-            </>
+            <JobsView
+              jobs={jobs}
+              progress={progress}
+              models={modelCatalog?.models || []}
+              signedIn={!!session?.user}
+              loading={jobsLoading}
+              signIn={signIn}
+              onRefresh={loadJobs}
+              onNew={() => navigate("new")}
+              onCancel={setCancelId}
+            />
           )}
           {page === "guide" && (
             <>
@@ -1939,15 +1569,6 @@ function App() {
               </div>
             </>
           )}
-          <footer>
-            <span>
-              <Bot size={14} /> LeRobot Annotation Studio
-            </span>
-            <span>
-              Built on Hugging Face <span className="footer-dot">·</span> Open
-              source robotics
-            </span>
-          </footer>
         </main>
       </div>
       <dialog
@@ -2072,9 +1693,7 @@ function App() {
           </button>
         </div>
         <div className="modal-body">
-          <div className="overline">READY WHEN YOU ARE</div>
           <h2>Review your annotation job</h2>
-          <p>Confirm the details before starting paid compute.</p>
           {error && (
             <div className="message error" role="alert">
               {error}
@@ -2151,23 +1770,11 @@ function App() {
               onChange={(e) => setConsent(e.target.checked)}
             />
             <span>
-              I authorize job and inference charges to my HF account and sending
-              selected video frames to{" "}
-              {quote?.model_profile.provider_name || "the selected provider"}. I
-              have permission to process this dataset.
-              {visibility === "public" &&
-                (options.mode === COPY
-                  ? " I also authorize publishing the copied episodes, including their videos and annotations, publicly."
-                  : " I also authorize publishing the annotation export, including its source reference and run details, publicly.")}
+              I approve this run and its charges, using{" "}
+              {quote?.model_profile.provider_name || "the selected provider"}.
             </span>
           </label>
-          <p className="microcopy">
-            The spending guard may stop a run early. Storage charges are
-            separate.{" "}
-            {options.mode === COPY
-              ? "Only copied episodes use your dataset storage quota."
-              : ""}
-          </p>
+          <p className="microcopy">Storage is billed separately.</p>
           <button
             className="button primary full"
             disabled={!consent || submitting}