Upload folder using huggingface_hub

AGENTS.md

@@ -253,6 +253,9 @@ for `recommend_ring_size()`; exact midpoint ties prefer the smaller size. Raw
 shot fields remain unchanged. The visible result cards prefer the separate
 `session_recommendation` object. A single footer below the cards reads
 `Based on N measurements. (Please measure at least 3 times for best reliability)`
+The admin Records table preserves its raw-shot columns and adds a separate
+`Session Recommendation` summary column with an on-demand JSON view; legacy
+rows display `—` in that column.
 
 Aggregation is partitioned by `handedness + finger + ring_model`; failed
 fingers are excluded and exact duplicate images are identified by SHA-256.

CLAUDE.md

@@ -253,6 +253,9 @@ for `recommend_ring_size()`; exact midpoint ties prefer the smaller size. Raw
 shot fields remain unchanged. The visible result cards prefer the separate
 `session_recommendation` object. A single footer below the cards reads
 `Based on N measurements. (Please measure at least 3 times for best reliability)`
+The admin Records table preserves its raw-shot columns and adds a separate
+`Session Recommendation` summary column with an on-demand JSON view; legacy
+rows display `—` in that column.
 
 Aggregation is partitioned by `handedness + finger + ring_model`; failed
 fingers are excluded and exact duplicate images are identified by SHA-256.

tests/test_admin_session.js

@@ -0,0 +1,61 @@
+const assert = require("node:assert/strict");
+const fs = require("node:fs");
+const test = require("node:test");
+const vm = require("node:vm");
+
+const source = fs.readFileSync(
+  "web_demo/static/shared/admin-session.js",
+  "utf8",
+);
+
+function loadHelper() {
+  const window = {};
+  vm.runInNewContext(source, { window, Array, Object, String });
+  return window.AdminSession;
+}
+
+test("returns no summary for a legacy record", () => {
+  assert.equal(loadHelper().summary({ session_recommendation: null }), null);
+});
+
+test("summarizes a complete session recommendation", () => {
+  const summary = loadHelper().summary({
+    session_id: "12345678-abcd-ef01-2345-6789abcdef01",
+    session_attempt_index: 4,
+    session_recommendation: {
+      overall_best_size: 7,
+      handedness: "Right",
+      successful_shots: 3,
+      per_finger: {
+        index: { status: "ok", best_match: 7 },
+        middle: { status: "ok", best_match: 8 },
+        ring: { status: "ok", best_match: 6 },
+      },
+    },
+  });
+
+  assert.equal(summary.overallSize, 7);
+  assert.equal(summary.handedness, "Right");
+  assert.equal(summary.successfulShots, 3);
+  assert.equal(summary.attemptIndex, 4);
+  assert.equal(summary.shortSessionId, "12345678");
+  assert.deepEqual({ ...summary.perFinger }, { index: 7, middle: 8, ring: 6 });
+});
+
+test("uses JSON fallbacks and omits unsuccessful fingers", () => {
+  const summary = loadHelper().summary({
+    session_recommendation: {
+      session_id: "fallback-session",
+      attempt_index: 2,
+      overall_best_size: 8,
+      per_finger: {
+        index: { status: "ok", best_match: 8 },
+        middle: { status: "failed", best_match: null },
+      },
+    },
+  });
+
+  assert.equal(summary.attemptIndex, 2);
+  assert.equal(summary.shortSessionId, "fallback");
+  assert.deepEqual({ ...summary.perFinger }, { index: 8 });
+});

web_demo/static/shared/admin-session.js

@@ -0,0 +1,49 @@
+(function (root) {
+  "use strict";
+
+  const FINGERS = ["index", "middle", "ring"];
+
+  function present(value) {
+    return value !== null && value !== undefined && value !== "";
+  }
+
+  function summary(row) {
+    const recommendation = row && row.session_recommendation;
+    if (!recommendation || typeof recommendation !== "object" || Array.isArray(recommendation)) {
+      return null;
+    }
+
+    const perFinger = {};
+    const storedPerFinger = recommendation.per_finger;
+    if (storedPerFinger && typeof storedPerFinger === "object") {
+      FINGERS.forEach((finger) => {
+        const item = storedPerFinger[finger];
+        if (item && item.status === "ok" && present(item.best_match)) {
+          perFinger[finger] = item.best_match;
+        }
+      });
+    }
+
+    const sessionId = present(row.session_id)
+      ? String(row.session_id)
+      : (present(recommendation.session_id) ? String(recommendation.session_id) : "");
+
+    return {
+      overallSize: present(recommendation.overall_best_size)
+        ? recommendation.overall_best_size
+        : null,
+      handedness: present(recommendation.handedness) ? recommendation.handedness : "",
+      successfulShots: present(recommendation.successful_shots)
+        ? recommendation.successful_shots
+        : null,
+      attemptIndex: present(row.session_attempt_index)
+        ? row.session_attempt_index
+        : (present(recommendation.attempt_index) ? recommendation.attempt_index : null),
+      sessionId,
+      shortSessionId: sessionId ? sessionId.slice(0, 8) : "",
+      perFinger,
+    };
+  }
+
+  root.AdminSession = { summary };
+}(window));

web_demo/templates/admin.html

@@ -76,6 +76,19 @@
     .finger-cell { font-size: 12px; }
     .finger-cell .size { font-weight: 600; }
     .finger-cell .detail { color: var(--ink-soft); }
+    .session-cell {
+      min-width: 190px; white-space: normal; font-size: 12px;
+      line-height: 1.35;
+    }
+    .session-overall { font-weight: 600; color: var(--ink); }
+    .session-fingers { margin-top: 2px; color: var(--ink); }
+    .session-meta { margin-top: 2px; color: var(--ink-soft); }
+    .session-json-btn {
+      margin-top: 5px; padding: 2px 7px; font-size: 11px; cursor: pointer;
+      border: 1px solid var(--border); border-radius: 4px;
+      background: #fff; color: var(--ink-soft);
+    }
+    .session-json-btn:hover { background: var(--sand); color: var(--ink); }
     .rating-stars { color: #e3a73b; letter-spacing: 1px; font-size: 13px; }
     .rating-stars .rating-empty { color: rgba(45, 33, 33, 0.18); }
     .comment-cell {
@@ -153,6 +166,26 @@
     .top-kol-list li:last-child { border-bottom: none; }
     .top-kol-list .name { font-weight: 500; }
     .top-kol-list .count { color: var(--ink-soft); }
+    .session-dialog {
+      width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
+      border: 1px solid var(--border); border-radius: 10px; padding: 0;
+      color: var(--ink); background: #fff; box-shadow: 0 12px 40px rgba(34, 26, 26, 0.25);
+    }
+    .session-dialog::backdrop { background: rgba(34, 26, 26, 0.45); }
+    .session-dialog-head {
+      display: flex; align-items: center; justify-content: space-between;
+      gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border);
+    }
+    .session-dialog-head h2 { margin: 0; font-size: 15px; }
+    .session-dialog-head button {
+      padding: 4px 10px; cursor: pointer; border: 1px solid var(--border);
+      border-radius: 5px; background: #fff; color: var(--ink);
+    }
+    .session-dialog pre {
+      margin: 0; padding: 16px; overflow: auto; max-height: calc(100vh - 130px);
+      white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.45;
+      background: #fcfaf6;
+    }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
 </head>
@@ -201,6 +234,7 @@
               <th>Index</th>
               <th>Middle</th>
               <th>Ring</th>
+              <th>Session Recommendation</th>
               <th>Conf</th>
               <th>Fail</th>
               <th>Rating</th>
@@ -209,7 +243,7 @@
             </tr>
           </thead>
           <tbody id="tableBody">
-            <tr><td colspan="13" class="empty">Loading...</td></tr>
+            <tr><td colspan="14" class="empty">Loading...</td></tr>
           </tbody>
         </table>
       </div>
@@ -306,6 +340,15 @@
     </div>
   </div>
 
+  <dialog class="session-dialog" id="sessionJsonDialog">
+    <div class="session-dialog-head">
+      <h2 id="sessionJsonTitle">Session Recommendation JSON</h2>
+      <button type="button" onclick="closeSessionJson()">Close</button>
+    </div>
+    <pre id="sessionJsonOutput"></pre>
+  </dialog>
+
+  <script src="/static/shared/admin-session.js"></script>
   <script>
     const loginGate = document.getElementById("loginGate");
     const adminContent = document.getElementById("adminContent");
@@ -396,6 +439,32 @@
       return `<span class="comment-cell" title="${esc(msg)}">${esc(trimmed)}${more}</span>`;
     };
 
+    const fmtSessionRecommendation = (row) => {
+      const session = window.AdminSession.summary(row);
+      if (!session) return '<span class="detail">—</span>';
+
+      const fingerLabels = { index: "I", middle: "M", ring: "R" };
+      const fingers = Object.entries(session.perFinger)
+        .map(([finger, size]) => `${fingerLabels[finger]} ${esc(size)}`)
+        .join(" · ");
+      const evidence = [];
+      if (session.handedness) evidence.push(esc(session.handedness));
+      if (session.successfulShots != null) {
+        const noun = Number(session.successfulShots) === 1 ? "shot" : "shots";
+        evidence.push(`${esc(session.successfulShots)} successful ${noun}`);
+      }
+      const audit = [];
+      if (session.attemptIndex != null) audit.push(`Attempt ${esc(session.attemptIndex)}`);
+      if (session.shortSessionId) audit.push(esc(session.shortSessionId));
+
+      return `
+        <div class="session-overall">Overall ${session.overallSize != null ? esc(session.overallSize) : "—"}</div>
+        ${fingers ? `<div class="session-fingers">${fingers}</div>` : ""}
+        ${evidence.length ? `<div class="session-meta">${evidence.join(" · ")}</div>` : ""}
+        ${audit.length ? `<div class="session-meta">${audit.join(" · ")}</div>` : ""}
+        <button class="session-json-btn" type="button" onclick="viewSessionJson(this)">View JSON</button>`;
+    };
+
     const rowHtml = (r) => {
       const pf = r.per_finger || {};
       const photoThumb = r.photo_url
@@ -413,6 +482,7 @@
         <td class="finger-cell">${fmtFinger(pf, "index")}</td>
         <td class="finger-cell">${fmtFinger(pf, "middle")}</td>
         <td class="finger-cell">${fmtFinger(pf, "ring")}</td>
+        <td class="session-cell">${fmtSessionRecommendation(r)}</td>
         <td>${r.confidence != null ? (r.confidence * 100).toFixed(0) + "%" : "-"}</td>
         <td>${r.fail_reason ? '<span class="fail">' + r.fail_reason + "</span>" : ""}</td>
         <td>${fmtRating(r.feedback_rating)}</td>
@@ -428,7 +498,7 @@
       if (currentPage < 1) currentPage = 1;
       if (total === 0) {
         countLabel.textContent = "0 records";
-        tbody.innerHTML = '<tr><td colspan="13" class="empty">No measurements yet</td></tr>';
+        tbody.innerHTML = '<tr><td colspan="14" class="empty">No measurements yet</td></tr>';
       } else {
         const start = (currentPage - 1) * PAGE_SIZE;
         const slice = allRows.slice(start, start + PAGE_SIZE);
@@ -455,10 +525,33 @@
         currentPage = 1;
         renderPage();
       } catch (e) {
-        tbody.innerHTML = `<tr><td colspan="13" class="empty">Error loading data: ${e.message}</td></tr>`;
+        tbody.innerHTML = `<tr><td colspan="14" class="empty">Error loading data: ${e.message}</td></tr>`;
       }
     };
 
+    window.viewSessionJson = (btn) => {
+      const rowId = btn.closest("tr").dataset.id;
+      const row = allRows.find((item) => String(item.id) === String(rowId));
+      if (!row || !row.session_recommendation) return;
+
+      const dialog = document.getElementById("sessionJsonDialog");
+      const shortId = row.session_id ? ` · ${String(row.session_id).slice(0, 8)}` : "";
+      document.getElementById("sessionJsonTitle").textContent = `Session Recommendation${shortId}`;
+      document.getElementById("sessionJsonOutput").textContent = JSON.stringify(
+        row.session_recommendation,
+        null,
+        2,
+      );
+      if (typeof dialog.showModal === "function") dialog.showModal();
+      else dialog.setAttribute("open", "");
+    };
+
+    window.closeSessionJson = () => {
+      const dialog = document.getElementById("sessionJsonDialog");
+      if (typeof dialog.close === "function") dialog.close();
+      else dialog.removeAttribute("open");
+    };
+
     window.deleteRow = async (btn) => {
       if (!confirm("Delete this measurement record?")) return;
       const tr = btn.closest("tr");