tum
/
soc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809
							<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SOC Integrator Admin</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link rel="stylesheet" href="/ui/assets/styles.css?v=20260303-17" />
    <script src="/ui/assets/app.js?v=20260303-17"></script>
  </head>
  <body class="bg-slate-100 text-slate-800" x-data="socUi()" x-init="init()">
    <div class="mx-auto w-full max-w-none px-3 py-4 md:px-5 md:py-6">
      <header class="admin-card mb-4">
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
          <div>
            <h1 class="text-2xl font-bold tracking-tight">SOC Integrator Admin Console</h1>
            <p class="mt-1 text-sm text-slate-500">Internal operations UI for monitoring, IOC, IRIS, Shuffle, Wazuh, and MVP workflows.</p>
          </div>
          <div class="flex flex-wrap items-center gap-2 text-sm">
            <span class="status-pill" :class="overview.health ? 'status-ok' : 'status-warn'" x-text="overview.health ? 'API reachable' : 'API not checked'"></span>
            <a class="link-chip" href="/docs" target="_blank" rel="noreferrer">Swagger</a>
            <a class="link-chip" href="/openapi.json" target="_blank" rel="noreferrer">OpenAPI</a>
            <a class="link-chip" href="/health" target="_blank" rel="noreferrer">Health</a>
          </div>
        </div>
      </header>

      <section class="admin-card mb-4">
        <h2 class="panel-title">Connection</h2>
        <div class="grid gap-3 md:grid-cols-3">
          <label class="text-sm md:col-span-1">
            <span class="input-label">API Base URL</span>
            <input x-model="apiBase" class="input" />
          </label>
          <label class="text-sm md:col-span-2">
            <span class="input-label">Internal API Key (memory only)</span>
            <input x-model="internalApiKey" type="password" placeholder="dev-internal-key" class="input" />
          </label>
        </div>
      </section>

      <section x-show="errorMessage" x-cloak class="mb-4 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700">
        <strong>Error:</strong> <span x-text="errorMessage"></span>
      </section>

      <div class="grid gap-4 lg:grid-cols-[200px,minmax(0,1fr)]">
        <aside class="admin-card h-fit p-2">
          <nav class="flex flex-row gap-2 overflow-x-auto md:flex-col md:overflow-visible">
            <template x-for="item in tabs" :key="item.key">
              <button class="tab-btn" :class="tabClass(item.key)" @click="activeTab = item.key" x-text="item.label"></button>
            </template>
          </nav>
        </aside>

        <main class="min-w-0 space-y-4">
          <section x-show="activeTab === 'overview'" x-cloak class="admin-card">
            <div class="action-row">
              <button class="btn btn-primary" @click="loadHealth()">Refresh Health</button>
              <button class="btn btn-neutral" @click="loadAutoSync()">Refresh Auto Sync</button>
            </div>
            <div class="grid gap-4 lg:grid-cols-2">
              <div class="panel-block">
                <h3 class="panel-subtitle">Health</h3>
                <pre class="json-box" x-text="pretty(overview.health)"></pre>
                <div class="table-wrap mt-2" x-show="keyValueRows(overview.health).length">
                  <table class="data-table">
                    <thead><tr><th>Field</th><th>Value</th></tr></thead>
                    <tbody>
                      <template x-for="row in keyValueRows(overview.health)" :key="row.key">
                        <tr><td x-text="row.key"></td><td x-text="row.value"></td></tr>
                      </template>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="panel-block">
                <h3 class="panel-subtitle">Auto Sync</h3>
                <pre class="json-box" x-text="pretty(overview.autoSync)"></pre>
                <div class="table-wrap mt-2" x-show="keyValueRows(overview.autoSync).length">
                  <table class="data-table">
                    <thead><tr><th>Field</th><th>Value</th></tr></thead>
                    <tbody>
                      <template x-for="row in keyValueRows(overview.autoSync)" :key="row.key">
                        <tr><td x-text="row.key"></td><td x-text="row.value"></td></tr>
                      </template>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </section>

          <section x-show="activeTab === 'systems'" x-cloak class="admin-card space-y-4">
            <div class="panel-block">
              <div class="mb-2 flex flex-wrap items-center gap-2">
                <h3 class="panel-subtitle mb-0">Systems Monitor</h3>
                <button class="btn btn-primary" @click="loadSystemsMonitor()">Refresh Now</button>
                <button class="btn btn-ghost" @click="systemsTogglePaused()" x-text="systemsMonitor.paused ? 'Resume' : 'Pause'"></button>
                <span class="text-xs text-slate-500" x-text="systemsMonitor.loading ? 'Loading...' : 'Idle'"></span>
                <span class="text-xs text-slate-500" x-text="systemsMonitor.lastRefreshAt ? `Last refresh: ${systemsMonitor.lastRefreshAt}` : 'Not refreshed yet'"></span>
              </div>
            <div class="grid gap-3 md:grid-cols-4">
                <label class="text-sm">
                  <span class="input-label">Minutes</span>
                  <input class="input" type="number" min="1" x-model.number="systemsMonitor.minutes" />
                </label>
                <label class="text-sm">
                  <span class="input-label">Limit</span>
                  <input class="input" type="number" min="1" x-model.number="systemsMonitor.limit" />
                </label>
                <label class="text-sm">
                  <span class="input-label">Auto refresh</span>
                  <select class="input" :value="systemsMonitor.autoRefresh ? 'true' : 'false'" @change="systemsSetAutoRefresh($event.target.value === 'true')">
                    <option value="true">true</option>
                    <option value="false">false</option>
                  </select>
                </label>
                <label class="text-sm">
                  <span class="input-label">Interval (seconds)</span>
                  <select class="input" :value="String(systemsMonitor.intervalSeconds)" @change="systemsSetInterval($event.target.value)">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                  </select>
                </label>
              </div>
            </div>

            <div class="panel-block">
              <h3 class="panel-subtitle">Run Sim Logs</h3>
              <div class="grid gap-3 md:grid-cols-3 lg:grid-cols-6">
                <label class="text-sm">
                  <span class="input-label">Script</span>
                  <select class="input" x-model="simLogs.form.script">
                    <option value="fortigate">fortigate</option>
                    <option value="endpoint">endpoint</option>
                    <option value="cisco">cisco</option>
                    <option value="proposal_required">proposal_required</option>
                    <option value="proposal_appendix_b">proposal_appendix_b</option>
                    <option value="proposal_appendix_c">proposal_appendix_c</option>
                    <option value="wazuh_test">wazuh_test</option>
                  </select>
                </label>
                <label class="text-sm">
                  <span class="input-label">Target</span>
                  <input class="input" x-model="simLogs.form.target" placeholder="all" />
                </label>
                <label class="text-sm" x-show="simScriptUsesScenario()">
                  <span class="input-label">Scenario</span>
                  <input class="input" x-model="simLogs.form.scenario" placeholder="all" />
                </label>
                <label class="text-sm">
                  <span class="input-label">Count</span>
                  <input class="input" type="number" min="1" x-model.number="simLogs.form.count" />
                </label>
                <label class="text-sm">
                  <span class="input-label">Delay (s)</span>
                  <input class="input" type="number" min="0" step="0.1" x-model.number="simLogs.form.delay_seconds" />
                </label>
                <label class="text-sm">
                  <span class="input-label">Forever</span>
                  <select class="input" x-model="simLogs.form.forever">
                    <option :value="false">false</option>
                    <option :value="true">true</option>
                  </select>
                </label>
              </div>
              <div class="action-row mt-2">
                <button class="btn btn-primary" @click="startSimRun()">Start</button>
                <button class="btn btn-neutral" @click="loadSimRuns()">Refresh Runs</button>
                <button class="btn btn-danger" @click="stopRunningSimRuns()">Stop Running</button>
                <button class="btn btn-ghost" @click="loadSimOutput()">Refresh Logs</button>
              </div>
              <pre class="json-box mt-2" x-text="pretty(simLogs.startResult)"></pre>
              <div class="table-wrap mt-2" x-show="simRunRows().length">
                <table class="data-table">
                  <thead>
                    <tr>
                      <template x-for="col in tableColumns(simRunRows())" :key="col">
                        <th x-text="col"></th>
                      </template>
                      <th>Logs</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="(row, idx) in simRunRows()" :key="idx">
                      <tr>
                        <template x-for="col in tableColumns(simRunRows())" :key="col">
                          <td x-text="cellText(row[col])"></td>
                        </template>
                        <td>
                          <button class="btn btn-ghost" @click="selectSimRun(row.run_id)">View</button>
                        </td>
                        <td>
                          <button class="btn btn-danger" x-show="row.running" @click="stopSimRun(row.run_id)">Stop</button>
                        </td>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
              <div class="mt-3 rounded-lg border border-slate-200 bg-white p-3" x-show="simLogs.selectedRunId">
                <div class="mb-2 flex flex-wrap items-center gap-2">
                  <h4 class="panel-mini-title mb-0">Run Output</h4>
                  <span class="text-xs text-slate-600" x-text="`run_id: ${simLogs.selectedRunId}`"></span>
                  <span class="status-pill" :class="simSelectedRun() && simSelectedRun().running ? 'status-ok' : 'status-warn'" x-text="simSelectedRun() && simSelectedRun().running ? 'running' : 'stopped'"></span>
                </div>
                <div class="grid gap-3 md:grid-cols-3">
                  <label class="text-sm">
                    <span class="input-label">Tail lines</span>
                    <input class="input" type="number" min="10" max="1000" x-model.number="simLogs.outputLimit" />
                  </label>
                  <label class="text-sm">
                    <span class="input-label">Auto refresh logs</span>
                    <select class="input" x-model="simLogs.autoRefresh" @change="startSimLogsAutoRefresh()">
                      <option :value="true">true</option>
                      <option :value="false">false</option>
                    </select>
                  </label>
                  <label class="text-sm">
                    <span class="input-label">Interval (seconds)</span>
                    <input class="input" type="number" min="2" max="60" x-model.number="simLogs.intervalSeconds" @change="startSimLogsAutoRefresh()" />
                  </label>
                </div>
                <pre class="json-box mt-2" x-text="unwrapApiData(simLogs.output)?.text || 'No logs yet'"></pre>
              </div>

              <div class="mt-3 rounded-lg border border-slate-200 bg-white p-3" x-show="simLogs.selectedRunId">
                <div class="mb-2 flex flex-wrap items-center gap-2">
                  <h4 class="panel-mini-title mb-0">Wazuh Live Correlation</h4>
                  <span class="text-xs text-slate-600" x-text="`run_id: ${simLogs.selectedRunId}`"></span>
                  <span class="status-pill status-ok">auto refresh every 5s</span>
                </div>
                <div class="grid gap-3 md:grid-cols-2">
                  <div class="text-sm">
                    <span class="input-label">Records</span>
                    <div class="input">Latest 100 (no filter)</div>
                  </div>
                  <div class="action-row mt-6">
                    <button class="btn btn-neutral" @click="loadSimWazuhLatest()">Refresh Wazuh</button>
                  </div>
                </div>
                <div class="mt-2">
                  <label class="text-sm inline-flex items-center gap-2">
                    <input type="checkbox" x-model="simWazuh.showQuery" />
                    <span>Show query used</span>
                  </label>
                </div>
                <pre class="json-box mt-2" x-show="simWazuh.showQuery" x-text="pretty(unwrapApiData(simWazuh.latest)?.query || null)"></pre>
                <div class="mt-2">
                  <div>
                    <h5 class="panel-mini-title">Latest Event Logs</h5>
                    <div class="table-wrap mt-2" x-show="simWazuhEventTableRows().length">
                      <table class="data-table">
                        <thead>
                          <tr>
                            <th>Time</th>
                            <th>rule.id</th>
                            <th>rule.description</th>
                            <th>full_log</th>
                          </tr>
                        </thead>
                        <tbody>
                          <template x-for="(row, idx) in simWazuhEventTableRows()" :key="idx">
                            <tr>
                              <td x-text="cellText(row.time)"></td>
                              <td x-text="cellText(row.rule_id)"></td>
                              <td x-text="cellText(row.rule_description)"></td>
                              <td><pre class="text-xs whitespace-pre-wrap" x-text="fullLogAsJsonText(row.full_log)"></pre></td>
                            </tr>
                          </template>
                        </tbody>
                      </table>
                    </div>
                    <div class="text-xs text-slate-500" x-show="!simWazuhEventTableRows().length">No events found for selected run yet.</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="grid gap-3 lg:grid-cols-4">
              <template x-for="meta in systemsCardMeta" :key="meta.key">
                <div class="panel-block">
                  <div class="mb-2 flex items-center justify-between">
                    <h4 class="panel-mini-title" x-text="meta.label"></h4>
                    <span class="status-pill" :class="systemsStatusClass(systemsCard(meta.key).status || 'down')" x-text="systemsCard(meta.key).status || 'down'"></span>
                  </div>
                  <div class="text-xs text-slate-600">Latency: <span x-text="cellText(systemsCard(meta.key).latency_ms)"></span> ms</div>
                  <div class="text-xs text-slate-600">Last OK: <span x-text="cellText(systemsCard(meta.key).last_ok_at)"></span></div>
                  <div class="mt-1 text-xs text-rose-700" x-show="systemsCard(meta.key).last_error" x-text="`Error: ${systemsCard(meta.key).last_error}`"></div>
                </div>
              </template>
            </div>

            <div class="panel-block">
              <h3 class="panel-subtitle">Incident Pipeline KPIs</h3>
              <div class="table-wrap mt-2" x-show="systemsPipelineRows().length">
                <table class="data-table">
                  <thead><tr><th>KPI</th><th>Value</th></tr></thead>
                  <tbody>
                    <template x-for="row in systemsPipelineRows()" :key="row.key">
                      <tr><td x-text="row.key"></td><td x-text="row.value"></td></tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="grid gap-3 lg:grid-cols-2">
              <template x-for="meta in systemsCardMeta" :key="`table-${meta.key}`">
                <div class="panel-block">
                  <h3 class="panel-subtitle" x-text="`${meta.label} Recent Data`"></h3>
                  <div class="table-wrap mt-2" x-show="systemsRecentRows(meta.key).length">
                    <table class="data-table">
                      <thead>
                        <tr>
                          <template x-for="col in systemsRecentColumns(meta.key)" :key="col">
                            <th x-text="col"></th>
                          </template>
                        </tr>
                      </thead>
                      <tbody>
                        <template x-for="(row, idx) in systemsRecentRows(meta.key)" :key="idx">
                          <tr>
                            <template x-for="col in systemsRecentColumns(meta.key)" :key="col">
                              <td x-text="cellText(row[col])"></td>
                            </template>
                          </tr>
                        </template>
                      </tbody>
                    </table>
                  </div>
                  <div class="text-xs text-slate-500" x-show="!systemsRecentRows(meta.key).length">No recent rows</div>
                </div>
              </template>
            </div>
          </section>

          <section x-show="activeTab === 'monitoring'" x-cloak class="admin-card space-y-4">
            <div class="panel-block">
              <div class="mb-2 flex flex-wrap items-center gap-2">
                <h3 class="panel-subtitle mb-0">Log Loss Check</h3>
                <button class="btn btn-ghost" @click="applyLogLossPreset('default')">Default</button>
                <button class="btn btn-ghost" @click="applyLogLossPreset('b2')">B2 only</button>
              </div>
              <div class="grid gap-3 md:grid-cols-4">
                <label class="text-sm">
                  <span class="input-label">Minutes</span>
                  <input x-model.number="logLossForm.minutes" type="number" min="1" class="input" />
                </label>
                <label class="text-sm md:col-span-3">
                  <span class="input-label">Create IRIS Ticket</span>
                  <select x-model="logLossForm.createTicket" class="input">
                    <option :value="false">false</option>
                    <option :value="true">true</option>
                  </select>
                </label>
              </div>
              <template x-for="(stream, index) in logLossForm.streams" :key="index">
                <div class="mt-3 grid gap-3 rounded-lg border border-slate-200 bg-white p-3 md:grid-cols-12">
                  <input x-model="stream.name" placeholder="stream name" class="input md:col-span-2" />
                  <input x-model="stream.query" placeholder="query string" class="input md:col-span-8" />
                  <input x-model.number="stream.min_count" type="number" min="0" class="input md:col-span-1" />
                  <button class="btn btn-danger md:col-span-1" @click="removeLogLossStream(index)">Remove</button>
                </div>
              </template>
              <div class="action-row mt-3">
                <button class="btn btn-ghost" @click="addLogLossStream()">Add Stream</button>
                <button class="btn btn-primary" @click="runLogLossCheck()">Run Check</button>
              </div>
              <pre class="json-box mt-2" x-text="pretty(logLoss.result)"></pre>
              <div class="table-wrap mt-2" x-show="extractRows(logLoss.result).length">
                <table class="data-table">
                  <thead>
                    <tr>
                      <template x-for="col in tableColumns(extractRows(logLoss.result))" :key="col">
                        <th x-text="col"></th>
                      </template>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="(row, idx) in extractRows(logLoss.result)" :key="idx">
                      <tr>
                        <template x-for="col in tableColumns(extractRows(logLoss.result))" :key="col">
                          <td x-text="cellText(row[col])"></td>
                        </template>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="panel-block">
              <h3 class="panel-subtitle">Appendix C Detections</h3>
              <div class="action-row">
                <button class="btn btn-neutral" @click="loadCState()">Refresh State</button>
                <button class="btn btn-primary" @click="runCEvaluate()">Run Evaluate</button>
                <button class="btn btn-ghost" @click="loadCHistory()">Load History</button>
              </div>
              <div class="grid gap-3 md:grid-cols-3">
                <label class="text-sm"><span class="input-label">Minutes</span><input x-model.number="cEvalForm.minutes" type="number" min="1" class="input" /></label>
                <label class="text-sm"><span class="input-label">Limit</span><input x-model.number="cEvalForm.limit" type="number" min="1" class="input" /></label>
                <label class="text-sm"><span class="input-label">Dry run</span><select x-model="cEvalForm.dry_run" class="input"><option :value="true">true</option><option :value="false">false</option></select></label>
              </div>
              <label class="mt-2 block text-sm"><span class="input-label">Query</span><input x-model="cEvalForm.query" class="input" /></label>
              <label class="mt-2 block text-sm"><span class="input-label">Selectors (comma-separated)</span><input x-model="cEvalForm.selectorsText" class="input" /></label>
              <div class="mt-3 grid gap-3 lg:grid-cols-3">
                <div><h4 class="panel-mini-title">State</h4><pre class="json-box" x-text="pretty(cDetections.state)"></pre></div>
                <div><h4 class="panel-mini-title">Evaluate</h4><pre class="json-box" x-text="pretty(cDetections.evaluate)"></pre></div>
                <div><h4 class="panel-mini-title">History</h4><pre class="json-box" x-text="pretty(cDetections.history)"></pre></div>
              </div>
              <div class="table-wrap mt-2" x-show="extractRows(cDetections.evaluate).length">
                <table class="data-table">
                  <thead>
                    <tr>
                      <template x-for="col in tableColumns(extractRows(cDetections.evaluate))" :key="col">
                        <th x-text="col"></th>
                      </template>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="(row, idx) in extractRows(cDetections.evaluate)" :key="idx">
                      <tr>
                        <template x-for="col in tableColumns(extractRows(cDetections.evaluate))" :key="col">
                          <td x-text="cellText(row[col])"></td>
                        </template>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
              <div class="table-wrap mt-2" x-show="extractRows(cDetections.history).length">
                <table class="data-table">
                  <thead>
                    <tr>
                      <template x-for="col in tableColumns(extractRows(cDetections.history))" :key="col">
                        <th x-text="col"></th>
                      </template>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="(row, idx) in extractRows(cDetections.history)" :key="idx">
                      <tr>
                        <template x-for="col in tableColumns(extractRows(cDetections.history))" :key="col">
                          <td x-text="cellText(row[col])"></td>
                        </template>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>
          </section>

          <section x-show="activeTab === 'ioc'" x-cloak class="admin-card space-y-4">
            <div class="panel-block">
              <h3 class="panel-subtitle">IOC Enrich / Evaluate</h3>
              <div class="grid gap-3 md:grid-cols-4">
                <label class="text-sm"><span class="input-label">Type</span><select x-model="iocForm.ioc_type" class="input"><option>ip</option><option>domain</option><option>hash</option><option>url</option></select></label>
                <label class="text-sm md:col-span-2"><span class="input-label">IOC Value</span><input x-model="iocForm.ioc_value" class="input" /></label>
                <label class="text-sm"><span class="input-label">Providers</span><input x-model="iocForm.providersText" class="input" placeholder="virustotal,abuseipdb" /></label>
              </div>
              <div class="grid gap-3 md:grid-cols-2">
                <label class="text-sm"><span class="input-label">Malicious threshold</span><input x-model.number="iocForm.malicious_threshold" type="number" min="0" class="input" /></label>
                <label class="text-sm"><span class="input-label">Suspicious threshold</span><input x-model.number="iocForm.suspicious_threshold" type="number" min="0" class="input" /></label>
              </div>
              <div class="action-row">
                <button class="btn btn-primary" @click="runIocEnrich()">Enrich</button>
                <button class="btn btn-neutral" @click="runIocEvaluate()">Evaluate</button>
                <button class="btn btn-ghost" @click="loadIocHistory()">History</button>
              </div>
              <div class="grid gap-3 lg:grid-cols-3">
                <div><h4 class="panel-mini-title">Enrich</h4><pre class="json-box" x-text="pretty(ioc.enrich)"></pre></div>
                <div><h4 class="panel-mini-title">Evaluate</h4><pre class="json-box" x-text="pretty(ioc.evaluate)"></pre></div>
                <div><h4 class="panel-mini-title">History</h4><pre class="json-box" x-text="pretty(ioc.history)"></pre></div>
              </div>
              <div class="table-wrap mt-2" x-show="extractRows(ioc.history).length">
                <table class="data-table">
                  <thead>
                    <tr>
                      <template x-for="col in tableColumns(extractRows(ioc.history))" :key="col">
                        <th x-text="col"></th>
                      </template>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="(row, idx) in extractRows(ioc.history)" :key="idx">
                      <tr>
                        <template x-for="col in tableColumns(extractRows(ioc.history))" :key="col">
                          <td x-text="cellText(row[col])"></td>
                        </template>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="panel-block">
              <h3 class="panel-subtitle">File IOC (VirusTotal)</h3>
              <div class="grid gap-3 md:grid-cols-4">
                <label class="text-sm md:col-span-2"><span class="input-label">File</span><input type="file" @change="onFileSelected($event)" class="input" /></label>
                <label class="text-sm"><span class="input-label">Poll timeout (s)</span><input x-model.number="iocFileForm.poll_timeout_seconds" type="number" min="1" class="input" /></label>
                <label class="text-sm"><span class="input-label">Poll interval (s)</span><input x-model.number="iocFileForm.poll_interval_seconds" type="number" min="1" class="input" /></label>
              </div>
              <div class="action-row">
                <button class="btn btn-primary" @click="uploadIocFile()">Upload</button>
                <button class="btn btn-neutral" @click="evaluateIocFile()">Evaluate File</button>
              </div>
              <label class="text-sm mt-2 block"><span class="input-label">Analysis ID</span><input x-model="iocFileForm.analysis_id" class="input" /></label>
              <button class="btn btn-ghost mt-2" @click="getIocAnalysis()">Get Analysis</button>
              <div class="grid gap-3 lg:grid-cols-3 mt-2">
                <div><h4 class="panel-mini-title">Upload</h4><pre class="json-box" x-text="pretty(ioc.upload)"></pre></div>
                <div><h4 class="panel-mini-title">Analysis</h4><pre class="json-box" x-text="pretty(ioc.analysis)"></pre></div>
                <div><h4 class="panel-mini-title">Evaluate File</h4><pre class="json-box" x-text="pretty(ioc.fileEval)"></pre></div>
              </div>
              <div class="table-wrap mt-2" x-show="extractRows(ioc.analysis).length">
                <table class="data-table">
                  <thead>
                    <tr>
                      <template x-for="col in tableColumns(extractRows(ioc.analysis))" :key="col">
                        <th x-text="col"></th>
                      </template>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="(row, idx) in extractRows(ioc.analysis)" :key="idx">
                      <tr>
                        <template x-for="col in tableColumns(extractRows(ioc.analysis))" :key="col">
                          <td x-text="cellText(row[col])"></td>
                        </template>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>
          </section>

          <section x-show="activeTab === 'geoip'" x-cloak class="admin-card space-y-4">
            <div class="panel-block">
              <h3 class="panel-subtitle">GeoIP Lookup</h3>
              <div class="grid gap-3 md:grid-cols-3">
                <label class="text-sm md:col-span-2">
                  <span class="input-label">IP Address</span>
                  <input x-model="geoip.ip" class="input" placeholder="8.8.8.8" />
                </label>
                <div class="action-row mt-6">
                  <button class="btn btn-primary" @click="lookupGeoIp()">Lookup</button>
                </div>
              </div>
              <pre class="json-box mt-2" x-text="pretty(geoip.result)"></pre>
              <div class="table-wrap mt-2" x-show="keyValueRows(unwrapApiData(geoip.result)?.geoip || {}).length">
                <table class="data-table">
                  <thead><tr><th>Field</th><th>Value</th></tr></thead>
                  <tbody>
                    <template x-for="row in keyValueRows(unwrapApiData(geoip.result)?.geoip || {})" :key="row.key">
                      <tr><td x-text="row.key"></td><td x-text="row.value"></td></tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>
          </section>

          <section x-show="activeTab === 'iris'" x-cloak class="admin-card space-y-4">
            <div class="panel-block">
              <h3 class="panel-subtitle">Create IRIS Ticket</h3>
              <div class="grid gap-3 md:grid-cols-2">
                <label class="text-sm"><span class="input-label">Title</span><input x-model="irisForm.title" class="input" /></label>
                <label class="text-sm"><span class="input-label">Description</span><input x-model="irisForm.description" class="input" /></label>
                <label class="text-sm"><span class="input-label">Customer ID</span><input x-model.number="irisForm.case_customer" type="number" class="input" /></label>
                <label class="text-sm"><span class="input-label">SOC ID</span><input x-model="irisForm.case_soc_id" class="input" /></label>
              </div>
              <button class="btn btn-primary mt-2" @click="createIrisTicket()">Create Ticket</button>
              <pre class="json-box mt-2" x-text="pretty(iris.create)" ></pre>
            </div>
            <div class="panel-block">
              <h3 class="panel-subtitle">List IRIS Tickets</h3>
              <div class="action-row">
                <label class="text-sm">Limit <input x-model.number="irisList.limit" type="number" min="1" class="input inline-input" /></label>
                <label class="text-sm">Offset <input x-model.number="irisList.offset" type="number" min="0" class="input inline-input" /></label>
                <button class="btn btn-neutral" @click="loadIrisTickets()">Load</button>
              </div>
              <pre class="json-box" x-text="pretty(iris.list)"></pre>
              <div class="table-wrap mt-2" x-show="extractRows(iris.list).length">
                <table class="data-table">
                  <thead>
                    <tr>
                      <template x-for="col in tableColumns(extractRows(iris.list))" :key="col">
                        <th x-text="col"></th>
                      </template>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="(row, idx) in extractRows(iris.list)" :key="idx">
                      <tr>
                        <template x-for="col in tableColumns(extractRows(iris.list))" :key="col">
                          <td x-text="cellText(row[col])"></td>
                        </template>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>
          </section>

          <section x-show="activeTab === 'shuffle'" x-cloak class="admin-card space-y-4">
            <div class="panel-block">
              <h3 class="panel-subtitle">Shuffle Status</h3>
              <div class="action-row">
                <button class="btn btn-primary" @click="loadShuffleHealth()">Health</button>
                <button class="btn btn-neutral" @click="loadShuffleAuth()">Auth Test</button>
                <button class="btn btn-ghost" @click="loadShuffleApps()">Apps</button>
                <button class="btn btn-ghost" @click="loadShuffleWorkflows()">Workflows</button>
              </div>
              <div class="grid gap-3 lg:grid-cols-2">
                <div><h4 class="panel-mini-title">Health/Auth</h4><pre class="json-box" x-text="pretty(shuffle.status)"></pre></div>
                <div><h4 class="panel-mini-title">Apps/Workflows</h4><pre class="json-box" x-text="pretty(shuffle.catalog)"></pre></div>
              </div>
              <div class="table-wrap mt-2" x-show="extractRows(shuffle.catalog).length">
                <table class="data-table">
                  <thead>
                    <tr>
                      <template x-for="col in tableColumns(extractRows(shuffle.catalog))" :key="col">
                        <th x-text="col"></th>
                      </template>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="(row, idx) in extractRows(shuffle.catalog)" :key="idx">
                      <tr>
                        <template x-for="col in tableColumns(extractRows(shuffle.catalog))" :key="col">
                          <td x-text="cellText(row[col])"></td>
                        </template>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="panel-block">
              <h3 class="panel-subtitle">Execute Workflow</h3>
              <label class="text-sm"><span class="input-label">Workflow ID</span><input x-model="shuffleExec.workflow_id" class="input" /></label>
              <label class="text-sm mt-2 block"><span class="input-label">Payload (JSON)</span><textarea x-model="shuffleExec.payloadText" class="input code-input" rows="6"></textarea></label>
              <button class="btn btn-primary mt-2" @click="executeShuffleWorkflow()">Execute</button>
              <pre class="json-box mt-2" x-text="pretty(shuffle.execute)"></pre>
            </div>
          </section>

          <section x-show="activeTab === 'wazuh'" x-cloak class="admin-card space-y-4">
            <div class="panel-block">
              <h3 class="panel-subtitle">Wazuh Status</h3>
              <div class="action-row">
                <button class="btn btn-primary" @click="wazuhCall('auth')">Auth Test</button>
                <button class="btn btn-neutral" @click="wazuhCall('manager')">Manager Info</button>
                <button class="btn btn-ghost" @click="wazuhCall('version')">Version</button>
                <button class="btn btn-ghost" @click="wazuhCall('autosync')">Auto Sync</button>
              </div>
              <pre class="json-box" x-text="pretty(wazuh.status)"></pre>
            </div>
            <div class="panel-block">
              <h3 class="panel-subtitle">Wazuh Data</h3>
              <div class="action-row">
                <label class="text-sm">Limit <input x-model.number="wazuhList.limit" type="number" min="1" class="input inline-input" /></label>
                <label class="text-sm">Offset <input x-model.number="wazuhList.offset" type="number" min="0" class="input inline-input" /></label>
                <button class="btn btn-neutral" @click="loadWazuhAgents()">Agents</button>
                <button class="btn btn-ghost" @click="loadWazuhAlerts()">Alerts</button>
                <button class="btn btn-ghost" @click="loadWazuhManagerLogs()">Manager Logs</button>
              </div>
              <label class="text-sm mt-2 block"><span class="input-label">Query (alerts/logs)</span><input x-model="wazuhList.q" class="input" placeholder="optional q" /></label>
              <pre class="json-box mt-2" x-text="pretty(wazuh.list)"></pre>
              <div class="table-wrap mt-2" x-show="extractRows(wazuh.list).length">
                <table class="data-table">
                  <thead>
                    <tr>
                      <template x-for="col in tableColumns(extractRows(wazuh.list))" :key="col">
                        <th x-text="col"></th>
                      </template>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="(row, idx) in extractRows(wazuh.list)" :key="idx">
                      <tr>
                        <template x-for="col in tableColumns(extractRows(wazuh.list))" :key="col">
                          <td x-text="cellText(row[col])"></td>
                        </template>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="panel-block">
              <h3 class="panel-subtitle">Sync Wazuh to MVP</h3>
              <div class="grid gap-3 md:grid-cols-3">
                <label class="text-sm"><span class="input-label">Minutes</span><input x-model.number="wazuhSync.minutes" type="number" min="1" class="input" /></label>
                <label class="text-sm"><span class="input-label">Limit</span><input x-model.number="wazuhSync.limit" type="number" min="1" class="input" /></label>
                <label class="text-sm"><span class="input-label">Query</span><input x-model="wazuhSync.q" class="input" /></label>
              </div>
              <button class="btn btn-primary mt-2" @click="syncWazuhToMvp()">Run Sync</button>
              <pre class="json-box mt-2" x-text="pretty(wazuh.sync)"></pre>
            </div>
          </section>

          <section x-show="activeTab === 'mvp'" x-cloak class="admin-card space-y-4">
            <div class="panel-block">
              <h3 class="panel-subtitle">MVP Health & Policy</h3>
              <div class="action-row">
                <button class="btn btn-primary" @click="loadMvpDependencies()">Dependencies</button>
                <button class="btn btn-neutral" @click="loadMvpPolicy()">Get Policy</button>
                <button class="btn btn-ghost" @click="updateMvpPolicy()">Update Policy</button>
              </div>
              <label class="text-sm block"><span class="input-label">Policy JSON</span><textarea x-model="mvp.policyText" rows="6" class="input code-input"></textarea></label>
              <pre class="json-box mt-2" x-text="pretty(mvp.status)"></pre>
              <div class="table-wrap mt-2" x-show="keyValueRows(mvp.status).length">
                <table class="data-table">
                  <thead><tr><th>Field</th><th>Value</th></tr></thead>
                  <tbody>
                    <template x-for="row in keyValueRows(mvp.status)" :key="row.key">
                      <tr><td x-text="row.key"></td><td x-text="row.value"></td></tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="panel-block">
              <h3 class="panel-subtitle">MVP Incident Ingest</h3>
              <textarea x-model="mvp.ingestText" rows="8" class="input code-input"></textarea>
              <button class="btn btn-primary mt-2" @click="mvpIngestIncident()">Ingest</button>
              <pre class="json-box mt-2" x-text="pretty(mvp.ingest)" ></pre>
            </div>

            <div class="panel-block">
              <h3 class="panel-subtitle">MVP IOC / VPN Evaluate</h3>
              <div class="grid gap-3 lg:grid-cols-2">
                <div>
                  <h4 class="panel-mini-title">IOC Evaluate JSON</h4>
                  <textarea x-model="mvp.iocEvalText" rows="6" class="input code-input"></textarea>
                  <button class="btn btn-neutral mt-2" @click="mvpEvaluateIoc()">Evaluate IOC</button>
                </div>
                <div>
                  <h4 class="panel-mini-title">VPN Evaluate JSON</h4>
                  <textarea x-model="mvp.vpnEvalText" rows="6" class="input code-input"></textarea>
                  <button class="btn btn-neutral mt-2" @click="mvpEvaluateVpn()">Evaluate VPN</button>
                </div>
              </div>
              <pre class="json-box mt-2" x-text="pretty(mvp.evaluate)"></pre>
            </div>
          </section>

          <section x-show="activeTab === 'explorer'" x-cloak class="admin-card space-y-4">
            <div class="panel-block">
              <h3 class="panel-subtitle">OpenAPI Explorer</h3>
              <div class="action-row">
                <button class="btn btn-primary" @click="loadOpenApiSpec()">Reload OpenAPI</button>
                <span class="text-xs text-slate-500" x-text="`Endpoints: ${explorer.endpoints.length}`"></span>
              </div>
              <div class="grid gap-3 md:grid-cols-3">
                <label class="text-sm md:col-span-2">
                  <span class="input-label">Endpoint</span>
                  <select class="input" x-model="explorer.selectedKey" @change="selectExplorerEndpoint()">
                    <template x-for="ep in explorer.endpoints" :key="ep.key">
                      <option :value="ep.key" x-text="`${ep.method.toUpperCase()} ${ep.path}`"></option>
                    </template>
                  </select>
                </label>
                <label class="text-sm">
                  <span class="input-label">Path Params (JSON)</span>
                  <input class="input" x-model="explorer.pathParamsText" placeholder='{"analysis_id":"..."}' />
                </label>
              </div>
              <label class="text-sm block mt-2"><span class="input-label">Query Params (JSON)</span><textarea x-model="explorer.queryText" rows="3" class="input code-input"></textarea></label>
              <label class="text-sm block mt-2"><span class="input-label">Body (JSON)</span><textarea x-model="explorer.bodyText" rows="8" class="input code-input"></textarea></label>
              <button class="btn btn-primary mt-2" @click="runExplorerRequest()">Run Request</button>
              <pre class="json-box mt-2" x-text="pretty(explorer.result)"></pre>
              <div class="table-wrap mt-2" x-show="extractRows(explorer.result).length">
                <table class="data-table">
                  <thead>
                    <tr>
                      <template x-for="col in tableColumns(extractRows(explorer.result))" :key="col">
                        <th x-text="col"></th>
                      </template>
                    </tr>
                  </thead>
                  <tbody>
                    <template x-for="(row, idx) in extractRows(explorer.result)" :key="idx">
                      <tr>
                        <template x-for="col in tableColumns(extractRows(explorer.result))" :key="col">
                          <td x-text="cellText(row[col])"></td>
                        </template>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>
          </section>
        </main>
      </div>
    </div>
  </body>
</html>