ml

otel-ui/src/components/IssuesVisualizer.tsx

@@ -15,8 +15,11 @@ import {
   RotateCcw,
   ScrollText,
   ShieldBan,
+  Sparkles,
+  Loader2,
   X,
 } from "lucide-react"
+import { NeedleTestModal } from "./NeedleTestModal"
 import { useObservabilityData } from "../hooks/useObservabilityData"
 import { authFetch } from "../lib/auth"
 import { formatRelativeTime } from "../lib/timeUtils"
@@ -48,6 +51,19 @@ interface HoneypotIP {
   promoted_until: string
 }
 
+interface DetectorTestResult {
+  passed?: boolean
+  scenario?: string
+  row?: {
+    baselineErrorRate: number
+    futureErrorCount: number
+    futureErrorRate: number
+    labelKnown: boolean
+    label: boolean
+  }
+  error?: string
+}
+
 const statusFilters: { value: StatusFilter; label: string }[] = [
   { value: "all", label: "All" },
   { value: "open", label: "Open" },
@@ -209,6 +225,35 @@ const IssueCard = ({
   const hasMappedStacktrace = issue.samples.some((sample) => Boolean(sample.resolvedStacktrace))
   const contextSample = issue.samples.find((s) => s.httpMethod || s.httpRoute || s.httpStatus)
 
+  const [needleResult, setNeedleResult] = useState<{
+    action?: string
+    tool?: string
+    confidence?: number
+    reasoning?: string
+    latency_ms?: number
+    arguments?: Record<string, unknown>
+    error?: string
+  } | null>(null)
+  const [needleLoading, setNeedleLoading] = useState(false)
+
+  const handleNeedleTriage = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setNeedleLoading(true)
+    try {
+      const response = await authFetch("/api/needle/classify", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ issue_id: issue.id }),
+      })
+      const data = await response.json()
+      setNeedleResult(data)
+    } catch (err) {
+      setNeedleResult({ error: err instanceof Error ? err.message : String(err) })
+    } finally {
+      setNeedleLoading(false)
+    }
+  }
+
   const viewTrace = (traceId: string, spanId?: string) => {
     setActiveTraceId(traceId)
     if (spanId) setActiveSpanId(spanId)
@@ -342,8 +387,28 @@ const IssueCard = ({
             </div>
           </div>
 
-          {latestSample?.traceId && (
-            <div className="mt-1 pt-4 border-t border-white/5 flex justify-end">
+          <div className="mt-2 pt-4 border-t border-white/5 flex flex-wrap items-center justify-between gap-3">
+            <button
+              type="button"
+              onClick={handleNeedleTriage}
+              disabled={needleLoading}
+              className="inline-flex items-center gap-2 rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-3 py-1.5 text-[11px] font-semibold text-emerald-300 transition-all hover:bg-emerald-500/20 hover:border-emerald-400/50 active:scale-[0.98] disabled:opacity-50"
+              title="Classify this issue using local Needle 3 model"
+            >
+              {needleLoading ? (
+                <>
+                  <Loader2 className="h-3.5 w-3.5 animate-spin text-emerald-400" />
+                  <span>Needle 3 Triaging...</span>
+                </>
+              ) : (
+                <>
+                  <Sparkles className="h-3.5 w-3.5 text-emerald-400" />
+                  <span>Needle 3 Triage</span>
+                </>
+              )}
+            </button>
+
+            {latestSample?.traceId && (
               <button
                 onClick={() => viewTrace(latestSample.traceId!, latestSample.spanId)}
                 className="inline-flex items-center gap-2 rounded-xl bg-sky-500 px-4 py-2 text-[10px] font-black uppercase tracking-widest text-slate-950 transition-all hover:bg-sky-400 hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-sky-500/20"
@@ -351,6 +416,58 @@ const IssueCard = ({
                 <Activity className="h-3 w-3" />
                 View Latest Trace
               </button>
+            )}
+          </div>
+
+          {needleResult && (
+            <div className="rounded-xl border border-emerald-500/25 bg-emerald-950/25 p-3.5 space-y-2 text-[11px] animate-fade-in">
+              <div className="flex items-center justify-between gap-2 border-b border-emerald-500/15 pb-2">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="flex h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
+                  <span className="font-mono font-bold text-emerald-300 uppercase tracking-wider text-[10px]">
+                    Needle 3 Action:
+                  </span>
+                  <span className="rounded-md bg-emerald-500/20 border border-emerald-500/30 px-2 py-0.5 font-mono text-emerald-200 font-bold">
+                    {needleResult.action || needleResult.tool || "Processed"}
+                  </span>
+                </div>
+                {needleResult.confidence !== undefined && (
+                  <span className="text-[10px] font-mono text-slate-400">
+                    Confidence:{" "}
+                    <span className={`font-bold ${needleResult.confidence >= 0.6 ? "text-emerald-400" : "text-amber-400"}`}>
+                      {(needleResult.confidence * 100).toFixed(0)}%
+                    </span>
+                    {needleResult.latency_ms && (
+                      <span className="ml-2 text-slate-500">({needleResult.latency_ms}ms)</span>
+                    )}
+                  </span>
+                )}
+              </div>
+
+              {needleResult.reasoning && (
+                <p className="text-slate-300 italic text-[11px]">
+                  &ldquo;{needleResult.reasoning}&rdquo;
+                </p>
+              )}
+
+              {needleResult.arguments && Object.keys(needleResult.arguments).length > 0 && (
+                <div className="space-y-1 pt-1 font-mono text-[10px]">
+                  <span className="text-slate-400 uppercase text-[9px] font-bold tracking-wider">
+                    Extracted Arguments:
+                  </span>
+                  <div className="flex flex-wrap gap-1.5">
+                    {Object.entries(needleResult.arguments).map(([k, v]) => (
+                      <span key={k} className="rounded bg-black/40 border border-white/5 px-2 py-0.5 text-slate-300">
+                        <span className="text-slate-500">{k}:</span> {String(v)}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {needleResult.error && (
+                <p className="text-rose-400 font-mono text-[10px]">{needleResult.error}</p>
+              )}
             </div>
           )}
         </div>
@@ -379,6 +496,9 @@ export const IssuesVisualizer = ({
   const { selectedServices, searchQuery } = useObservabilityData()
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
   const [kindFilter, setKindFilter] = useState<KindFilter>("all")
+  const [needleModalOpen, setNeedleModalOpen] = useState(false)
+  const [detectorTest, setDetectorTest] = useState<DetectorTestResult | null>(null)
+  const [detectorTestLoading, setDetectorTestLoading] = useState(false)
   const [excludeSpamIPs, setExcludeSpamIPs] = useState(false)
   const [showSpamIPs, setShowSpamIPs] = useState(false)
   const [spamIPs, setSpamIPs] = useState<HoneypotIP[]>([])
@@ -399,6 +519,21 @@ export const IssuesVisualizer = ({
     }
   }
 
+  const runDetectorTest = async () => {
+    setDetectorTestLoading(true)
+    setDetectorTest(null)
+    try {
+      const response = await authFetch("/api/ml/test-spike", { method: "POST" })
+      const data = (await response.json()) as DetectorTestResult
+      if (!response.ok) throw new Error(data.error ?? `HTTP ${response.status}`)
+      setDetectorTest(data)
+    } catch (err) {
+      setDetectorTest({ error: err instanceof Error ? err.message : String(err) })
+    } finally {
+      setDetectorTestLoading(false)
+    }
+  }
+
   const spamIPSet = useMemo(() => new Set(spamIPs.map((entry) => entry.ip)), [spamIPs])
 
   const statusCounts = useMemo(() => {
@@ -525,6 +660,25 @@ export const IssuesVisualizer = ({
             <ShieldBan className="h-3 w-3" />
             Spam IPs ({spamIPs.length})
           </button>
+          <button
+            type="button"
+            onClick={() => setNeedleModalOpen(true)}
+            className="flex items-center gap-1.5 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-emerald-300 hover:bg-emerald-500/20 hover:border-emerald-500/50 hover:text-emerald-200 transition-all shadow-sm shadow-emerald-500/10"
+            title="Open interactive Needle 3 telemetry classifier modal"
+          >
+            <Sparkles className="h-3 w-3 text-emerald-400" />
+            Test Needle 3
+          </button>
+          <button
+            type="button"
+            onClick={() => void runDetectorTest()}
+            disabled={detectorTestLoading}
+            className="flex items-center gap-1.5 rounded-lg border border-sky-500/30 bg-sky-500/10 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-sky-300 hover:bg-sky-500/20 hover:border-sky-500/50 hover:text-sky-200 transition-all disabled:cursor-wait disabled:opacity-60"
+            title="Run a non-persistent synthetic spike through the ML feature and label pipeline"
+          >
+            {detectorTestLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : <Activity className="h-3 w-3" />}
+            Test spike detector
+          </button>
           <button
             onClick={() => refresh()}
             className="flex items-center gap-1.5 rounded-lg border border-white/10 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-400 hover:text-white hover:border-white/20 transition-all"
@@ -535,6 +689,27 @@ export const IssuesVisualizer = ({
         </div>
       </div>
 
+      {detectorTest && (
+        <div className={`flex flex-wrap items-center justify-between gap-3 rounded-xl border px-3 py-2 text-xs ${detectorTest.passed ? "border-emerald-400/25 bg-emerald-400/5 text-emerald-100" : "border-rose-400/25 bg-rose-400/5 text-rose-100"}`}>
+          <div>
+            <p className="font-semibold">
+              {detectorTest.passed ? "Spike detector verified" : "Spike detector test failed"}
+            </p>
+            <p className="mt-0.5 text-[10px] text-slate-400">
+              {detectorTest.error ?? detectorTest.scenario}
+            </p>
+          </div>
+          {detectorTest.row && (
+            <div className="flex flex-wrap gap-x-3 gap-y-1 font-mono text-[10px] text-slate-300">
+              <span>baseline {(detectorTest.row.baselineErrorRate * 100).toFixed(1)}%</span>
+              <span>future errors {detectorTest.row.futureErrorCount}</span>
+              <span>future {(detectorTest.row.futureErrorRate * 100).toFixed(1)}%</span>
+              <span>{detectorTest.row.labelKnown && detectorTest.row.label ? "label: spike" : "label: not spike"}</span>
+            </div>
+          )}
+        </div>
+      )}
+
       {showSpamIPs && (
         <div className="rounded-xl border border-amber-400/20 bg-amber-400/5 p-3 text-xs text-slate-300">
           <div className="flex items-center justify-between gap-3 mb-2">
@@ -594,6 +769,8 @@ export const IssuesVisualizer = ({
           ))}
         </div>
       )}
+
+      <NeedleTestModal isOpen={needleModalOpen} onClose={() => setNeedleModalOpen(false)} />
     </div>
   )
 }