Spaces:

RIsknox
/

LLM_Monitor

Runtime error

File size: 22,797 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>GenAI Shield — Data Flow</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07070f;--s1:#0f0f1a;--s2:#161625;--b:#1f1f35;
  --acc:#6c63ff;--grn:#00d4aa;--red:#ff4757;--ylw:#ffa502;
  --txt:#e0e0f0;--muted:#5a5a7a;
  --mono:'JetBrains Mono',monospace;--sans:'Inter',sans-serif;
}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* Header */
.hdr{padding:.75rem 1.5rem;border-bottom:1px solid var(--b);background:var(--s1);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.hdr-l{display:flex;align-items:center;gap:.75rem}
.hdr-icon{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--acc),var(--grn));display:flex;align-items:center;justify-content:center;font-size:1rem}
.hdr h1{font-size:.95rem;font-weight:700}
.hdr-sub{font-family:var(--mono);font-size:.58rem;color:var(--muted);text-transform:uppercase}
.hdr-r{display:flex;align-items:center;gap:.75rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--grn);box-shadow:0 0 6px var(--grn);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.nav-link{font-family:var(--mono);font-size:.6rem;padding:4px 10px;border:1px solid var(--b);border-radius:4px;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.nav-link:hover{color:var(--acc);border-color:var(--acc)}

/* Layout */
.layout{flex:1;display:grid;grid-template-columns:1fr 320px;overflow:hidden}

/* Pipeline canvas area */
.canvas-wrap{padding:1.5rem;display:flex;flex-direction:column;gap:1rem;overflow:hidden}
.section-title{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;color:var(--muted);letter-spacing:.08em;margin-bottom:.5rem}

/* Pipeline diagram */
.pipeline{background:var(--s1);border:1px solid var(--b);border-radius:12px;padding:1.5rem;flex-shrink:0}
.nodes{display:flex;align-items:center;gap:0;position:relative}

.node{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:1;position:relative;z-index:2}
.node-box{width:80px;height:80px;border-radius:12px;border:2px solid var(--b);background:var(--s2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;cursor:default;transition:border-color .3s,box-shadow .3s;position:relative}
.node-icon{font-size:1.4rem}
.node-lbl{font-family:var(--mono);font-size:.55rem;text-align:center;color:var(--muted);text-transform:uppercase;line-height:1.3}
.node-timer{font-family:var(--mono);font-size:.65rem;font-weight:700;color:var(--grn);min-height:1em;text-align:center}

/* Node state classes */
.node-box.active{border-color:var(--acc);box-shadow:0 0 16px rgba(108,99,255,.4)}
.node-box.done{border-color:var(--grn);box-shadow:0 0 12px rgba(0,212,170,.25)}
.node-box.blocked{border-color:var(--red);box-shadow:0 0 16px rgba(255,71,87,.4)}
.node-box.warn{border-color:var(--ylw)}

/* Connectors */
.connector{flex:1;height:2px;background:var(--b);position:relative;z-index:1;align-self:center;margin-top:-40px}
.connector-inner{height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--grn));transition:width .4s ease}
.connector.active .connector-inner{width:100%}
.connector.blocked .connector-inner{background:var(--red)}

/* Packet animation */
.packet{position:absolute;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);animation:travel .6s ease forwards;opacity:0}
@keyframes travel{0%{left:0;opacity:1}100%{left:100%;opacity:0}}
.packet.red{background:var(--red);box-shadow:0 0 8px var(--red)}
.packet.grn{background:var(--grn);box-shadow:0 0 8px var(--grn)}

/* Parallel row label */
.parallel-note{font-family:var(--mono);font-size:.58rem;color:var(--acc);text-align:center;margin-top:.75rem}

/* Metrics grid */
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.metric-card{background:var(--s1);border:1px solid var(--b);border-radius:10px;padding:.875rem;display:flex;flex-direction:column;gap:.25rem}
.metric-card.acc{border-color:rgba(108,99,255,.4)}
.metric-card.grn{border-color:rgba(0,212,170,.4)}
.metric-card.red{border-color:rgba(255,71,87,.4)}
.metric-card.ylw{border-color:rgba(255,165,2,.4)}
.metric-lbl{font-family:var(--mono);font-size:.55rem;text-transform:uppercase;color:var(--muted)}
.metric-val{font-family:var(--mono);font-size:1.5rem;font-weight:700;line-height:1}
.metric-sub{font-family:var(--mono);font-size:.58rem;color:var(--muted)}
.metric-card.acc .metric-val{color:var(--acc)}
.metric-card.grn .metric-val{color:var(--grn)}
.metric-card.red .metric-val{color:var(--red)}
.metric-card.ylw .metric-val{color:var(--ylw)}

/* Charts row */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;flex:1;min-height:0}
.chart-card{background:var(--s1);border:1px solid var(--b);border-radius:10px;padding:1rem;display:flex;flex-direction:column;min-height:0}
.chart-card canvas{flex:1;min-height:0}

/* Right panel */
.right-panel{border-left:1px solid var(--b);display:flex;flex-direction:column;overflow:hidden}
.rp-header{padding:.875rem 1rem;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.rp-title{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;color:var(--muted)}
.rp-count{font-family:var(--mono);font-size:.6rem;color:var(--acc)}
.event-log{flex:1;overflow-y:auto;padding:.5rem}
.event-log::-webkit-scrollbar{width:3px}
.event-log::-webkit-scrollbar-thumb{background:var(--b);border-radius:2px}

.evt{padding:.5rem .75rem;border-left:2px solid var(--b);margin-bottom:.375rem;border-radius:0 6px 6px 0;background:var(--s2);cursor:pointer;transition:border-color .2s}
.evt:hover{border-left-color:var(--acc)}
.evt-stage{font-family:var(--mono);font-size:.58rem;font-weight:700;text-transform:uppercase}
.evt-meta{font-family:var(--mono);font-size:.55rem;color:var(--muted);margin-top:2px}
.evt-detail{font-size:.7rem;color:var(--txt);margin-top:3px;word-break:break-all}

.evt.REQUEST_IN    {border-left-color:#6c63ff} .evt.REQUEST_IN .evt-stage{color:#6c63ff}
.evt.GUARD_START   {border-left-color:#a78bfa} .evt.GUARD_START .evt-stage{color:#a78bfa}
.evt.LLM_START     {border-left-color:#38bdf8} .evt.LLM_START .evt-stage{color:#38bdf8}
.evt.GUARD_PASS    {border-left-color:#00d4aa} .evt.GUARD_PASS .evt-stage{color:#00d4aa}
.evt.GUARD_BLOCK   {border-left-color:#ff4757} .evt.GUARD_BLOCK .evt-stage{color:#ff4757}
.evt.FIRST_TOKEN   {border-left-color:#00d4aa} .evt.FIRST_TOKEN .evt-stage{color:#00d4aa}
.evt.TOKEN_FLOW    {border-left-color:#22d3ee} .evt.TOKEN_FLOW .evt-stage{color:#22d3ee}
.evt.SENTENCE_READY{border-left-color:#a3e635} .evt.SENTENCE_READY .evt-stage{color:#a3e635}
.evt.MONITOR_START {border-left-color:#fbbf24} .evt.MONITOR_START .evt-stage{color:#fbbf24}
.evt.MONITOR_RESULT{border-left-color:#fb923c} .evt.MONITOR_RESULT .evt-stage{color:#fb923c}
.evt.STREAM_DONE   {border-left-color:#00d4aa} .evt.STREAM_DONE .evt-stage{color:#00d4aa}
.evt.REQUEST_DONE  {border-left-color:#6c63ff} .evt.REQUEST_DONE .evt-stage{color:#6c63ff}

/* Threat badge */
.tbadge{font-family:var(--mono);font-size:.52rem;font-weight:700;padding:1px 5px;border-radius:2px;display:inline-block}
.clean{background:rgba(0,212,170,.12);color:var(--grn);border:1px solid rgba(0,212,170,.3)}
.medium{background:rgba(255,165,2,.12);color:var(--ylw);border:1px solid rgba(255,165,2,.3)}
.high{background:rgba(255,71,87,.12);color:var(--red);border:1px solid rgba(255,71,87,.3)}

/* Empty state */
.empty-state{padding:2rem;text-align:center;color:var(--muted);font-family:var(--mono);font-size:.7rem}
</style>
</head>
<body>

<header class="hdr">
  <div class="hdr-l">
    <div class="hdr-icon">🌊</div>
    <div>
      <h1>Data Flow <span style="color:var(--acc)">Monitor</span></h1>
      <div class="hdr-sub">Real-time pipeline telemetry · Sidecar v2</div>
    </div>
  </div>
  <div class="hdr-r">
    <a class="nav-link" href="#" onclick="event.preventDefault(); window.location.href='/sidecar'+window.location.search;">← Chat</a>
    <a class="nav-link" href="#" onclick="event.preventDefault(); window.location.href='/genai-monitoring'+window.location.search;">SIEM</a>
    <div class="dot" id="conn-dot" title="Connecting..."></div>
  </div>
</header>

<div class="layout">

  <!-- Left: pipeline + metrics -->
  <div class="canvas-wrap">

    <!-- Pipeline diagram -->
    <div class="pipeline">
      <div class="section-title">Request Pipeline · Live</div>
      <div class="nodes" id="nodes">

        <!-- Client -->
        <div class="node">
          <div class="node-box" id="n-client">
            <div class="node-icon">👤</div>
            <div class="node-lbl">Client</div>
          </div>
          <div class="node-timer" id="t-client">—</div>
        </div>

        <div class="connector" id="c-gate"><div class="connector-inner"></div></div>

        <!-- Shield Gate -->
        <div class="node">
          <div class="node-box" id="n-gate">
            <div class="node-icon">🚪</div>
            <div class="node-lbl">Shield Gate</div>
          </div>
          <div class="node-timer" id="t-gate">—</div>
        </div>

        <!-- Fork: guard + LLM (shown as two sub-connectors) -->
        <div style="display:flex;flex-direction:column;gap:.25rem;flex:1.4">
          <div style="display:flex;align-items:center;gap:0">
            <div class="connector" id="c-guard" style="flex:1"><div class="connector-inner"></div></div>
            <div class="node">
              <div class="node-box" id="n-guard" style="width:68px;height:68px">
                <div class="node-icon" style="font-size:1.1rem">🛡️</div>
                <div class="node-lbl">Prompt Guard</div>
              </div>
              <div class="node-timer" id="t-guard">—</div>
            </div>
          </div>
          <div style="display:flex;align-items:center;gap:0">
            <div class="connector" id="c-llm" style="flex:1"><div class="connector-inner"></div></div>
            <div class="node">
              <div class="node-box" id="n-llm" style="width:68px;height:68px">
                <div class="node-icon" style="font-size:1.1rem">🤖</div>
                <div class="node-lbl">LLM API</div>
              </div>
              <div class="node-timer" id="t-llm">—</div>
            </div>
          </div>
          <div class="parallel-note">⚡ parallel</div>
        </div>

        <div class="connector" id="c-monitor"><div class="connector-inner"></div></div>

        <!-- Stream Monitor -->
        <div class="node">
          <div class="node-box" id="n-monitor">
            <div class="node-icon">🔍</div>
            <div class="node-lbl">Monitor</div>
          </div>
          <div class="node-timer" id="t-monitor">—</div>
        </div>

        <div class="connector" id="c-out"><div class="connector-inner"></div></div>

        <!-- Output -->
        <div class="node">
          <div class="node-box" id="n-out">
            <div class="node-icon">✅</div>
            <div class="node-lbl">Output</div>
          </div>
          <div class="node-timer" id="t-out">—</div>
        </div>

      </div>
    </div>

    <!-- Metrics -->
    <div>
      <div class="section-title">Session Metrics</div>
      <div class="metrics-grid">
        <div class="metric-card acc">
          <div class="metric-lbl">Total Requests</div>
          <div class="metric-val" id="m-total">0</div>
          <div class="metric-sub">since page load</div>
        </div>
        <div class="metric-card grn">
          <div class="metric-lbl">Avg Guard ms</div>
          <div class="metric-val" id="m-guard-avg">—</div>
          <div class="metric-sub">Prompt Guard latency</div>
        </div>
        <div class="metric-card ylw">
          <div class="metric-lbl">Avg TTFT ms</div>
          <div class="metric-val" id="m-ttft-avg">—</div>
          <div class="metric-sub">time to first token</div>
        </div>
        <div class="metric-card red">
          <div class="metric-lbl">Blocked</div>
          <div class="metric-val" id="m-blocked">0</div>
          <div class="metric-sub">pre/post inference</div>
        </div>
      </div>
    </div>

    <!-- Charts -->
    <div class="charts-row">
      <div class="chart-card">
        <div class="section-title">Guard Latency (ms) · last 20</div>
        <canvas id="chart-guard"></canvas>
      </div>
      <div class="chart-card">
        <div class="section-title">Total Request Time (ms) · last 20</div>
        <canvas id="chart-total"></canvas>
      </div>
    </div>

  </div>

  <!-- Right: event log -->
  <div class="right-panel">
    <div class="rp-header">
      <span class="rp-title">Pipeline Event Log</span>
      <span class="rp-count" id="evt-count">0 events</span>
    </div>
    <div class="event-log" id="event-log">
      <div class="empty-state" id="empty-msg">Waiting for requests…</div>
    </div>
  </div>

</div>

<script>
// ── State ──────────────────────────────────────────────────────────────────────
const state = {
  total: 0, blocked: 0,
  guardTimes: [], ttftTimes: [], totalTimes: [],
  reqStart: {}, guardStart: {}, llmStart: {},
};

// ── Chart setup ────────────────────────────────────────────────────────────────
const chartOpts = (color) => ({
  type: 'line',
  data: {
    labels: Array(20).fill(''),
    datasets: [{
      data: Array(20).fill(null),
      borderColor: color,
      backgroundColor: color + '18',
      borderWidth: 1.5,
      fill: true,
      tension: 0.4,
      pointRadius: 2,
      pointBackgroundColor: color,
    }]
  },
  options: {
    responsive: true, maintainAspectRatio: false, animation: false,
    scales: {
      x: { display: false },
      y: { min: 0, grid: { color: '#1f1f35' }, ticks: { color: '#5a5a7a', font: { family: 'JetBrains Mono', size: 9 } } }
    },
    plugins: { legend: { display: false } }
  }
});

const cGuard = new Chart(document.getElementById('chart-guard').getContext('2d'), chartOpts('#6c63ff'));
const cTotal = new Chart(document.getElementById('chart-total').getContext('2d'), chartOpts('#00d4aa'));

function pushChart(chart, val) {
  chart.data.datasets[0].data.push(val);
  chart.data.datasets[0].data.shift();
  chart.data.labels.push('');
  chart.data.labels.shift();
  chart.update('none');
}

// ── Node helpers ───────────────────────────────────────────────────────────────
function nodeState(id, cls) {
  const el = document.getElementById('n-' + id);
  if (!el) return;
  el.className = 'node-box ' + (cls || '');
}
function nodeTime(id, ms) {
  const el = document.getElementById('t-' + id);
  if (el) el.textContent = ms != null ? ms + 'ms' : '—';
}
function connActive(id, cls) {
  const el = document.getElementById('c-' + id);
  if (el) el.className = 'connector active ' + (cls || '');
}
function firePacket(connId, cls) {
  const conn = document.getElementById('c-' + connId);
  if (!conn) return;
  const p = document.createElement('div');
  p.className = 'packet ' + (cls || '');
  conn.style.position = 'relative';
  conn.appendChild(p);
  setTimeout(() => p.remove(), 700);
}
function resetPipeline() {
  ['client','gate','guard','llm','monitor','out'].forEach(id => nodeState(id, ''));
  ['client','gate','guard','llm','monitor','out'].forEach(id => nodeTime(id, null));
  ['gate','guard','llm','monitor','out'].forEach(id => {
    const el = document.getElementById('c-' + id);
    if (el) el.className = 'connector';
  });
  document.getElementById('n-out').querySelector('.node-icon').textContent = '✅';
}

// ── Metrics update ─────────────────────────────────────────────────────────────
function updateMetrics() {
  document.getElementById('m-total').textContent = state.total;
  document.getElementById('m-blocked').textContent = state.blocked;
  const avg = arr => arr.length ? Math.round(arr.slice(-20).reduce((a,b)=>a+b,0)/Math.min(arr.length,20)) : '—';
  document.getElementById('m-guard-avg').textContent = avg(state.guardTimes);
  document.getElementById('m-ttft-avg').textContent  = avg(state.ttftTimes);
}

// ── Event log ──────────────────────────────────────────────────────────────────
let evtCount = 0;
function logEvent(ev) {
  const log = document.getElementById('event-log');
  const empty = document.getElementById('empty-msg');
  if (empty) empty.remove();

  evtCount++;
  document.getElementById('evt-count').textContent = evtCount + ' events';

  const d = document.createElement('div');
  d.className = 'evt ' + ev.stage;

  let detail = '';
  if (ev.prompt_preview) detail = `"${ev.prompt_preview.slice(0,50)}"`;
  else if (ev.guard_ms)   detail = `Guard: ${ev.guard_ms}ms · PG: ${(ev.pg_score||0).toFixed(3)}`;
  else if (ev.ttft_ms)    detail = `TTFT: ${ev.ttft_ms}ms`;
  else if (ev.stream_ms)  detail = `Stream: ${ev.stream_ms}ms · ${ev.total_tokens||0} tokens`;
  else if (ev.total_ms)   detail = `Total: ${ev.total_ms}ms`;
  else if (ev.sentence_preview) detail = `"${ev.sentence_preview.slice(0,40)}"`;
  else if (ev.token_count) detail = `${ev.token_count} tokens`;

  const score = ev.threat_score;
  const badge = score >= 60 ? `<span class="tbadge high">HIGH ${score}</span>`
               : score >= 30 ? `<span class="tbadge medium">WARN ${score}</span>`
               : score > 0   ? `<span class="tbadge clean">CLEAN ${score}</span>` : '';

  d.innerHTML = `<div class="evt-stage">${ev.stage.replace(/_/g,' ')}</div>
    <div class="evt-meta">${ev.wall} · req ${ev.request_id} · +${ev.elapsed_ms}ms ${badge}</div>
    ${detail ? `<div class="evt-detail">${detail}</div>` : ''}`;

  log.prepend(d);
  if (log.children.length > 80) log.lastChild.remove();
}

// ── Pipeline stage handler ─────────────────────────────────────────────────────
function handleStage(ev) {
  logEvent(ev);
  const rid = ev.request_id;

  switch(ev.stage) {
    case 'REQUEST_IN':
      resetPipeline();
      state.reqStart[rid] = ev.elapsed_ms;
      nodeState('client', 'active');
      connActive('gate');
      firePacket('gate');
      nodeState('gate', 'active');
      break;

    case 'GUARD_START':
      state.guardStart[rid] = ev.elapsed_ms;
      nodeState('guard', 'active');
      connActive('guard');
      firePacket('guard');
      break;

    case 'LLM_START':
      state.llmStart[rid] = ev.elapsed_ms;
      nodeState('llm', 'active');
      connActive('llm');
      firePacket('llm');
      break;

    case 'GUARD_PASS':
      nodeState('guard', 'done');
      nodeTime('guard', ev.guard_ms);
      state.guardTimes.push(ev.guard_ms);
      pushChart(cGuard, ev.guard_ms);
      updateMetrics();
      break;

    case 'GUARD_BLOCK':
      state.total++;
      state.blocked++;
      nodeState('guard', 'blocked');
      nodeTime('guard', ev.guard_ms);
      nodeState('gate',  'blocked');
      nodeState('llm',   'blocked');
      nodeState('out',   'blocked');
      document.getElementById('n-out').querySelector('.node-icon').textContent = '🚫';
      state.guardTimes.push(ev.guard_ms);
      pushChart(cGuard, ev.guard_ms);
      updateMetrics();
      break;

    case 'FIRST_TOKEN':
      nodeState('llm', 'done');
      nodeTime('llm', ev.ttft_ms);
      state.ttftTimes.push(ev.ttft_ms);
      updateMetrics();
      break;

    case 'TOKEN_FLOW':
      firePacket('monitor', 'grn');
      break;

    case 'SENTENCE_READY':
      connActive('monitor');
      firePacket('monitor', 'grn');
      nodeState('monitor', 'active');
      break;

    case 'MONITOR_START':
      nodeState('monitor', 'active');
      break;

    case 'MONITOR_RESULT':
      if (ev.blocked) {
        nodeState('monitor', 'blocked');
        nodeState('out', 'blocked');
        document.getElementById('n-out').querySelector('.node-icon').textContent = '🚫';
      } else {
        nodeState('monitor', 'done');
      }
      break;

    case 'STREAM_DONE':
      nodeState('llm', 'done');
      nodeTime('llm', ev.stream_ms);
      break;

    case 'REQUEST_DONE':
      state.total++;
      if (ev.blocked) state.blocked++;
      nodeState('client', 'done');
      nodeState('gate', 'done');
      if (!ev.blocked) {
        nodeState('monitor', 'done');
        nodeState('out', 'done');
        connActive('out', 'grn');
        firePacket('out', 'grn');
      }
      nodeTime('out', ev.total_ms);
      nodeTime('client', ev.total_ms);
      state.totalTimes.push(ev.total_ms);
      pushChart(cTotal, ev.total_ms);
      updateMetrics();
      break;
  }
}

// ── SSE connection ─────────────────────────────────────────────────────────────
function connect() {
  const dot = document.getElementById('conn-dot');
  dot.style.background = 'var(--ylw)';
  dot.style.boxShadow  = '0 0 6px var(--ylw)';

  // Try sidecar direct first, fall back to current host
  const url = '/v1/pipeline-stream';
  const es = new EventSource(url);

  es.onopen = () => {
    dot.style.background = 'var(--grn)';
    dot.style.boxShadow  = '0 0 6px var(--grn)';
    dot.title = 'Connected';
  };

  es.onmessage = e => {
    if (!e.data || e.data.startsWith(':')) return;
    try { handleStage(JSON.parse(e.data)); } catch {}
  };

  es.onerror = () => {
    dot.style.background = 'var(--red)';
    dot.style.boxShadow  = '0 0 6px var(--red)';
    dot.title = 'Disconnected — retrying';
    es.close();
    setTimeout(connect, 3000);
  };
}

connect();
</script>
</body>
</html>