ml

index.html

@@ -141,9 +141,45 @@
           Clear Logs
         </button>
       </div>
+
+      <div class="data-section" style="border-left: 4px solid #10b981;">
+        <h2 style="border-bottom-color: #10b981; color: #065f46;">Needle 3 AI Telemetry Triage</h2>
+        <p style="font-size: 13px; color: #666; margin-top: 0;">Test on-device telemetry classification with Cactus-Compute/needle3:</p>
+        <div style="display: flex; gap: 8px; margin-bottom: 10px;">
+          <input id="needle-input" type="text" style="flex: 1; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; font-size: 12px;" value="User reported client browser crash on service eventsourced-ai-web: Script error on url https://event-agent.k6n.net/#session=angry-koala-1" />
+          <button id="needle-btn" style="background: #10b981; color: white; border: none; padding: 8px 16px; border-radius: 4px; font-weight: bold; cursor: pointer;" onclick="classifyWithNeedle()">
+            Classify with Needle 3
+          </button>
+        </div>
+        <div id="needle-result" class="data-content" style="background: #ecfdf5; border: 1px solid #a7f3d0; min-height: 40px; color: #064e3b;">
+          Click "Classify with Needle 3" to test the sidecar...
+        </div>
+      </div>
     </div>
 
     <script>
+      async function classifyWithNeedle() {
+        const input = document.getElementById("needle-input").value;
+        const resultDiv = document.getElementById("needle-result");
+        const btn = document.getElementById("needle-btn");
+        if (!input.trim()) return;
+        btn.textContent = "Classifying...";
+        btn.disabled = true;
+        try {
+          const resp = await fetch("/api/needle/classify", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ text: input }),
+          });
+          const data = await resp.json();
+          resultDiv.innerHTML = `<pre style="margin: 0; font-family: monospace;">${JSON.stringify(data, null, 2)}</pre>`;
+        } catch (err) {
+          resultDiv.textContent = "Error: " + err;
+        } finally {
+          btn.textContent = "Classify with Needle 3";
+          btn.disabled = false;
+        }
+      }
       let ws;
       let tracesCount = 0;
       let metricsCount = 0;