ml

2026-09-19 06:50:19 +00:00
1 parent 21f04d696b
commit 8f5c267444
@@ -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>
  )
 }
@@ -0,0 +1,236 @@
+import React, { useState } from "react"
+import { X, Sparkles, Loader2, Cpu, CheckCircle2, AlertTriangle } from "lucide-react"
+import { authFetch } from "../lib/auth"
+
+interface NeedleTestModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+interface NeedleResponse {
+  success?: boolean
+  action?: string
+  tool?: string
+  confidence?: number
+  reasoning?: string
+  latency_ms?: number
+  arguments?: Record<string, unknown>
+  error?: string
+}
+
+const PRESETS = [
+  {
+    label: "Frontend RUM Crash",
+    service: "eventsourced-ai-web",
+    text: "User reported client browser crash on service eventsourced-ai-web: Script error on url https://event-agent.k6n.net/#session=angry-koala-1",
+  },
+  {
+    label: "Security CVE Probe",
+    service: "nginx",
+    text: "Alert security team: scanner metabase-cve-2026-72898-detect/1.0 probed target /api/session/properties with status code 503",
+  },
+  {
+    label: "Web Vital Metric",
+    service: "storefront-web",
+    text: "Store RUM metric on service storefront-web: record TTFB of 84 ms",
+  },
+  {
+    label: "Benign 404 Route",
+    service: "git.k6n.net",
+    text: "Client requested missing git resource: 404 on path /mats/go-cart-actor/blame/commit/81569b on host git.k6n.net",
+  },
+  {
+    label: "Database Pool Deadlock",
+    service: "checkout-service",
+    text: "Critical incident: Escalate severe backend database timeout on service checkout-service: deadlocked while acquiring connection pool",
+  },
+]
+
+export const NeedleTestModal: React.FC<NeedleTestModalProps> = ({ isOpen, onClose }) => {
+  const [inputText, setInputText] = useState(PRESETS[0].text)
+  const [loading, setLoading] = useState(false)
+  const [result, setResult] = useState<NeedleResponse | null>(null)
+
+  if (!isOpen) return null
+
+  const handleClassify = async () => {
+    if (!inputText.trim()) return
+    setLoading(true)
+    setResult(null)
+    try {
+      const resp = await authFetch("/api/needle/classify", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text: inputText }),
+      })
+      const data = await resp.json()
+      setResult(data)
+    } catch (err) {
+      setResult({ error: err instanceof Error ? err.message : String(err) })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-4 backdrop-blur-sm animate-fade-in">
+      <div className="relative flex flex-col w-full max-w-2xl rounded-2xl border border-emerald-500/30 bg-slate-950 p-6 shadow-2xl shadow-emerald-500/10 max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-white/10 pb-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-400">
+              <Cpu className="h-5 w-5" />
+            </div>
+            <div>
+              <h2 className="text-base font-bold text-slate-100 flex items-center gap-2">
+                Needle 3 AI Telemetry Classifier
+                <span className="rounded-full bg-emerald-500/20 border border-emerald-500/30 px-2 py-0.5 text-[10px] font-mono text-emerald-300">
+                  Cactus-Compute
+                </span>
+              </h2>
+              <p className="text-xs text-slate-400">
+                On-device ~35MB foundation model executing real-time tool calling and extraction on local CPU.
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg p-1.5 text-slate-400 hover:bg-white/10 hover:text-white transition-colors"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Preset Selector */}
+        <div className="mt-4">
+          <label className="text-[11px] font-bold uppercase tracking-wider text-slate-400">
+            Quick Telemetry Presets (from ClickHouse)
+          </label>
+          <div className="flex flex-wrap gap-2 mt-2">
+            {PRESETS.map((p) => (
+              <button
+                key={p.label}
+                type="button"
+                onClick={() => {
+                  setInputText(p.text)
+                  setResult(null)
+                }}
+                className={`rounded-lg border px-2.5 py-1 text-[11px] font-medium transition-all ${
+                  inputText === p.text
+                    ? "border-emerald-500 bg-emerald-500/20 text-emerald-200"
+                    : "border-white/10 bg-white/5 text-slate-300 hover:border-white/20 hover:bg-white/10"
+                }`}
+              >
+                {p.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Input Textarea */}
+        <div className="mt-4">
+          <label className="text-[11px] font-bold uppercase tracking-wider text-slate-400">
+            Telemetry Event / Log / Trace Summary
+          </label>
+          <textarea
+            value={inputText}
+            onChange={(e) => setInputText(e.target.value)}
+            rows={3}
+            className="mt-1.5 w-full rounded-xl border border-white/10 bg-black/50 p-3 font-mono text-xs text-slate-200 placeholder-slate-600 focus:border-emerald-500/50 focus:outline-none focus:ring-1 focus:ring-emerald-500/50"
+            placeholder="Type or paste telemetry event..."
+          />
+        </div>
+
+        {/* Classify Button */}
+        <div className="mt-3 flex justify-end">
+          <button
+            type="button"
+            onClick={handleClassify}
+            disabled={loading || !inputText.trim()}
+            className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-400 px-4 py-2 text-xs font-bold text-slate-950 transition-all hover:opacity-95 active:scale-95 disabled:opacity-50 shadow-lg shadow-emerald-500/20"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Classifying on CPU...
+              </>
+            ) : (
+              <>
+                <Sparkles className="h-4 w-4" />
+                Classify with Needle 3
+              </>
+            )}
+          </button>
+        </div>
+
+        {/* Results Area */}
+        {result && (
+          <div className="mt-5 rounded-xl border border-emerald-500/30 bg-emerald-950/20 p-4 space-y-3">
+            <div className="flex items-center justify-between border-b border-emerald-500/20 pb-3">
+              <div className="flex items-center gap-2">
+                {result.error ? (
+                  <AlertTriangle className="h-4 w-4 text-rose-400" />
+                ) : (
+                  <CheckCircle2 className="h-4 w-4 text-emerald-400" />
+                )}
+                <span className="text-xs font-bold uppercase tracking-wider text-slate-300">
+                  {result.error ? "Error" : "Triage Result"}
+                </span>
+                {result.action && (
+                  <span className="rounded-lg bg-emerald-500/25 border border-emerald-500/40 px-2 py-0.5 font-mono text-xs font-bold text-emerald-200">
+                    {result.action}
+                  </span>
+                )}
+              </div>
+              {result.confidence !== undefined && (
+                <div className="flex items-center gap-3 text-xs font-mono">
+                  <span className="text-slate-400">
+                    Confidence:{" "}
+                    <span className="font-bold text-emerald-300">
+                      {(result.confidence * 100).toFixed(0)}%
+                    </span>
+                  </span>
+                  {result.latency_ms !== undefined && (
+                    <span className="text-slate-500">({result.latency_ms}ms)</span>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {result.reasoning && (
+              <p className="text-xs text-slate-300 italic">
+                &ldquo;{result.reasoning}&rdquo;
+              </p>
+            )}
+
+            {result.arguments && Object.keys(result.arguments).length > 0 && (
+              <div className="space-y-1.5 pt-1">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400">
+                  Extracted Typed Arguments:
+                </span>
+                <div className="grid grid-cols-2 gap-2 font-mono text-xs">
+                  {Object.entries(result.arguments).map(([key, value]) => (
+                    <div
+                      key={key}
+                      className="rounded-lg border border-white/10 bg-black/40 p-2 text-slate-200 break-all"
+                    >
+                      <span className="text-slate-500">{key}: </span>
+                      <span className="text-emerald-300 font-semibold">{String(value)}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {result.error && (
+              <div className="rounded-lg bg-rose-500/10 border border-rose-500/20 p-3 text-xs text-rose-300">
+                {result.error}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}