pikasTech-unidesk/scripts/assets/web-probe-sentinel-monitor-web/monitor-web.js

// SPEC: PJ2026-01060508 Web哨兵 draft-2026-06-27-p12-cadence-scheduler-monitor-web.
// Responsibility: Vue monitor-web runtime for sentinel trend, timeline, detail and finding observability.
import { createApp, computed, onMounted, ref } from "./vendor/vue.esm-browser.prod.js";

const bootstrap = readBootstrap();

createApp({
  setup() {
    const loading = ref(true);
    const error = ref("");
    const overview = ref(null);
    const runs = ref([]);
    const findings = ref([]);
    const selectedRunId = ref("");
    const selectedDetail = ref(null);
    const runFilter = ref("");
    const severityFilter = ref("");
    const findingFilter = ref("");
    const autoRefresh = ref(true);
    const refreshSeconds = ref(30);
    const lastLoadedAt = ref("");
    const hoveredTrendDot = ref(null);
    let lastAutoRefreshAt = 0;

    const sentinels = computed(() => {
      const rows = Array.isArray(bootstrap.sentinels) ? bootstrap.sentinels : [];
      return rows.length > 0 ? rows : [{ id: bootstrap.sentinelId, enabled: true }];
    });

    const currentStatus = computed(() => String(overview.value?.status || "idle"));
    const latestRun = computed(() => overview.value?.latestRun || null);
    const severityTotals = computed(() => overview.value?.severityCounts || {});
    const filteredRuns = computed(() => {
      const needle = runFilter.value.trim().toLowerCase();
      return runs.value.filter((run) => {
        if (severityFilter.value && severityClass(run) !== severityFilter.value) return false;
        if (!needle) return true;
        return [run.id, run.scenarioId, run.status, run.observerId].some((item) => String(item || "").toLowerCase().includes(needle));
      });
    });
    const selectedRun = computed(() => runs.value.find((run) => run.id === selectedRunId.value) || latestRun.value);
    const trendRows = computed(() => runs.value.slice().sort((a, b) => Date.parse(a.updatedAt || a.createdAt || "") - Date.parse(b.updatedAt || b.createdAt || "")).slice(-48));
    const trendMax = computed(() => Math.max(1, ...trendRows.value.flatMap((run) => [redCount(run), warningCount(run), findingCount(run)])));
    const trendPolylines = computed(() => ({
      red: trendPolyline((run) => redCount(run)),
      warning: trendPolyline((run) => warningCount(run)),
      total: trendPolyline((run) => findingCount(run)),
    }));
    const trendDots = computed(() => trendRows.value.map((run, index) => {
      const red = redCount(run);
      const warning = warningCount(run);
      const total = findingCount(run);
      const x = trendX(index, trendRows.value.length);
      const redY = trendY(red);
      const warningY = trendY(warning);
      const rawTime = run.updatedAt || run.createdAt || "";
      return {
        id: run.id || String(index),
        runId: run.id || "",
        x,
        redY,
        warningY,
        tooltipLeft: `${clamp((x / 720) * 100, 16, 84)}%`,
        tooltipTop: `${clamp(((Math.min(redY, warningY) + 18) / 142) * 100, 24, 76)}%`,
        red,
        warning,
        total,
        status: run.status || "-",
        severity: severityClass(run),
        rawTime,
        timeLabel: formatDate(rawTime),
        absoluteTime: formatAbsoluteDate(rawTime),
        reportSha: shortHash(run.reportJsonSha256 || run.report_json_sha256 || run.reportSha256 || ""),
        title: `${shortId(run.id)} ${formatAbsoluteDate(rawTime)} 红色 ${red} 警告 ${warning} 总量 ${total}`,
      };
    }));
    const timelineRuns = computed(() => runs.value.slice(0, 16));
    const rootCauseFindings = computed(() => {
      const rows = findings.value.filter((item) => item.rootCause || item.nextAction || ["red", "warning"].includes(severityClass(item)));
      return rows.slice(0, 14);
    });
    const cadence = computed(() => {
      const intervalMs = Number(overview.value?.scheduler?.intervalMs || 0);
      const latestAge = Number(overview.value?.freshness?.latestRunAgeSeconds ?? -1);
      const heartbeatAge = Number(overview.value?.freshness?.schedulerHeartbeatAgeSeconds ?? -1);
      const intervalSeconds = intervalMs > 0 ? Math.round(intervalMs / 1000) : 0;
      const stale = intervalSeconds > 0 && latestAge > intervalSeconds * 2;
      return {
        intervalSeconds,
        latestAge,
        heartbeatAge,
        stale,
        label: intervalSeconds > 0 ? `${formatDuration(intervalSeconds)} 间隔` : "未配置",
        alert: stale ? `最近运行 ${formatDuration(latestAge)} 前，超过预设间隔 2 倍；按 SPEC 作为非阻塞报警展示。` : "运行新鲜度在预设窗口内",
      };
    });
    const healthChecks = computed(() => {
      const checks = overview.value?.health?.checks || {};
      return Object.entries(checks).map(([key, value]) => ({
        key,
        ok: value?.ok !== false,
        text: `${key} ${value?.ok === false ? "异常" : "ok"}`,
      }));
    });

    async function loadAll(options = {}) {
      if (!options.silent) loading.value = true;
      error.value = "";
      setReady(false);
      try {
        const [overviewPayload, runsPayload, findingsPayload] = await Promise.all([
          fetchJson("/api/overview"),
          fetchJson("/api/runs?limit=30&sort=updated"),
          fetchJson("/api/findings?limit=30&window=24h"),
        ]);
        overview.value = overviewPayload;
        runs.value = Array.isArray(runsPayload.runs) ? runsPayload.runs : Array.isArray(runsPayload.items) ? runsPayload.items : [];
        findings.value = Array.isArray(findingsPayload.findings) ? findingsPayload.findings : Array.isArray(findingsPayload.groups) ? findingsPayload.groups : [];
        lastLoadedAt.value = new Date().toISOString();
        lastAutoRefreshAt = Date.now();
        const keepSelected = runs.value.find((run) => run.id === selectedRunId.value);
        const nextRun = keepSelected || runs.value[0] || latestRun.value;
        if (nextRun?.id) void selectRun(nextRun, true);
      } catch (cause) {
        error.value = String(cause?.message || cause);
      } finally {
        loading.value = false;
        setReady(true);
      }
    }

    async function selectRun(run, silent = false) {
      const runId = typeof run === "string" ? run : run?.id;
      if (!runId) return;
      selectedRunId.value = runId;
      if (!silent) selectedDetail.value = null;
      try {
        selectedDetail.value = await fetchJson(`/api/runs/${encodeURIComponent(runId)}`);
      } catch (cause) {
        selectedDetail.value = { ok: false, error: String(cause?.message || cause), runId };
      }
    }

    function refreshNow() {
      void loadAll();
    }

    function currentHref(item) {
      if (!item || item.id === bootstrap.sentinelId) return bootstrap.basePath || "/";
      if (item.id === "workbench-dsflash-go-tool-call-10x") return "/";
      return `/sentinels/${encodeURIComponent(item.id)}/`;
    }

    function trendPolyline(accessor) {
      if (trendRows.value.length < 2) return "";
      return trendRows.value.map((run, index) => `${trendX(index, trendRows.value.length)},${trendY(accessor(run))}`).join(" ");
    }

    function trendX(index, total) {
      if (total <= 1) return 24;
      return Math.round(24 + index * (672 / (total - 1)));
    }

    function trendY(value) {
      return Math.round(126 - (Number(value || 0) / trendMax.value) * 102);
    }

    function showTrendTooltip(dot) {
      hoveredTrendDot.value = dot;
    }

    function hideTrendTooltip() {
      hoveredTrendDot.value = null;
    }

    onMounted(() => {
      void loadAll();
      window.setInterval(() => {
        if (!autoRefresh.value) return;
        if (Date.now() - lastAutoRefreshAt >= Math.max(5, Number(refreshSeconds.value || 30)) * 1000) void loadAll({ silent: true });
      }, 1000);
    });

    return {
      bootstrap,
      loading,
      error,
      overview,
      runs,
      findings,
      selectedRunId,
      selectedDetail,
      runFilter,
      severityFilter,
      findingFilter,
      autoRefresh,
      refreshSeconds,
      lastLoadedAt,
      hoveredTrendDot,
      sentinels,
      currentStatus,
      latestRun,
      severityTotals,
      filteredRuns,
      selectedRun,
      trendRows,
      trendPolylines,
      trendDots,
      timelineRuns,
      rootCauseFindings,
      cadence,
      healthChecks,
      loadAll,
      selectRun,
      refreshNow,
      currentHref,
      showTrendTooltip,
      hideTrendTooltip,
      redCount,
      warningCount,
      findingCount,
      severityClass,
      formatDate,
      formatAbsoluteDate,
      formatDuration,
      shortId,
      rootCauseText,
      findingTitle,
      detailSummaryText,
      commandSummary,
      statusLabel,
    };
  },
  template: `
    <div class="monitor-shell" data-monitor-shell="true" :data-monitor-status="currentStatus">
      <header class="topbar">
        <div class="title-block">
          <div class="mark" aria-hidden="true"></div>
          <div>
            <h1>HWLAB Web哨兵</h1>
            <p class="subtitle">
              <span>{{ bootstrap.node }} / {{ bootstrap.lane }}</span>
              <span class="mono">{{ bootstrap.sentinelId }}</span>
              <span>Vue monitor-web</span>
            </p>
          </div>
        </div>
        <div class="toolbar" aria-label="观察面板控制">
          <span class="pill" :class="currentStatus">{{ statusLabel(currentStatus) }}</span>
          <select v-model.number="refreshSeconds" aria-label="刷新间隔">
            <option :value="5">5s</option>
            <option :value="10">10s</option>
            <option :value="30">30s</option>
          </select>
          <button class="toolbar-button" type="button" @click="autoRefresh = !autoRefresh">{{ autoRefresh ? "自动" : "手动" }}</button>
          <button class="toolbar-button" type="button" @click="refreshNow">刷新</button>
        </div>
      </header>

      <section class="entry-strip" aria-label="哨兵入口">
        <div class="entry-copy">
          <strong>哨兵入口</strong>
          <span>{{ sentinels.length }} 个实例，当前入口固定在第一屏</span>
        </div>
        <div class="entry-links">
          <a
            v-for="item in sentinels"
            :key="item.id"
            class="entry-link"
            :class="{ current: item.id === bootstrap.sentinelId, disabled: item.enabled === false }"
            :href="currentHref(item)"
          >
            <span>{{ item.id }}</span>
            <small>{{ item.id === bootstrap.sentinelId ? "当前" : item.enabled === false ? "停用" : "查看" }}</small>
          </a>
        </div>
      </section>

      <section class="trend-stage" aria-label="运行趋势与时间线">
        <section class="trend-panel" aria-labelledby="trend-heading">
          <div class="panel-header">
            <div>
              <h2 id="trend-heading">红色 / 警告数量曲线</h2>
              <p>按运行更新时间展示最近 {{ trendRows.length }} 次变化</p>
            </div>
            <span class="pill" :class="cadence.stale ? 'warning' : 'healthy'">{{ cadence.stale ? "非阻塞报警" : "新鲜" }}</span>
          </div>
          <div class="trend-chart-wrap">
            <svg class="trend-chart" viewBox="0 0 720 142" role="img" aria-label="红色和警告发现数量趋势" data-monitor-trend-curve="true">
              <line class="trend-grid-line" x1="24" x2="696" y1="24" y2="24"></line>
              <line class="trend-grid-line" x1="24" x2="696" y1="75" y2="75"></line>
              <line class="trend-grid-line" x1="24" x2="696" y1="126" y2="126"></line>
              <polyline v-if="trendPolylines.total" class="trend-total" :points="trendPolylines.total"></polyline>
              <polyline v-if="trendPolylines.warning" class="trend-warning" :points="trendPolylines.warning"></polyline>
              <polyline v-if="trendPolylines.red" class="trend-red" :points="trendPolylines.red"></polyline>
              <g
                v-for="dot in trendDots"
                :key="dot.id"
                class="trend-dot-hit"
                tabindex="0"
                role="button"
                :aria-label="dot.title"
                @mouseenter="showTrendTooltip(dot)"
                @focusin="showTrendTooltip(dot)"
                @mouseleave="hideTrendTooltip"
                @focusout="hideTrendTooltip"
              >
                <circle class="trend-hit-area" :cx="dot.x" :cy="Math.min(dot.redY, dot.warningY)" r="12"></circle>
                <circle class="trend-dot-warning" :cx="dot.x" :cy="dot.warningY" r="3">
                  <title>{{ dot.title }}</title>
                </circle>
                <circle class="trend-dot-red" :cx="dot.x" :cy="dot.redY" r="3">
                  <title>{{ dot.title }}</title>
                </circle>
              </g>
            </svg>
            <div
              v-if="hoveredTrendDot"
              class="trend-tooltip"
              data-monitor-trend-tooltip="true"
              :style="{ left: hoveredTrendDot.tooltipLeft, top: hoveredTrendDot.tooltipTop }"
            >
              <strong>{{ shortId(hoveredTrendDot.runId) }}</strong>
              <span>{{ hoveredTrendDot.absoluteTime }}</span>
              <span>状态 {{ hoveredTrendDot.status }}</span>
              <span>红色 {{ hoveredTrendDot.red }} / 警告 {{ hoveredTrendDot.warning }} / 总量 {{ hoveredTrendDot.total }}</span>
              <span v-if="hoveredTrendDot.reportSha">report {{ hoveredTrendDot.reportSha }}</span>
            </div>
            <div v-if="trendRows.length === 0" class="trend-empty">暂无运行数据</div>
          </div>
          <div class="trend-legend">
            <span class="legend-item"><span class="legend-swatch red"></span>红色 {{ redCount({ severityCounts: severityTotals }) }}</span>
            <span class="legend-item"><span class="legend-swatch warning"></span>警告 {{ warningCount({ severityCounts: severityTotals }) }}</span>
            <span class="legend-item"><span class="legend-swatch total"></span>发现总量 {{ findingCount({ findingCount: overview?.latestRun?.findingCount, severityCounts: severityTotals }) }}</span>
            <span class="legend-item">{{ cadence.alert }}</span>
          </div>
        </section>

        <section class="timeline-panel" aria-labelledby="timeline-heading" data-monitor-timeline="true">
          <div class="panel-header">
            <div>
              <h2 id="timeline-heading">运行时间线</h2>
              <p>位于哨兵入口下方，方便首屏确认最近运行</p>
            </div>
            <span class="tag">{{ cadence.label }}</span>
          </div>
          <div class="timeline-list">
            <button
              v-for="run in timelineRuns"
              :key="run.id"
              class="timeline-item"
              :class="severityClass(run)"
              type="button"
              @click="selectRun(run)"
            >
              <span class="muted">{{ formatDate(run.updatedAt || run.createdAt) }}</span>
              <span class="severity-line"><span class="timeline-marker"></span><strong>{{ run.scenarioId || shortId(run.id) }}</strong></span>
              <span class="tag" :class="severityClass(run)">{{ findingCount(run) }} 项</span>
            </button>
            <div v-if="timelineRuns.length === 0" class="empty">暂无时间线记录</div>
          </div>
        </section>
      </section>

      <section class="status-strip" aria-label="状态指标">
        <div class="metric">
          <span>最近运行</span>
          <strong>{{ latestRun ? formatDate(latestRun.updatedAt || latestRun.createdAt) : "-" }}</strong>
        </div>
        <div class="metric" :class="{ warning: cadence.stale }">
          <span>调度新鲜度</span>
          <strong>{{ cadence.latestAge >= 0 ? formatDuration(cadence.latestAge) : "-" }}</strong>
        </div>
        <div class="metric">
          <span>红色</span>
          <strong>{{ redCount({ severityCounts: severityTotals }) }}</strong>
        </div>
        <div class="metric">
          <span>警告</span>
          <strong>{{ warningCount({ severityCounts: severityTotals }) }}</strong>
        </div>
        <div class="metric">
          <span>最后刷新</span>
          <strong>{{ lastLoadedAt ? formatDate(lastLoadedAt) : "-" }}</strong>
        </div>
      </section>

      <section v-if="error" class="banner error" id="monitor-web-error">{{ error }}</section>

      <section class="workspace-grid" aria-label="哨兵工作区" data-monitor-independent-scroll="true">
        <aside class="pane pane-runs" aria-labelledby="runs-heading">
          <div class="pane-header">
            <div>
              <h2 id="runs-heading">运行记录</h2>
              <p class="muted">{{ filteredRuns.length }} / {{ runs.length }}</p>
            </div>
            <span v-if="loading" class="tag">加载中</span>
          </div>
          <div class="filter-row">
            <input v-model="runFilter" type="search" placeholder="搜索 run / scenario" aria-label="搜索运行">
            <select v-model="severityFilter" aria-label="严重级别筛选">
              <option value="">全部</option>
              <option value="red">红色</option>
              <option value="warning">警告</option>
              <option value="info">信息</option>
              <option value="healthy">正常</option>
            </select>
          </div>
          <div class="run-list">
            <button
              v-for="run in filteredRuns"
              :key="run.id"
              class="run-row"
              :class="[severityClass(run), { selected: run.id === selectedRunId }]"
              type="button"
              @click="selectRun(run)"
            >
              <span class="row-line">
                <span class="severity-line"><span class="severity-dot"></span><strong>{{ run.scenarioId || shortId(run.id) }}</strong></span>
                <span class="tag" :class="severityClass(run)">{{ findingCount(run) }}</span>
              </span>
              <span class="row-line muted">
                <span>{{ run.status || "-" }}</span>
                <span>{{ formatDate(run.updatedAt || run.createdAt) }}</span>
              </span>
            </button>
            <div v-if="filteredRuns.length === 0" class="empty">没有匹配的运行记录</div>
          </div>
        </aside>

        <main class="pane pane-detail" aria-labelledby="detail-heading">
          <div class="pane-header">
            <div>
              <h2 id="detail-heading">运行详情</h2>
              <p class="muted">{{ selectedRun ? selectedRun.id : "未选择" }}</p>
            </div>
            <span v-if="selectedRun" class="tag" :class="severityClass(selectedRun)">{{ severityClass(selectedRun) }}</span>
          </div>
          <div v-if="selectedRun" class="detail-stack">
            <section class="detail-card">
              <h3>摘要</h3>
              <div class="detail-grid">
                <div class="metric"><span>状态</span><strong>{{ selectedRun.status || "-" }}</strong></div>
                <div class="metric"><span>发现数</span><strong>{{ findingCount(selectedRun) }}</strong></div>
                <div class="metric"><span>Observer</span><strong>{{ selectedRun.observerId || "-" }}</strong></div>
                <div class="metric"><span>更新时间</span><strong>{{ formatDate(selectedRun.updatedAt || selectedRun.createdAt) }}</strong></div>
              </div>
            </section>
            <section class="detail-card">
              <h3>健康检查</h3>
              <div class="check-grid">
                <span v-for="check in healthChecks" :key="check.key" class="check-chip" :class="check.ok ? 'ok' : 'bad'">{{ check.text }}</span>
                <span v-if="healthChecks.length === 0" class="check-chip">无检查数据</span>
              </div>
            </section>
            <section class="detail-card">
              <h3>报告摘要</h3>
              <pre>{{ detailSummaryText(selectedDetail) }}</pre>
            </section>
            <section class="detail-card">
              <h3>复现命令</h3>
              <pre>{{ commandSummary(selectedDetail) }}</pre>
            </section>
          </div>
          <div v-else class="empty">选择一条运行记录查看详情</div>
        </main>

        <aside class="pane pane-findings" aria-labelledby="findings-heading">
          <div class="pane-header">
            <div>
              <h2 id="findings-heading">根因与发现</h2>
              <p class="muted">优先展示 OTel/报告中已归因线索</p>
            </div>
            <span class="tag">{{ findings.length }} 项</span>
          </div>
          <div class="filter-row">
            <input v-model="findingFilter" type="search" placeholder="搜索 finding / root cause" aria-label="搜索发现">
          </div>
          <div class="finding-list">
            <article
              v-for="item in rootCauseFindings.filter((finding) => !findingFilter || JSON.stringify(finding).toLowerCase().includes(findingFilter.toLowerCase())).slice(0, 24)"
              :key="item.code || item.findingId || item.latestRunId"
              class="finding-card"
              :class="severityClass(item)"
            >
              <span class="row-line">
                <span class="severity-line"><span class="severity-dot"></span><strong>{{ findingTitle(item) }}</strong></span>
                <span class="tag" :class="severityClass(item)">{{ item.runCount || item.count || 1 }}</span>
              </span>
              <p class="muted">{{ rootCauseText(item) }}</p>
              <p v-if="item.nextAction" class="muted">方案: {{ item.nextAction }}</p>
            </article>
            <div v-if="rootCauseFindings.length === 0" class="empty">暂无已归因发现</div>
          </div>
        </aside>
      </section>
    </div>
  `,
}).mount("#monitor-web-root");

function readBootstrap() {
  const root = document.querySelector("#monitor-web-root");
  const script = document.querySelector("#monitor-web-bootstrap");
  let parsed = {};
  try {
    parsed = script?.textContent ? JSON.parse(script.textContent) : {};
  } catch {
    parsed = {};
  }
  return {
    node: root?.getAttribute("data-node") || parsed.node || "",
    lane: root?.getAttribute("data-lane") || parsed.lane || "",
    sentinelId: root?.getAttribute("data-sentinel-id") || parsed.sentinelId || "",
    basePath: root?.getAttribute("data-base-path") || parsed.basePath || "",
    publicOrigin: root?.getAttribute("data-public-origin") || parsed.publicOrigin || "",
    contractVersion: root?.getAttribute("data-contract-version") || parsed.contractVersion || "",
    sentinels: Array.isArray(parsed.sentinels) ? parsed.sentinels : [],
  };
}

async function fetchJson(path) {
  const response = await fetch(apiUrl(path), { cache: "no-store" });
  if (!response.ok) throw new Error(`${path} HTTP ${response.status}`);
  return await response.json();
}

function apiUrl(path) {
  const prefix = bootstrap.basePath || "";
  const suffix = path.startsWith("/") ? path : `/${path}`;
  return `${prefix}${suffix}`;
}

function setReady(value) {
  document.querySelector("#monitor-web-root")?.setAttribute("data-monitor-ready", value ? "true" : "false");
}

function redCount(item) {
  const counts = item?.severityCounts || item || {};
  return number(counts.red) + number(counts.critical) + number(counts.error);
}

function warningCount(item) {
  const counts = item?.severityCounts || item || {};
  return number(counts.warning) + number(counts.warn) + number(counts.amber);
}

function findingCount(item) {
  if (Number.isFinite(Number(item?.findingCount))) return Number(item.findingCount);
  if (Number.isFinite(Number(item?.finding_count))) return Number(item.finding_count);
  if (Number.isFinite(Number(item?.count))) return Number(item.count);
  const counts = item?.severityCounts || item || {};
  return Object.values(counts).reduce((sum, value) => sum + number(value), 0);
}

function severityClass(item) {
  const explicit = String(item?.maxSeverity || item?.severity || "").toLowerCase();
  if (["red", "critical", "error", "blocked"].includes(explicit)) return "red";
  if (["warning", "warn", "amber"].includes(explicit)) return "warning";
  if (["info", "notice"].includes(explicit)) return "info";
  if (redCount(item) > 0) return "red";
  if (warningCount(item) > 0) return "warning";
  return "healthy";
}

function formatDate(value) {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return String(value);
  const now = Date.now();
  const seconds = Math.max(0, Math.round((now - date.getTime()) / 1000));
  if (seconds < 90) return `${seconds}s前`;
  if (seconds < 7200) return `${Math.round(seconds / 60)}m前`;
  if (seconds < 172800) return `${Math.round(seconds / 3600)}h前`;
  return date.toISOString().slice(5, 16).replace("T", " ");
}

function formatAbsoluteDate(value) {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return String(value);
  return `${date.toISOString().slice(0, 19).replace("T", " ")} UTC`;
}

function formatDuration(seconds) {
  const value = Math.max(0, Number(seconds || 0));
  if (value < 90) return `${Math.round(value)}s`;
  if (value < 7200) return `${Math.round(value / 60)}m`;
  if (value < 172800) return `${Math.round(value / 3600)}h`;
  return `${Math.round(value / 86400)}d`;
}

function shortId(value) {
  const text = String(value || "");
  return text.length > 18 ? `${text.slice(0, 10)}...${text.slice(-6)}` : text || "-";
}

function shortHash(value) {
  const text = String(value || "");
  if (text.length === 0) return "";
  return text.length > 12 ? text.slice(0, 12) : text;
}

function clamp(value, min, max) {
  return Math.max(min, Math.min(max, value));
}

function rootCauseText(item) {
  return item?.rootCause || item?.evidenceSummary || item?.summary || "尚未记录根因，等待下一次 OTel/报告归因。";
}

function findingTitle(item) {
  return item?.code || item?.findingId || item?.scenarioId || item?.latestRunId || "finding";
}

function detailSummaryText(detail) {
  if (!detail) return "加载详情中";
  if (detail.ok === false) return detail.error || "详情不可用";
  const summary = detail.summary && Object.keys(detail.summary).length > 0 ? detail.summary : detail.run;
  return JSON.stringify(summary || {}, null, 2);
}

function commandSummary(detail) {
  const commands = detail?.commands || {};
  const lines = Object.entries(commands).map(([key, value]) => `${key}: ${value}`);
  return lines.length > 0 ? lines.join("\n") : "暂无命令";
}

function statusLabel(status) {
  const value = String(status || "");
  if (value === "blocked") return "阻塞";
  if (value === "degraded") return "降级";
  if (value === "warning") return "警告";
  if (value === "healthy") return "健康";
  return "空闲";
}

function number(value) {
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : 0;
}