UI: upload panel — POST /jobs with live status polling

Adds a "+ wgraj" control to the sidebar that uploads an ISO/ZIP/DLL to the
acquisition endpoint and tracks the job to completion, then refreshes the
version list so the new snapshot appears without a reload.

- index.html: upload form + #jobs panel in the sidebar
- app.js: submitUpload() (FormData → POST /jobs), pollJobs() (2.5s while any
  job is queued/started; finished → load(); failed → inline error)
- style.css: mini-btn / upload form / job rows + queued/started badges

Verified: node --check clean; uvicorn serves /ui assets 200 and GET /jobs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

README.md

@@ -125,6 +125,8 @@ Endpointy: `POST/GET /games`, `POST/GET /snapshots` (import deduplikowany po sha
 Po starcie serwera otwórz **http://127.0.0.1:8000/** (`/` → `/ui/`). Statyczny UI bez build-stepu
 (czysty HTML/CSS/JS w `ams/api/static/`, serwowany przez FastAPI): lista gier/wersji, wybór dwóch
 wersji (A/B), wizualny diff po 4 osiach z filtrem klasy i przeglądarka pojedynczej powierzchni.
+Przycisk **+ wgraj** w panelu gier otwiera upload ISO/ZIP/DLL → `POST /jobs`; status zadania
+(queued→started→finished/failed) jest odpytywany na żywo, a po zakończeniu lista wersji odświeża się sama.
 
 ## Format snapshotu
 

ams/api/static/app.js

@@ -1,6 +1,6 @@
 "use strict";
 
-const state = { games: [], snaps: [], byId: {}, a: null, b: null, axes: { types: true, methods: true, events: true, fields: true, layout: false } };
+const state = { games: [], snaps: [], byId: {}, a: null, b: null, jobStatus: {}, axes: { types: true, methods: true, events: true, fields: true, layout: false } };
 
 // tiny DOM helper
 function el(tag, props, ...kids) {
@@ -103,6 +103,92 @@ function renderAxesControl() {
   }
 }
 
+// --- upload + jobs ----------------------------------------------------------------------------
+const ACTIVE = new Set(["queued", "started"]);
+
+function setupUpload() {
+  const form = $("upload-form");
+  $("upload-toggle").addEventListener("click", () => {
+    form.hidden = !form.hidden;
+    if (!form.hidden) $("upload-file").focus();
+  });
+  form.addEventListener("submit", submitUpload);
+}
+
+async function submitUpload(e) {
+  e.preventDefault();
+  const file = $("upload-file").files[0];
+  if (!file) return;
+  const msg = $("upload-msg");
+  const fd = new FormData();
+  fd.append("file", file);
+  const game = $("upload-game").value.trim();
+  if (game) fd.append("game", game);
+
+  $("upload-submit").disabled = true;
+  msg.className = "upload-msg";
+  msg.textContent = "wysyłanie…";
+  try {
+    const r = await fetch("/jobs", { method: "POST", body: fd });
+    if (!r.ok) {
+      const detail = await r.json().catch(() => ({}));
+      throw new Error(detail.detail || ("HTTP " + r.status));
+    }
+    const job = await r.json();
+    msg.textContent = "zlecono #" + job.id + " — analiza w toku…";
+    $("upload-form").reset();
+    pollJobs();  // kick the poller so the new job shows up + tracks to completion
+  } catch (err) {
+    msg.className = "upload-msg err";
+    msg.textContent = "błąd: " + err.message;
+  } finally {
+    $("upload-submit").disabled = false;
+  }
+}
+
+let _jobTimer = null;
+async function pollJobs() {
+  let jobs;
+  try { jobs = await jget("/jobs"); }
+  catch { return; }  // endpoint may be absent in a stripped deploy — fail quiet
+
+  // when a tracked job flips to finished, a new snapshot is in the catalog → refresh the list
+  let finished = false;
+  for (const j of jobs) {
+    if (state.jobStatus[j.id] && state.jobStatus[j.id] !== j.status && j.status === "finished")
+      finished = true;
+    state.jobStatus[j.id] = j.status;
+  }
+  renderJobs(jobs);
+  if (finished) load();
+
+  clearTimeout(_jobTimer);
+  if (jobs.some((j) => ACTIVE.has(j.status)))
+    _jobTimer = setTimeout(pollJobs, 2500);
+}
+
+function jobBadge(status) {
+  const cls = { queued: "b-q", started: "b-s", finished: "b-add", failed: "b-del" }[status] || "b-q";
+  return el("span", { class: "badge " + cls }, status);
+}
+
+function renderJobs(jobs) {
+  const root = $("jobs"); root.innerHTML = "";
+  if (!jobs.length) return;
+  root.append(el("div", { class: "jobs-title" }, "Zadania"));
+  for (const j of jobs.slice(0, 8)) {
+    const row = el("div", { class: "job", title: j.error || "" },
+      el("span", { class: "jname" }, j.source_name),
+      jobBadge(j.status));
+    if (j.status === "finished" && j.snapshot_id != null)
+      row.append(el("span", { class: "jlink", onclick: () => browse(j.snapshot_id) },
+        j.dll_name || "snapshot"));
+    if (j.status === "failed" && j.error)
+      row.append(el("span", { class: "jerr" }, j.error));
+    root.append(row);
+  }
+}
+
 // --- diff -------------------------------------------------------------------------------------
 async function compare() {
   if (!state.a || !state.b) return;
@@ -209,4 +295,6 @@ async function browse(id) {
 // --- boot -------------------------------------------------------------------------------------
 $("compare").addEventListener("click", compare);
 $("owner").addEventListener("keydown", (e) => { if (e.key === "Enter") compare(); });
+setupUpload();
+pollJobs();
 load().catch((e) => { $("results").innerHTML = ""; $("results").append(el("div", { class: "err" }, "Nie udało się załadować: " + e.message)); });

ams/api/static/index.html

@@ -14,7 +14,19 @@
 
   <div class="layout">
     <aside id="sidebar" class="sidebar">
-      <div class="panel-title">Gry / wersje</div>
+      <div class="panel-title">
+        Gry / wersje
+        <button id="upload-toggle" class="mini-btn" title="Wgraj grę (ISO / ZIP / DLL)">+ wgraj</button>
+      </div>
+
+      <form id="upload-form" class="upload" hidden>
+        <input type="file" id="upload-file" required>
+        <input type="text" id="upload-game" class="owner" placeholder="nazwa gry (opcjonalnie)" autocomplete="off">
+        <button type="submit" id="upload-submit" class="compare">Wyślij do analizy</button>
+        <div id="upload-msg" class="upload-msg"></div>
+      </form>
+
+      <div id="jobs" class="jobs"></div>
       <div id="games" class="games"></div>
     </aside>
 

ams/api/static/style.css

@@ -18,6 +18,35 @@ body { background: var(--bg); color: var(--fg); font: 13px/1.45 var(--mono); }
 .panel-title { padding: 10px 14px; color: var(--dim); text-transform: uppercase; font-size: 11px;
   letter-spacing: 1px; position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--border); }
 
+.panel-title { display: flex; align-items: center; justify-content: space-between; }
+.mini-btn { background: #16202c; border: 1px solid var(--border); color: var(--accent);
+  border-radius: 5px; padding: 2px 8px; cursor: pointer; font-family: var(--mono); font-size: 11px;
+  letter-spacing: 0; text-transform: none; }
+.mini-btn:hover { border-color: var(--accent); }
+
+.upload { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px;
+  border-bottom: 1px solid var(--border); background: var(--panel2); }
+.upload input[type=file] { color: var(--dim); font-family: var(--mono); font-size: 11px; }
+.upload input[type=file]::file-selector-button { background: #16202c; color: var(--fg);
+  border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; cursor: pointer;
+  font-family: var(--mono); margin-right: 8px; }
+.upload .owner { width: auto; }
+.upload .compare { margin-left: 0; }
+.upload-msg { color: var(--dim); font-size: 11px; min-height: 14px; }
+.upload-msg.err { color: var(--del); }
+
+.jobs { padding: 6px 10px; }
+.jobs:empty { padding: 0; }
+.jobs-title { color: var(--dim); text-transform: uppercase; font-size: 11px; letter-spacing: 1px; padding: 2px 2px 4px; }
+.job { display: flex; align-items: center; gap: 6px; padding: 4px 6px; margin: 2px 0;
+  border: 1px solid var(--border); border-radius: 6px; background: var(--panel2); font-size: 11px; }
+.job .jname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.job .jlink { color: var(--accent); cursor: pointer; }
+.job .jlink:hover { text-decoration: underline; }
+.job .jerr { color: var(--del); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
+.b-q { background: rgba(107,124,143,.18); color: var(--dim); }
+.b-s { background: rgba(78,163,255,.16); color: var(--accent); }
+
 .game { padding: 8px 10px 4px; }
 .game-name { color: #eaf2fb; font-weight: 600; padding: 4px 4px; }
 .snap { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: 3px 0;