Upgrade OFF lookup UX and stock detail identifier editing

Reviewed-on: #4

README.md

@@ -93,6 +93,7 @@ For installability and service worker support:
 
 - serve `manifest.webmanifest` with an appropriate web manifest content type
 - make sure `service-worker.js` is reachable from the deployed site root
+- make sure `version.json` is reachable from the deployed site root for app update checks
 - avoid aggressive caching on `index.html` during upgrades so new builds are picked up reliably
 
 ### Smoke test after deployment
@@ -113,6 +114,7 @@ public/
   manifest.webmanifest
   offline.html
   service-worker.js
+  version.json
 src/
   api/
   app/
@@ -169,6 +171,10 @@ Expected shapes today:
   Returns `{ since, next_cursor, changes }` feed payload for item/stock updates.
 - `POST /{database}/kitchen/items/upsert?mode=preview|apply`
   Used by label submit flow for create-or-update behavior and conflict-safe matching.
+- `POST /{database}/kitchen/items/lookup`
+  Identifier lookup response includes source/freshness metadata (`source`, `cache_hit`, `stale_cache`, `payload_fetched_at`, `retry_after_seconds`) used for richer user feedback.
+- `POST /{database}/kitchen/items/{uuid_b64}/lookup?update=0|1`
+  Item-scoped OpenFoodFacts lookup used by stock detail to preview (`update=0`) or apply missing fields (`update=1`).
 - `POST /{database}/kitchen/items?label=1`
   Used for label image preview rendering.
 - `POST /{database}/kitchen/items?label=1&preview=1`
@@ -181,6 +187,8 @@ Expected shapes today:
   Prints label for an existing item; called from the save flow when `Print` is enabled.
 - `DELETE /{database}/kitchen/items/{uuid_b64}`
   Compatibility fallback when `/use` is not available on the backend.
+- `PATCH /{database}/kitchen/items/{uuid_b64}`
+  Used for item-level edits from stock detail (for example identifier code updates).
 - `GET /{database}/kitchen/locations`
   Returns a nested location tree.
 
@@ -191,3 +199,4 @@ Expected shapes today:
 - Kitchen context now lives in the URL path instead of a custom header.
 - The API client now builds database-scoped kitchen routes by default; it always keeps bearer authentication handling separate from URL shaping.
 - Label submit uses upsert-first apply semantics and an optional `Print` checkbox (default on for the current page session).
+- Stock detail supports inline identifier editing and OpenFoodFacts refresh/apply actions with rate-limit and cache-freshness hints.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "lonc-web",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lonc-web",
-      "version": "0.1.3",
+      "version": "0.2.0",
       "dependencies": {
         "@zxing/browser": "^0.1.5",
         "alpinejs": "^3.14.9",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lonc-web",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "private": true,
   "type": "module",
   "scripts": {

public/service-worker.js

@@ -3,7 +3,6 @@ const APP_SHELL = ['/', '/index.html', '/manifest.webmanifest', '/offline.html',
 
 self.addEventListener('install', (event) => {
   event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_SHELL)));
-  self.skipWaiting();
 });
 
 self.addEventListener('activate', (event) => {
@@ -19,6 +18,12 @@ self.addEventListener('activate', (event) => {
   self.clients.claim();
 });
 
+self.addEventListener('message', (event) => {
+  if (event?.data?.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
 self.addEventListener('fetch', (event) => {
   if (event.request.method !== 'GET') {
     return;
@@ -40,6 +45,11 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
+  if (requestUrl.pathname === '/version.json') {
+    event.respondWith(fetch(event.request, { cache: 'no-store' }));
+    return;
+  }
+
   const destination = event.request.destination;
   if (
     destination === 'script' ||

src/api/stock.js

@@ -77,6 +77,26 @@ function normalizeIdentifierLookupResponse(payload) {
     identifierType: payload?.identifier_type || null,
     item: payload?.item || null,
     payloadFetchedAt: payload?.payload_fetched_at || null,
+    retryAfterSeconds:
+      Number.isInteger(payload?.retry_after_seconds) ? payload.retry_after_seconds : null,
+    staleCache: Boolean(payload?.stale_cache),
+  };
+}
+
+function normalizeItemLookupResponse(payload) {
+  return {
+    status: payload?.status || null,
+    found: Boolean(payload?.found),
+    update: Boolean(payload?.update),
+    identifierCode: payload?.identifier_code || null,
+    identifierType: payload?.identifier_type || null,
+    preview: payload?.preview || null,
+    updatedFields: Array.isArray(payload?.updated_fields) ? payload.updated_fields : [],
+    offPayloadFetchedAt: payload?.off_payload_fetched_at || null,
+    retryAfterSeconds:
+      Number.isInteger(payload?.retry_after_seconds) ? payload.retry_after_seconds : null,
+    staleCache: Boolean(payload?.stale_cache),
+    item: payload?.item || null,
   };
 }
 
@@ -111,6 +131,23 @@ export async function lookupItemByIdentifier(store, identifierCode) {
   return normalizeIdentifierLookupResponse(payload);
 }
 
+export async function lookupItemDetails(store, uuidB64, { update = false } = {}) {
+  const payload = await apiRequest(store, `${getPath('items')}/${uuidB64}/lookup`, {
+    method: 'POST',
+    query: { update: update ? 1 : 0 },
+  });
+
+  return normalizeItemLookupResponse(payload);
+}
+
+export async function patchStockItem(store, uuidB64, body) {
+  const payload = await apiRequest(store, `${getPath('items')}/${uuidB64}`, {
+    method: 'PATCH',
+    body,
+  });
+  return unwrapEntryPayload(payload);
+}
+
 export async function updateStockItem(store, uuidB64, body) {
   const payload = await apiRequest(store, `${getPath('items')}/${uuidB64}/stock`, {
     method: 'POST',

src/app/bootstrap.js

@@ -9,24 +9,201 @@ import { appShell } from '../components/app-shell.js';
 import { navBar } from '../components/nav-bar.js';
 import { registerFeatureData } from '../features/register.js';
 
-async function installServiceWorker() {
-  if (!('serviceWorker' in navigator)) {
-    return;
+const APP_UPDATE_CHECK_INTERVAL_MS = 5 * 60 * 1000;
+
+function createAppUpdateManager() {
+  let registration = null;
+  let waitingWorker = null;
+
+  async function fetchServerVersion() {
+    try {
+      const response = await fetch(`/version.json?ts=${Date.now()}`, {
+        cache: 'no-store',
+        headers: {
+          'cache-control': 'no-cache',
+          pragma: 'no-cache',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Version endpoint failed with HTTP ${response.status}`);
+      }
+
+      const payload = await response.json();
+      const serverVersion = String(payload?.version || '').trim();
+      const serverBuildTime = String(payload?.buildTime || '').trim();
+
+      return {
+        serverVersion: serverVersion || null,
+        serverBuildTime: serverBuildTime || null,
+      };
+    } catch (error) {
+      return {
+        serverVersion: null,
+        serverBuildTime: null,
+        error: error instanceof Error ? error.message : 'Unable to reach version endpoint.',
+      };
+    }
   }
 
-  if (import.meta.env.DEV) {
-    const registrations = await navigator.serviceWorker.getRegistrations();
-    await Promise.all(registrations.map((registration) => registration.unregister()));
-    return;
+  function syncWaitingWorker() {
+    waitingWorker = registration?.waiting || null;
   }
 
-  await navigator.serviceWorker.register('/service-worker.js');
+  function setupRegistrationHooks() {
+    if (!registration) {
+      return;
+    }
+
+    syncWaitingWorker();
+
+    registration.addEventListener('updatefound', () => {
+      const installing = registration.installing;
+      if (!installing) {
+        return;
+      }
+
+      installing.addEventListener('statechange', () => {
+        if (installing.state === 'installed' && navigator.serviceWorker.controller) {
+          waitingWorker = registration.waiting || installing;
+        }
+      });
+    });
+  }
+
+  async function installServiceWorker() {
+    if (!('serviceWorker' in navigator)) {
+      return { supported: false };
+    }
+
+    if (import.meta.env.DEV) {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      await Promise.all(registrations.map((existingRegistration) => existingRegistration.unregister()));
+      return { supported: false, development: true };
+    }
+
+    registration = await navigator.serviceWorker.register('/service-worker.js');
+    setupRegistrationHooks();
+
+    return {
+      supported: true,
+      registered: true,
+    };
+  }
+
+  async function checkForAppUpdate() {
+    if (registration) {
+      await registration.update().catch(() => {});
+      syncWaitingWorker();
+    }
+
+    const server = await fetchServerVersion();
+    const hasVersionMismatch = Boolean(server.serverVersion && server.serverVersion !== APP_VERSION);
+
+    return {
+      supported: 'serviceWorker' in navigator,
+      currentVersion: APP_VERSION,
+      serverVersion: server.serverVersion,
+      serverBuildTime: server.serverBuildTime,
+      waitingWorker: Boolean(waitingWorker),
+      updateAvailable: Boolean(waitingWorker) || hasVersionMismatch,
+      hasVersionMismatch,
+      serverError: server.error || null,
+    };
+  }
+
+  async function waitForControllerChange(previousController, timeoutMs = 4000) {
+    if (!('serviceWorker' in navigator)) {
+      return;
+    }
+
+    if (navigator.serviceWorker.controller && navigator.serviceWorker.controller !== previousController) {
+      return;
+    }
+
+    await new Promise((resolve) => {
+      let isDone = false;
+
+      const finish = () => {
+        if (isDone) {
+          return;
+        }
+
+        isDone = true;
+        navigator.serviceWorker.removeEventListener('controllerchange', onControllerChange);
+        clearTimeout(timeout);
+        resolve();
+      };
+
+      const onControllerChange = () => {
+        finish();
+      };
+
+      const timeout = setTimeout(finish, timeoutMs);
+
+      navigator.serviceWorker.addEventListener('controllerchange', onControllerChange);
+    });
+  }
+
+  async function clearAllServiceWorkerCaches() {
+    if (!('caches' in window)) {
+      return;
+    }
+
+    const keys = await caches.keys();
+    await Promise.all(keys.map((key) => caches.delete(key)));
+  }
+
+  async function applyAppUpdate() {
+    const previousController = navigator.serviceWorker?.controller || null;
+
+    if (registration) {
+      await registration.update().catch(() => {});
+      syncWaitingWorker();
+    }
+
+    if (waitingWorker) {
+      waitingWorker.postMessage({ type: 'SKIP_WAITING' });
+      await waitForControllerChange(previousController);
+    }
+
+    await clearAllServiceWorkerCaches().catch(() => {});
+
+    const nextUrl = new URL(window.location.href);
+    nextUrl.searchParams.set('app_update', String(Date.now()));
+    window.location.replace(nextUrl.toString());
+  }
+
+  function startPeriodicChecks() {
+    if (!registration) {
+      return;
+    }
+
+    window.setInterval(() => {
+      checkForAppUpdate().catch(() => {});
+    }, APP_UPDATE_CHECK_INTERVAL_MS);
+
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        checkForAppUpdate().catch(() => {});
+      }
+    });
+  }
+
+  return {
+    installServiceWorker,
+    checkForAppUpdate,
+    applyAppUpdate,
+    startPeriodicChecks,
+  };
 }
 
 export function bootstrapApp() {
   const store = createAppStore();
   Alpine.store('app', store);
 
+  const appUpdateManager = createAppUpdateManager();
+
   registerFeatureData(Alpine, store);
 
   const appRoot = document.querySelector('#app');
@@ -104,6 +281,12 @@ export function bootstrapApp() {
       renderNav();
       return result;
     },
+    async checkForAppUpdate() {
+      return appUpdateManager.checkForAppUpdate();
+    },
+    async applyAppUpdate() {
+      return appUpdateManager.applyAppUpdate();
+    },
     handleAuthFailure(error) {
       if (!store.session?.applicationKey || !store.session?.hasValidated || authFailureHandled) {
         return;
@@ -152,10 +335,13 @@ export function bootstrapApp() {
 
   renderNav();
 
-  installServiceWorker().catch(() => {
-    store.addAlert({
-      type: 'warning',
-      message: 'PWA installation support could not be initialized.',
+  appUpdateManager
+    .installServiceWorker()
+    .then(() => appUpdateManager.startPeriodicChecks())
+    .catch(() => {
+      store.addAlert({
+        type: 'warning',
+        message: 'PWA installation support could not be initialized.',
+      });
     });
-  });
 }

src/app/config.js

@@ -1,5 +1,5 @@
 export const APP_NAME = 'Lonc';
-export const APP_VERSION = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.1.2';
+export const APP_VERSION = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.2.0';
 export const TRYTON_APPLICATION = 'kitchen';
 
 export const CONNECTION_STATES = {

src/features/auth/settings-page.js

@@ -1,10 +1,12 @@
+import { APP_VERSION } from '../../app/config.js';
+
 export function renderSettingsPage() {
   return `
     <section class="container-xxl py-4 py-lg-5">
       <div class="row g-4">
         <div class="col-12 col-lg-7">
           <div class="card border-0 shadow-sm">
-            <div class="card-body p-4" x-data="settingsPage()">
+            <div class="card-body p-4" x-data="settingsPage()" x-init="initUpdatePanel()">
               <div class="d-flex justify-content-between align-items-start mb-4">
                 <div>
                   <p class="eyebrow mb-2">Client Settings</p>
@@ -40,6 +42,45 @@ export function renderSettingsPage() {
                 </div>
                 <button class="btn btn-primary align-self-start" type="submit">Save settings</button>
               </form>
+
+              <hr class="my-4" />
+
+              <div class="vstack gap-3">
+                <div>
+                  <h2 class="h5 mb-1">App update</h2>
+                  <p class="text-body-secondary mb-0">
+                    Check for the latest deployed build and force-refresh this installed app when needed.
+                  </p>
+                </div>
+                <div class="row g-3 small">
+                  <div class="col-12 col-md-6">
+                    <div class="border rounded-3 p-3 h-100 bg-body-tertiary">
+                      <div class="text-uppercase text-body-secondary fw-semibold mb-1">Current version</div>
+                      <div class="fw-semibold" x-text="update.currentVersion"></div>
+                    </div>
+                  </div>
+                  <div class="col-12 col-md-6">
+                    <div class="border rounded-3 p-3 h-100 bg-body-tertiary">
+                      <div class="text-uppercase text-body-secondary fw-semibold mb-1">Server version</div>
+                      <div class="fw-semibold" x-text="update.serverVersion || 'Unavailable'"></div>
+                      <template x-if="update.serverBuildTime">
+                        <div class="text-body-secondary mt-1" x-text="'Built: ' + formatBuildTime(update.serverBuildTime)"></div>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+                <div class="d-flex flex-wrap align-items-center gap-2">
+                  <button class="btn btn-outline-secondary" type="button" @click="checkForUpdates()" :disabled="update.isChecking || update.isApplying">
+                    <span x-show="!update.isChecking">Check for updates</span>
+                    <span x-show="update.isChecking">Checking...</span>
+                  </button>
+                  <button class="btn btn-primary" type="button" @click="applyUpdate()" :disabled="update.isApplying">
+                    <span x-show="!update.isApplying">Update app</span>
+                    <span x-show="update.isApplying">Updating...</span>
+                  </button>
+                </div>
+                <div class="small" :class="updateStatusClass()" x-text="update.statusText"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -68,6 +109,15 @@ export function settingsPageData(store) {
       baseUrl: store.config.baseUrl || '',
       database: store.config.database || '',
     },
+    update: {
+      currentVersion: APP_VERSION,
+      serverVersion: null,
+      serverBuildTime: null,
+      statusText: 'Ready to check for updates.',
+      statusType: 'secondary',
+      isChecking: false,
+      isApplying: false,
+    },
     get userLogin() {
       return store.session?.userLogin || '';
     },
@@ -83,5 +133,83 @@ export function settingsPageData(store) {
 
       store.addAlert({ type: 'success', message: 'Settings saved locally.' });
     },
+    formatBuildTime(value) {
+      const date = new Date(value);
+      if (Number.isNaN(date.getTime())) {
+        return value;
+      }
+
+      return date.toLocaleString();
+    },
+    updateStatusClass() {
+      switch (this.update.statusType) {
+        case 'success':
+          return 'text-success';
+        case 'warning':
+          return 'text-warning';
+        case 'danger':
+          return 'text-danger';
+        default:
+          return 'text-body-secondary';
+      }
+    },
+    async initUpdatePanel() {
+      await this.checkForUpdates();
+    },
+    async checkForUpdates() {
+      if (!window.__loncApp?.checkForAppUpdate) {
+        this.update.statusText = 'Service worker updates are not available in this browser.';
+        this.update.statusType = 'warning';
+        return;
+      }
+
+      this.update.isChecking = true;
+      this.update.statusText = 'Checking for updates...';
+      this.update.statusType = 'secondary';
+
+      try {
+        const result = await window.__loncApp.checkForAppUpdate();
+        this.update.currentVersion = result.currentVersion || APP_VERSION;
+        this.update.serverVersion = result.serverVersion || null;
+        this.update.serverBuildTime = result.serverBuildTime || null;
+
+        if (result.updateAvailable) {
+          this.update.statusText = 'Update available. Use "Update app" to refresh this installed build.';
+          this.update.statusType = 'warning';
+        } else if (result.serverError) {
+          this.update.statusText = `No update signal from server (${result.serverError}).`;
+          this.update.statusType = 'secondary';
+        } else {
+          this.update.statusText = 'This app is up to date.';
+          this.update.statusType = 'success';
+        }
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown update check error.';
+        this.update.statusText = `Update check failed: ${message}`;
+        this.update.statusType = 'danger';
+      } finally {
+        this.update.isChecking = false;
+      }
+    },
+    async applyUpdate() {
+      if (!window.__loncApp?.applyAppUpdate) {
+        this.update.statusText = 'Update action is not available in this browser.';
+        this.update.statusType = 'warning';
+        return;
+      }
+
+      this.update.isApplying = true;
+      this.update.statusText = 'Applying update and refreshing app...';
+      this.update.statusType = 'warning';
+
+      try {
+        await window.__loncApp.applyAppUpdate();
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown update error.';
+        this.update.statusText = `Update failed: ${message}`;
+        this.update.statusType = 'danger';
+        this.update.isApplying = false;
+      }
+    },
   };
 }

src/features/labels/label-create-page.js

@@ -739,8 +739,67 @@ export function labelCreatePageData(store) {
         return 'Lookup failed on the server. You can still fill the form manually.';
       }
 
+      if (status === 'rate_limited') {
+        return 'Lookup is temporarily rate-limited. Try again shortly.';
+      }
+
       return 'Lookup response could not be applied to this form.';
     },
+    lookupStatusMessageWithDetails(response, identifierCode) {
+      const base = this.lookupStatusMessage(response?.status, identifierCode);
+      if (response?.status !== 'rate_limited') {
+        return base;
+      }
+
+      if (!Number.isInteger(response?.retryAfterSeconds) || response.retryAfterSeconds <= 0) {
+        return base;
+      }
+
+      return `${base} Retry in ${response.retryAfterSeconds}s.`;
+    },
+    lookupSourceLabel(source) {
+      if (!source) {
+        return '';
+      }
+
+      const labels = {
+        item: 'existing item',
+        cache: 'cache',
+        openfoodfacts: 'OpenFoodFacts',
+      };
+
+      return labels[source] || source;
+    },
+    lookupSuccessMessage(response) {
+      const parts = ['Lookup applied product details'];
+      const metadata = [];
+
+      if (response?.source) {
+        metadata.push(`source: ${this.lookupSourceLabel(response.source)}`);
+      }
+      if (response?.cacheHit) {
+        metadata.push('cache hit');
+      }
+      if (response?.staleCache) {
+        metadata.push('stale cache');
+      }
+      if (response?.payloadFetchedAt) {
+        const fetchedAt = new Date(response.payloadFetchedAt);
+        metadata.push(
+          `fetched: ${
+            Number.isNaN(fetchedAt.getTime())
+              ? response.payloadFetchedAt
+              : fetchedAt.toLocaleString()
+          }`,
+        );
+      }
+
+      if (metadata.length) {
+        parts.push(`(${metadata.join(', ')})`);
+      }
+
+      return `${parts.join(' ')}.`;
+    },
     normalizeScannerError(error) {
       const message = String(error?.message || '');
       const normalized = message.toLowerCase();
@@ -875,7 +934,7 @@ export function labelCreatePageData(store) {
       await runAsyncState(this.lookupState, async () => {
         const response = await lookupItemByIdentifier(store, identifierCode);
         if (response.status !== 'ok') {
-          const message = this.lookupStatusMessage(response.status, identifierCode);
+          const message = this.lookupStatusMessageWithDetails(response, identifierCode);
           this.lookupState.error = message;
           store.addAlert({
             type: response.status === 'not_found' ? 'info' : 'warning',
@@ -932,11 +991,9 @@ export function labelCreatePageData(store) {
         this.suggestions = [];
         this.persistDraft();
 
-        const sourceSuffix = response.source ? ` (${response.source})` : '';
-        const cacheSuffix = response.cacheHit ? ', cache hit' : '';
         store.addAlert({
           type: 'success',
-          message: `Lookup applied product details${sourceSuffix}${cacheSuffix}.`,
+          message: this.lookupSuccessMessage(response),
         });
       }).catch((error) => {
         store.addAlert({

src/features/stock/stock-detail-page.js

@@ -1,6 +1,8 @@
 import {
   adjustStockEntry,
   getStockEntry,
+  lookupItemDetails,
+  patchStockItem,
   useStockItem,
 } from '../../api/stock.js';
 import { formatPrintErrorMessage, printItemLabel } from '../../api/labels.js';
@@ -27,6 +29,10 @@ function parseDateValue(value) {
   return new Date(year, month - 1, day);
 }
 
+function normalizeIdentifierCode(value) {
+  return String(value || '').replace(/\s+/g, '').trim();
+}
+
 function expirationInfo(entry) {
   if (!entry?.expire_date) {
     return {
@@ -134,6 +140,67 @@ export function renderStockDetailPage() {
                   <dd class="col-7" x-text="entry.stock_type || 'Stored'"></dd>
                 </dl>
 
+                <div class="mt-4">
+                  <h3 class="h6 mb-3">Identifier</h3>
+                  <div class="input-group">
+                    <input
+                      class="form-control"
+                      type="text"
+                      x-model="identifierDraft"
+                      inputmode="numeric"
+                      autocomplete="off"
+                      placeholder="EAN / UPC / GTIN"
+                    />
+                    <button
+                      class="btn btn-outline-primary"
+                      type="button"
+                      @click="saveIdentifierCode()"
+                      :disabled="identifierState.isLoading"
+                    >
+                      <span x-show="!identifierState.isLoading">Save identifier</span>
+                      <span x-show="identifierState.isLoading">Saving...</span>
+                    </button>
+                  </div>
+                  <div class="form-text">Used for OpenFoodFacts lookups and product metadata refresh.</div>
+                  <template x-if="identifierState.error">
+                    <div class="small text-danger mt-1" x-text="identifierState.error"></div>
+                  </template>
+                </div>
+
+                <div class="mt-4">
+                  <h3 class="h6 mb-2">OpenFoodFacts</h3>
+                  <div class="d-flex flex-wrap gap-2">
+                    <button
+                      class="btn btn-outline-secondary"
+                      type="button"
+                      @click="runItemLookup(false)"
+                      :disabled="lookupDetailsState.isLoading || !hasIdentifierCode()"
+                    >
+                      <span x-show="!lookupDetailsState.isLoading">Refresh details</span>
+                      <span x-show="lookupDetailsState.isLoading">Refreshing...</span>
+                    </button>
+                    <button
+                      class="btn btn-outline-primary"
+                      type="button"
+                      @click="runItemLookup(true)"
+                      :disabled="lookupDetailsState.isLoading || !hasIdentifierCode()"
+                    >
+                      <span x-show="!lookupDetailsState.isLoading">Apply missing fields</span>
+                      <span x-show="lookupDetailsState.isLoading">Applying...</span>
+                    </button>
+                  </div>
+                  <template x-if="!hasIdentifierCode()">
+                    <div class="small text-body-secondary mt-2">Save an identifier code first to enable lookup refresh.</div>
+                  </template>
+                  <template x-if="offLookupFeedback.message">
+                    <div
+                      class="alert mt-3 mb-0"
+                      :class="offLookupFeedback.type === 'success' ? 'alert-success' : 'alert-warning'"
+                      x-text="offLookupFeedback.message"
+                    ></div>
+                  </template>
+                </div>
+
                 <div class="mt-4">
                   <h3 class="h6 mb-3">Nutrition</h3>
                   <dl class="row mb-0 detail-grid">
@@ -298,12 +365,19 @@ export function stockDetailPageData(store) {
     state: createAsyncState(),
     adjustmentState: createAsyncState(),
     printState: createAsyncState(),
+    identifierState: createAsyncState(),
+    lookupDetailsState: createAsyncState(),
     printFeedback: {
       type: '',
       message: '',
     },
+    offLookupFeedback: {
+      type: '',
+      message: '',
+    },
     entry: null,
     locationPathByUuid: {},
+    identifierDraft: '',
     adjustment: {
       mode: 'increment',
       quantity: '1',
@@ -321,6 +395,7 @@ export function stockDetailPageData(store) {
           fetchLocations(store).catch(() => ({ flat: [] })),
         ]);
         this.entry = entry;
+        this.identifierDraft = normalizeIdentifierCode(entry?.identifier_code);
         this.locationPathByUuid = Object.fromEntries(
           (locations.flat || [])
             .filter((location) => location.uuid_b64)
@@ -329,6 +404,149 @@ export function stockDetailPageData(store) {
         this.adjustment.level = this.entry?.level || 'plenty';
       }).catch(() => {});
     },
+    normalizedIdentifierDraft() {
+      return normalizeIdentifierCode(this.identifierDraft);
+    },
+    hasIdentifierCode() {
+      return Boolean(this.normalizedIdentifierDraft());
+    },
+    async reloadEntry(uuidB64) {
+      const refreshed = await getStockEntry(store, uuidB64);
+      this.entry = refreshed;
+      this.identifierDraft = normalizeIdentifierCode(refreshed?.identifier_code);
+      this.adjustment.level = this.entry?.level || 'plenty';
+    },
+    itemLookupStatusMessage(response) {
+      const retryAfter = Number.isInteger(response?.retryAfterSeconds) && response.retryAfterSeconds > 0
+        ? ` Retry in ${response.retryAfterSeconds}s.`
+        : '';
+
+      if (response?.status === 'missing_identifier') {
+        return 'Save an identifier code before running lookup.';
+      }
+      if (response?.status === 'not_found') {
+        return `No OpenFoodFacts result found for code ${this.normalizedIdentifierDraft() || 'unknown'}.`;
+      }
+      if (response?.status === 'rate_limited') {
+        return `OpenFoodFacts lookup is temporarily rate-limited.${retryAfter}`;
+      }
+      if (response?.status === 'lookup_failed') {
+        return 'OpenFoodFacts lookup failed. Try again shortly or continue manually.';
+      }
+
+      return 'Lookup response could not be applied.';
+    },
+    itemLookupSuccessMessage(response) {
+      const parts = [
+        response?.update
+          ? 'Applied missing fields from OpenFoodFacts.'
+          : 'Fetched OpenFoodFacts details preview.',
+      ];
+      const source = response?.item?.external_source || this.entry?.external_source;
+
+      if (source) {
+        parts.push(`Source: ${source}.`);
+      }
+
+      if (Array.isArray(response?.updatedFields) && response.updatedFields.length) {
+        parts.push(`Updated: ${response.updatedFields.join(', ')}.`);
+      }
+
+      if (response?.staleCache) {
+        parts.push('Using stale cache data.');
+      } else {
+        parts.push('Cache freshness: current.');
+      }
+
+      if (response?.offPayloadFetchedAt) {
+        const fetchedAt = new Date(response.offPayloadFetchedAt);
+        parts.push(
+          `Fetched at: ${
+            Number.isNaN(fetchedAt.getTime())
+              ? response.offPayloadFetchedAt
+              : fetchedAt.toLocaleString()
+          }.`,
+        );
+      }
+
+      return parts.join(' ');
+    },
+    async saveIdentifierCode() {
+      if (!this.entry?.uuid_b64) {
+        return;
+      }
+
+      this.identifierState.error = '';
+      await runAsyncState(this.identifierState, async () => {
+        const identifierCode = this.normalizedIdentifierDraft();
+        const updated = await patchStockItem(store, this.entry.uuid_b64, {
+          identifier_code: identifierCode || null,
+        });
+
+        this.entry = updated;
+        this.identifierDraft = normalizeIdentifierCode(updated?.identifier_code || identifierCode);
+        this.offLookupFeedback = {
+          type: '',
+          message: '',
+        };
+        store.addAlert({
+          type: 'success',
+          message: identifierCode
+            ? `Identifier code saved for ${this.entry.name}.`
+            : `Identifier code cleared for ${this.entry.name}.`,
+        });
+      }).catch(() => {});
+    },
+    async runItemLookup(update) {
+      if (!this.entry?.uuid_b64) {
+        return;
+      }
+
+      const identifierCode = this.normalizedIdentifierDraft();
+      if (!identifierCode) {
+        this.offLookupFeedback = {
+          type: 'warning',
+          message: 'Save an identifier code before running lookup refresh.',
+        };
+        return;
+      }
+
+      this.lookupDetailsState.error = '';
+      await runAsyncState(this.lookupDetailsState, async () => {
+        const response = await lookupItemDetails(store, this.entry.uuid_b64, { update });
+        if (response.status !== 'ok') {
+          const message = this.itemLookupStatusMessage(response);
+          this.offLookupFeedback = {
+            type: 'warning',
+            message,
+          };
+          store.addAlert({ type: 'warning', message });
+          return;
+        }
+
+        if (update) {
+          await this.reloadEntry(this.entry.uuid_b64);
+        } else if (response.item) {
+          this.entry = response.item;
+          this.identifierDraft = normalizeIdentifierCode(response.item.identifier_code || identifierCode);
+        }
+
+        const message = this.itemLookupSuccessMessage(response);
+        this.offLookupFeedback = {
+          type: 'success',
+          message,
+        };
+        store.addAlert({
+          type: 'success',
+          message,
+        });
+      }).catch((error) => {
+        this.offLookupFeedback = {
+          type: 'warning',
+          message: error?.message || 'OpenFoodFacts lookup failed.',
+        };
+      });
+    },
     async submitMeasuredAdjustment() {
       if (!this.entry) {
         return;
@@ -351,6 +569,7 @@ export function stockDetailPageData(store) {
         this.entry = await adjustStockEntry(store, this.entry.uuid_b64, {
           quantity: exactQuantity,
         });
+        this.identifierDraft = normalizeIdentifierCode(this.entry?.identifier_code);
         store.addAlert({ type: 'success', message: 'Stock quantity updated.' });
       }).catch(() => {});
     },
@@ -371,6 +590,7 @@ export function stockDetailPageData(store) {
         this.entry = await adjustStockEntry(store, this.entry.uuid_b64, {
           level: this.adjustment.level,
         });
+        this.identifierDraft = normalizeIdentifierCode(this.entry?.identifier_code);
         store.addAlert({ type: 'success', message: 'Stock level updated.' });
       }).catch(() => {});
     },

tests/api/stock.test.js

@@ -15,7 +15,10 @@ vi.mock('../../src/api/client.js', () => ({
 
 const {
   applyItemUpsert,
+  lookupItemByIdentifier,
+  lookupItemDetails,
   listKitchenChanges,
+  patchStockItem,
   previewItemUpsert,
   useStockItem,
 } = await import('../../src/api/stock.js');
@@ -112,6 +115,101 @@ describe('api/stock', () => {
     });
   });
 
+  it('lookupItemByIdentifier normalizes lookup metadata fields', async () => {
+    apiRequestMock.mockResolvedValueOnce({
+      status: 'rate_limited',
+      source: 'openfoodfacts',
+      cache_hit: true,
+      identifier_code: '1234',
+      identifier_type: 'ean_13',
+      retry_after_seconds: 42,
+      payload_fetched_at: '2026-04-11T08:00:00Z',
+      stale_cache: true,
+      item: null,
+    });
+
+    const response = await lookupItemByIdentifier(
+      { config: { database: 'db' } },
+      '1234',
+    );
+
+    expect(response).toEqual({
+      status: 'rate_limited',
+      source: 'openfoodfacts',
+      cacheHit: true,
+      identifierCode: '1234',
+      identifierType: 'ean_13',
+      retryAfterSeconds: 42,
+      payloadFetchedAt: '2026-04-11T08:00:00Z',
+      staleCache: true,
+      item: null,
+    });
+  });
+
+  it('lookupItemDetails maps item lookup response and query flag', async () => {
+    apiRequestMock.mockResolvedValueOnce({
+      status: 'ok',
+      found: true,
+      update: true,
+      identifier_code: '555',
+      identifier_type: 'ean_13',
+      preview: { name: 'Milk' },
+      updated_fields: ['name'],
+      off_payload_fetched_at: '2026-04-11T09:00:00Z',
+      retry_after_seconds: null,
+      stale_cache: false,
+      item: { uuid_b64: 'item-1', name: 'Milk' },
+    });
+
+    const response = await lookupItemDetails(
+      { config: { database: 'db' } },
+      'item-1',
+      { update: true },
+    );
+
+    expect(apiRequestMock).toHaveBeenCalledWith(
+      { config: { database: 'db' } },
+      'kitchen/items/item-1/lookup',
+      { method: 'POST', query: { update: 1 } },
+    );
+    expect(response).toEqual({
+      status: 'ok',
+      found: true,
+      update: true,
+      identifierCode: '555',
+      identifierType: 'ean_13',
+      preview: { name: 'Milk' },
+      updatedFields: ['name'],
+      offPayloadFetchedAt: '2026-04-11T09:00:00Z',
+      retryAfterSeconds: null,
+      staleCache: false,
+      item: { uuid_b64: 'item-1', name: 'Milk' },
+    });
+  });
+
+  it('patchStockItem sends PATCH to item endpoint', async () => {
+    apiRequestMock.mockResolvedValueOnce({
+      uuid_b64: 'item-1',
+      identifier_code: '3830012345678',
+    });
+
+    const response = await patchStockItem(
+      { config: { database: 'db' } },
+      'item-1',
+      { identifier_code: '3830012345678' },
+    );
+
+    expect(apiRequestMock).toHaveBeenCalledWith(
+      { config: { database: 'db' } },
+      'kitchen/items/item-1',
+      { method: 'PATCH', body: { identifier_code: '3830012345678' } },
+    );
+    expect(response).toEqual({
+      uuid_b64: 'item-1',
+      identifier_code: '3830012345678',
+    });
+  });
+
   it('useStockItem returns used on 204', async () => {
     apiRequestMock.mockResolvedValueOnce(null);
 

tests/features/labels/identifier-lookup-feedback.test.js

@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from 'vitest';
+
+const lookupItemByIdentifierMock = vi.fn();
+
+vi.mock('../../../src/api/stock.js', () => ({
+  applyItemUpsert: vi.fn(),
+  previewItemUpsert: vi.fn(),
+  searchItemDefinitions: vi.fn(async () => []),
+  lookupItemByIdentifier: (...args) => lookupItemByIdentifierMock(...args),
+}));
+
+vi.mock('../../../src/api/labels.js', () => ({
+  previewLabel: vi.fn(async () => ({ objectUrl: 'blob:preview' })),
+  printItemLabel: vi.fn(async () => null),
+  formatPrintErrorMessage: (error) => error?.message || 'Printing failed.',
+}));
+
+vi.mock('../../../src/api/locations.js', () => ({
+  fetchLocations: vi.fn(async () => ({ flat: [], tree: [] })),
+}));
+
+const { labelCreatePageData } = await import('../../../src/features/labels/label-create-page.js');
+
+describe('label identifier lookup feedback', () => {
+  it('shows retry hint for rate-limited lookup responses', () => {
+    const data = labelCreatePageData({
+      isConnected: false,
+      activeKitchen: { id: 1 },
+      addAlert: vi.fn(),
+    });
+
+    const message = data.lookupStatusMessageWithDetails(
+      { status: 'rate_limited', retryAfterSeconds: 30 },
+      '3830012345678',
+    );
+
+    expect(message).toContain('rate-limited');
+    expect(message).toContain('Retry in 30s');
+  });
+
+  it('builds metadata-aware success message with source/cache/freshness context', () => {
+    const data = labelCreatePageData({
+      isConnected: false,
+      activeKitchen: { id: 1 },
+      addAlert: vi.fn(),
+    });
+
+    const message = data.lookupSuccessMessage({
+      source: 'openfoodfacts',
+      cacheHit: true,
+      staleCache: true,
+      payloadFetchedAt: '2026-04-11T09:00:00Z',
+    });
+
+    expect(message).toContain('OpenFoodFacts');
+    expect(message).toContain('cache hit');
+    expect(message).toContain('stale cache');
+    expect(message).toContain('fetched:');
+  });
+
+  it('applies non-ok lookup status as warning message with details', async () => {
+    lookupItemByIdentifierMock.mockResolvedValueOnce({
+      status: 'rate_limited',
+      retryAfterSeconds: 45,
+      source: 'openfoodfacts',
+      cacheHit: false,
+      staleCache: false,
+      item: null,
+    });
+
+    const addAlert = vi.fn();
+    const data = labelCreatePageData({
+      isConnected: false,
+      activeKitchen: { id: 1 },
+      addAlert,
+    });
+    data.form.identifierCode = '3830012345678';
+
+    await data.lookupIdentifierDetails();
+
+    expect(data.lookupState.error).toContain('Retry in 45s');
+    expect(addAlert).toHaveBeenCalledWith({
+      type: 'warning',
+      message: data.lookupState.error,
+    });
+  });
+});

tests/features/stock/mark-gone.test.js

@@ -7,6 +7,8 @@ vi.mock('../../../src/api/stock.js', () => ({
   useStockItem: (...args) => useStockItemMock(...args),
   getStockEntry: (...args) => getStockEntryMock(...args),
   adjustStockEntry: vi.fn(),
+  lookupItemDetails: vi.fn(),
+  patchStockItem: vi.fn(),
   listStockEntries: vi.fn(),
   listGroupedStockEntries: vi.fn(),
   updateStockItem: vi.fn(),

tests/features/stock/off-lookup-and-identifier.test.js

@@ -0,0 +1,127 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const lookupItemDetailsMock = vi.fn();
+const patchStockItemMock = vi.fn();
+const getStockEntryMock = vi.fn();
+
+vi.mock('../../../src/api/stock.js', () => ({
+  adjustStockEntry: vi.fn(),
+  getStockEntry: (...args) => getStockEntryMock(...args),
+  lookupItemDetails: (...args) => lookupItemDetailsMock(...args),
+  patchStockItem: (...args) => patchStockItemMock(...args),
+  useStockItem: vi.fn(),
+}));
+
+vi.mock('../../../src/api/labels.js', () => ({
+  printItemLabel: vi.fn(),
+  formatPrintErrorMessage: (error) => error?.message || 'Printing failed.',
+}));
+
+vi.mock('../../../src/api/locations.js', () => ({
+  fetchLocations: vi.fn(async () => ({ flat: [], tree: [] })),
+}));
+
+const { stockDetailPageData } = await import('../../../src/features/stock/stock-detail-page.js');
+
+describe('stock detail identifier and OFF lookup', () => {
+  beforeEach(() => {
+    lookupItemDetailsMock.mockReset();
+    patchStockItemMock.mockReset();
+    getStockEntryMock.mockReset();
+    globalThis.window = {
+      __loncApp: {
+        navigate: vi.fn(),
+      },
+    };
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    delete globalThis.window;
+  });
+
+  it('saves normalized identifier code via PATCH', async () => {
+    patchStockItemMock.mockResolvedValueOnce({
+      uuid_b64: 'item-1',
+      name: 'Milk',
+      identifier_code: '3830012345678',
+    });
+
+    const addAlert = vi.fn();
+    const store = { addAlert, isConnected: false };
+    const data = stockDetailPageData(store);
+    data.entry = { uuid_b64: 'item-1', name: 'Milk', identifier_code: '' };
+    data.identifierDraft = ' 3830 0123 45678 ';
+
+    await data.saveIdentifierCode();
+
+    expect(patchStockItemMock).toHaveBeenCalledWith(store, 'item-1', {
+      identifier_code: '3830012345678',
+    });
+    expect(data.identifierDraft).toBe('3830012345678');
+    expect(addAlert).toHaveBeenCalledWith({
+      type: 'success',
+      message: 'Identifier code saved for Milk.',
+    });
+  });
+
+  it('refreshes OFF details and surfaces stale-cache metadata', async () => {
+    lookupItemDetailsMock.mockResolvedValueOnce({
+      status: 'ok',
+      update: false,
+      updatedFields: ['name', 'nutrition_facts'],
+      staleCache: true,
+      offPayloadFetchedAt: '2026-04-11T09:00:00Z',
+      item: {
+        uuid_b64: 'item-1',
+        name: 'Milk',
+        identifier_code: '3830012345678',
+      },
+    });
+
+    const addAlert = vi.fn();
+    const store = { addAlert, isConnected: false };
+    const data = stockDetailPageData(store);
+    data.entry = { uuid_b64: 'item-1', name: 'Milk', identifier_code: '3830012345678' };
+    data.identifierDraft = '3830012345678';
+
+    await data.runItemLookup(false);
+
+    expect(lookupItemDetailsMock).toHaveBeenCalledWith(store, 'item-1', { update: false });
+    expect(data.offLookupFeedback.type).toBe('success');
+    expect(data.offLookupFeedback.message).toContain('Using stale cache data.');
+    expect(addAlert).toHaveBeenCalledWith({
+      type: 'success',
+      message: data.offLookupFeedback.message,
+    });
+  });
+
+  it('apply missing fields reloads entry after successful lookup', async () => {
+    lookupItemDetailsMock.mockResolvedValueOnce({
+      status: 'ok',
+      update: true,
+      updatedFields: ['description'],
+      staleCache: false,
+      offPayloadFetchedAt: null,
+      item: null,
+    });
+    getStockEntryMock.mockResolvedValueOnce({
+      uuid_b64: 'item-1',
+      name: 'Milk',
+      identifier_code: '3830012345678',
+      description: 'Whole milk',
+    });
+
+    const addAlert = vi.fn();
+    const store = { addAlert, isConnected: false };
+    const data = stockDetailPageData(store);
+    data.entry = { uuid_b64: 'item-1', name: 'Milk', identifier_code: '3830012345678' };
+    data.identifierDraft = '3830012345678';
+
+    await data.runItemLookup(true);
+
+    expect(getStockEntryMock).toHaveBeenCalledWith(store, 'item-1');
+    expect(data.entry.description).toBe('Whole milk');
+    expect(data.offLookupFeedback.type).toBe('success');
+  });
+});

tests/features/stock/print-label.test.js

@@ -12,6 +12,8 @@ vi.mock('../../../src/api/stock.js', () => ({
   getStockEntry: vi.fn(),
   adjustStockEntry: vi.fn(),
   useStockItem: vi.fn(),
+  lookupItemDetails: vi.fn(),
+  patchStockItem: vi.fn(),
   listStockEntries: vi.fn(async () => []),
   listGroupedStockEntries: vi.fn(async () => []),
   updateStockItem: vi.fn(),

vite.config.js

@@ -1,10 +1,32 @@
 import { defineConfig } from 'vite';
 import packageJson from './package.json';
 
+function appVersionAssetPlugin() {
+  return {
+    name: 'app-version-asset',
+    apply: 'build',
+    generateBundle() {
+      this.emitFile({
+        type: 'asset',
+        fileName: 'version.json',
+        source: JSON.stringify(
+          {
+            version: packageJson.version,
+            buildTime: new Date().toISOString(),
+          },
+          null,
+          2,
+        ),
+      });
+    },
+  };
+}
+
 export default defineConfig({
   define: {
     __APP_VERSION__: JSON.stringify(packageJson.version),
   },
+  plugins: [appVersionAssetPlugin()],
   server: {
     port: 4173,
   },