Add hardware ingest flow and UI upload

internal/api/ui_ingest.tmpl

@@ -41,33 +41,66 @@
         <pre class="meta" data-response></pre>
       </form>
     </section>
+
+    <section class="card">
+      <h2>Hardware Ingest</h2>
+      <form class="form" data-endpoint="/ingest/hardware">
+        <div class="field">
+          <label for="hardware">Payload (JSON)</label>
+          <textarea class="input" id="hardware" name="payload" rows="10">{{.HardwarePayload}}</textarea>
+        </div>
+        <div class="field">
+          <label for="hardwareFile">Upload a JSON snapshot (per INTEGRATION_GUIDE.md)</label>
+          <input class="input" id="hardwareFile" type="file" accept="application/json" />
+        </div>
+        <button class="button" type="submit">Send Hardware Snapshot</button>
+        <pre class="meta" data-response></pre>
+      </form>
+    </section>
   </main>
 
-  <script>
-    const forms = document.querySelectorAll("form[data-endpoint]");
-    forms.forEach((form) => {
-      form.addEventListener("submit", async (event) => {
-        event.preventDefault();
-        const endpoint = form.getAttribute("data-endpoint");
-        const textarea = form.querySelector("textarea[name='payload']");
-        const output = form.querySelector("[data-response]");
-        if (!endpoint || !textarea || !output) return;
+    <script>
+      const forms = document.querySelectorAll("form[data-endpoint]");
+      forms.forEach((form) => {
+        form.addEventListener("submit", async (event) => {
+          event.preventDefault();
+          const endpoint = form.getAttribute("data-endpoint");
+          const textarea = form.querySelector("textarea[name='payload']");
+          const output = form.querySelector("[data-response]");
+          if (!endpoint || !textarea || !output) return;
 
-        output.textContent = "Sending...";
-        try {
-          const response = await fetch(endpoint, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: textarea.value,
-          });
-          const text = await response.text();
-          output.textContent = `${response.status} ${response.statusText}\n${text}`;
-        } catch (err) {
-          output.textContent = `Request failed: ${err}`;
-        }
+          output.textContent = "Sending...";
+          try {
+            const response = await fetch(endpoint, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: textarea.value,
+            });
+            const text = await response.text();
+            output.textContent = `${response.status} ${response.statusText}\n${text}`;
+          } catch (err) {
+            output.textContent = `Request failed: ${err}`;
+          }
+        });
       });
-    });
-  </script>
+
+      const hardwareFileInput = document.getElementById("hardwareFile");
+      const hardwareTextarea = document.getElementById("hardware");
+      if (hardwareFileInput && hardwareTextarea) {
+        hardwareFileInput.addEventListener("change", async (event) => {
+          const file = hardwareFileInput.files?.[0];
+          if (!file) {
+            return;
+          }
+          try {
+            const text = await file.text();
+            hardwareTextarea.value = text;
+          } catch (err) {
+            alert(`Failed to load file: ${err}`);
+          }
+        });
+      }
+    </script>
 </body>
 </html>
 {{end}}