websafe-kb/08-threat-intel/generated/dashboard/assets/app.js

const state = {
  summary: null,
  runs: [],
  systems: [],
  advisories: {},
  profiles: {},
  architecture: null,
  selectedRunId: null,
  selectedArtifact: null,
  refreshHandle: null,
  refreshMs: 5000,
  autoRefresh: true,
  filters: {
    search: "",
    system: "",
    status: "",
    profile: ""
  },
  panels: {
    timeline: true,
    reasoning: true,
    evidence: true,
    logs: true,
    sources: true,
    architecture: true,
    run_json: false,
    advisory_json: false,
    profile_json: false
  }
};

const STATUS_LABELS = {
  "verified-real": "真实版本已实证",
  "verified-synthetic": "合成靶场已实证",
  "blocked-artifact": "制品阻塞",
  "blocked-destructive": "破坏性风险阻塞",
  "triage-manual": "人工分诊",
  suspected: "仅疑似命中",
  completed: "已完成",
  failed: "失败",
  skipped: "已跳过",
  planned: "已规划",
  unknown: "未知"
};

const ARTIFACT_KIND_LABELS = {
  image: "图片",
  text: "文本",
  link: "链接"
};

const $ = (id) => document.getElementById(id);
const icon = (name, className = "icon") =>
  `<svg class="${className}" aria-hidden="true"><use href="./assets/icons.svg#${name}"></use></svg>`;

const statusClass = (status) => ({
  "verified-real": "status-pill status-verified-real",
  "verified-synthetic": "status-pill status-verified-synthetic",
  "blocked-artifact": "status-pill status-blocked-artifact",
  "blocked-destructive": "status-pill status-blocked-destructive",
  "triage-manual": "status-pill status-triage-manual",
  suspected: "status-pill status-suspected",
  completed: "status-pill status-verified-real",
  failed: "status-pill status-blocked-artifact",
  skipped: "status-pill status-triage-manual"
}[status] || "status-pill status-default");

function escapeHtml(value) {
  return String(value ?? "")
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;");
}

function formatStatus(value) {
  return STATUS_LABELS[value] || String(value || "unknown").replaceAll("-", " ");
}

function formatDateTime(value) {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return String(value);
  return date.toLocaleString("zh-CN", {
    hour12: false,
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
  });
}

function timeAgo(value) {
  if (!value) return "-";
  const diff = Date.now() - new Date(value).getTime();
  if (Number.isNaN(diff)) return String(value);
  const seconds = Math.floor(diff / 1000);
  if (seconds <= 5) return "刚刚";
  if (seconds < 60) return `${seconds} 秒前`;
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes} 分钟前`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours} 小时前`;
  const days = Math.floor(hours / 24);
  return `${days} 天前`;
}

async function fetchJson(url) {
  const response = await fetch(`${url}?t=${Date.now()}`, { cache: "no-store" });
  if (!response.ok) {
    throw new Error(`${url} -> ${response.status}`);
  }
  return response.json();
}

function distinct(values) {
  return [...new Set(values.filter(Boolean))].sort();
}

function sumStatuses(predicate) {
  return Object.entries(state.summary?.statuses || {})
    .filter(([key]) => predicate(key))
    .reduce((sum, [, value]) => sum + Number(value || 0), 0);
}

function metricCards() {
  const successCount = Number(state.summary?.statuses?.["verified-real"] || 0) + Number(state.summary?.statuses?.["verified-synthetic"] || 0);
  const blockedCount = sumStatuses((key) => key.startsWith("blocked"));
  const inProgressCount = Math.max(Number(state.summary?.run_count || 0) - successCount - blockedCount, 0);

  return [
    {
      label: "运行总数",
      value: state.summary?.run_count || 0,
      note: `已索引漏洞条目 ${state.summary?.advisory_count || 0} 条`,
      color: "var(--accent-purple)",
      iconName: "report"
    },
    {
      label: "实证成功",
      value: successCount,
      note: "真实版本 + 合成靶场",
      color: "var(--accent-green)",
      iconName: "shield"
    },
    {
      label: "当前阻塞",
      value: blockedCount,
      note: "制品阻塞或破坏性风险阻塞",
      color: "var(--accent-red)",
      iconName: "failure"
    },
    {
      label: "待处理 / 进行中",
      value: inProgressCount,
      note: "人工分诊、待补证据或未完成实证",
      color: "var(--accent-blue)",
      iconName: "timeline"
    }
  ];
}

function renderMetrics() {
  $("metricCards").innerHTML = metricCards()
    .map(
      (card) => `
        <article class="metric-card" style="--metric-color:${card.color}">
          <div class="metric-label">${icon(card.iconName)}<span>${escapeHtml(card.label)}</span></div>
          <div class="metric-value">${escapeHtml(card.value)}</div>
          <div class="metric-note">${escapeHtml(card.note)}</div>
        </article>
      `
    )
    .join("");
}

function renderSyncState(kind, title, detail) {
  $("syncState").innerHTML = `
    ${icon("sync", "icon icon-sync")}
    <div>
      <strong>${escapeHtml(title)}</strong>
      <span>${escapeHtml(detail)}</span>
    </div>
  `;
  $("syncState").dataset.kind = kind;
}

function optionLabel(kind, value) {
  if (kind === "status") return formatStatus(value);
  return value;
}

function hydrateFilters() {
  const controls = [
    ["systemFilter", "system", state.runs.map((item) => item.system_id), "全部系统"],
    ["statusFilter", "status", state.runs.map((item) => item.verification_status), "全部状态"],
    ["profileFilter", "profile", state.runs.map((item) => item.repro_profile_id), "全部复现档案"]
  ];

  for (const [id, key, values, label] of controls) {
    const control = $(id);
    const current = state.filters[key];
    control.innerHTML = `<option value="">${label}</option>`;
    control.innerHTML += distinct(values)
      .map((value) => `<option value="${escapeHtml(value)}">${escapeHtml(optionLabel(key, value))}</option>`)
      .join("");
    control.value = current;
  }
}

function filteredRuns() {
  return state.runs.filter((item) => {
    if (state.filters.system && item.system_id !== state.filters.system) return false;
    if (state.filters.status && item.verification_status !== state.filters.status) return false;
    if (state.filters.profile && item.repro_profile_id !== state.filters.profile) return false;
    if (!state.filters.search) return true;
    const haystack = [
      item.run_id,
      item.advisory_id,
      item.system_id,
      item.repro_profile_id,
      item.advisory_meta?.title || "",
      item.advisory_meta?.summary || ""
    ]
      .join(" ")
      .toLowerCase();
    return haystack.includes(state.filters.search);
  });
}

function renderSystems() {
  $("systemStats").innerHTML = state.systems.length
    ? state.systems
        .map((system) => {
          const total = Math.max(Number(system.total || 0), 1);
          const verified = Number(system.verified_real || 0) + Number(system.verified_synthetic || 0);
          const coverage = Math.round((verified / total) * 100);
          return `
            <article class="system-card">
              <div class="timeline-head">
                <strong class="system-title">${escapeHtml(system.display_name || system.system_id)}</strong>
                <span class="section-chip">${escapeHtml(system.browser_present || 0)}/${escapeHtml(system.browser_required || 0)} 浏览器证据</span>
              </div>
              <div class="muted">${escapeHtml(system.system_id)} · 最近更新 ${escapeHtml(formatDateTime(system.latest_update || "-"))}</div>
              <div class="tag-row" style="margin-top:10px;">
                <span class="tag">真实 ${escapeHtml(system.verified_real || 0)}</span>
                <span class="tag">合成 ${escapeHtml(system.verified_synthetic || 0)}</span>
                <span class="tag">阻塞 ${escapeHtml(system.blocked || 0)}</span>
              </div>
              <div class="meter"><span style="--fill:${coverage}%"></span></div>
            </article>
          `;
        })
        .join("")
    : `<div class="empty-state">暂无系统覆盖数据。</div>`;
}

function renderRecentFailures() {
  const failures = state.summary?.recent_failures || [];
  $("recentFailures").innerHTML = failures.length
    ? failures
        .map(
          (item) => `
            <article class="failure-card">
              <div class="timeline-head">
                <strong class="failure-title">${escapeHtml(item.run_id)}</strong>
                <span class="${statusClass(item.status)}">${escapeHtml(formatStatus(item.status))}</span>
              </div>
              <div class="muted" style="margin-top:8px;">${escapeHtml(item.title || item.advisory_id)}</div>
              <div class="failure-reason" style="margin-top:8px;">${escapeHtml(item.blocked_reason || "未提供失败原因。")}</div>
            </article>
          `
        )
        .join("")
    : `<div class="empty-state">当前没有最近失败记录。</div>`;
}

function renderRunQueue() {
  const runs = filteredRuns();
  $("runCount").textContent = `${runs.length} 条`;
  $("runQueue").innerHTML = runs.length
    ? runs
        .map((item) => {
          const active = item.run_id === state.selectedRunId ? "is-active" : "";
          const browserState = item.browser_evidence?.present ? "已采集" : (item.browser_evidence?.required ? "必需待补" : "可选");
          const lead = item.reasoning_lines?.[0] || item.blocked_reason || item.advisory_meta?.summary || "";
          const artifactCount = (item.artifact_groups || []).reduce((sum, group) => sum + Number(group.count || 0), 0);
          return `
            <button class="run-card ${active}" type="button" data-run-id="${escapeHtml(item.run_id)}">
              <div class="run-topline">
                <strong class="run-title">${escapeHtml(item.run_id)}</strong>
                <span class="${statusClass(item.verification_status)}">${escapeHtml(formatStatus(item.verification_status))}</span>
              </div>
              <div class="muted" style="margin-top:8px;">${escapeHtml(item.advisory_meta?.title || item.advisory_id)}</div>
              <div class="run-meta" style="margin-top:8px;">
                <span>${escapeHtml(item.system_id)}</span>
                <span>${escapeHtml(item.repro_profile_id)}</span>
                <span>${escapeHtml(timeAgo(item.finished_at))}</span>
              </div>
              <div class="tag-row" style="margin-top:10px;">
                <span class="tag">证据 ${escapeHtml(artifactCount)}</span>
                <span class="tag">浏览器 ${escapeHtml(browserState)}</span>
              </div>
              <div class="muted" style="margin-top:10px;">${escapeHtml(lead)}</div>
            </button>
          `;
        })
        .join("")
    : `<div class="empty-state">当前筛选条件下没有匹配的运行。</div>`;

  document.querySelectorAll("[data-run-id]").forEach((button) => {
    button.addEventListener("click", () => {
      state.selectedRunId = button.dataset.runId;
      location.hash = `run=${state.selectedRunId}`;
      renderRunQueue();
      renderDetail();
    });
  });
}

function progressSegments(progress) {
  const order = [
    ["completed", "已完成", "progress-completed"],
    ["blocked", "已阻塞", "progress-blocked"],
    ["failed", "失败", "progress-failed"],
    ["skipped", "已跳过", "progress-skipped"],
    ["planned", "已规划", "progress-planned"],
    ["other", "其他", "progress-other"]
  ];
  const total = order.reduce((sum, [key]) => sum + Number(progress?.[key] || 0), 0);
  if (!total) {
    return {
      bar: `<div class="progress-segment progress-other" style="width:100%"></div>`,
      legend: `<span class="tag"><span class="swatch progress-other"></span>暂无进度</span>`
    };
  }
  const bar = order
    .filter(([key]) => Number(progress?.[key] || 0) > 0)
    .map(([key, _label, className]) => {
      const pct = Math.max((Number(progress[key] || 0) / total) * 100, 4);
      return `<span class="progress-segment ${className}" style="width:${pct}%"></span>`;
    })
    .join("");
  const legend = order
    .filter(([key]) => Number(progress?.[key] || 0) > 0)
    .map(([key, label, className]) => `<span class="tag"><span class="swatch ${className}"></span>${escapeHtml(label)} ${escapeHtml(progress[key] || 0)}</span>`)
    .join("");
  return { bar, legend };
}

function timelineTone(status) {
  if (status === "completed" || status === "verified-real" || status === "verified-synthetic") return "timeline-success";
  if (String(status || "").startsWith("blocked") || status === "failed") return "timeline-blocked";
  if (status === "planned") return "timeline-pending";
  return "timeline-neutral";
}

function renderPanel(panelKey, title, meta, iconName, content) {
  const open = state.panels[panelKey] !== false;
  return `
    <section class="panel ${open ? "" : "is-collapsed"}" data-panel="${panelKey}">
      <button class="panel-header" type="button" data-panel-toggle="${panelKey}">
        <span class="panel-title">${icon(iconName)}<span>${escapeHtml(title)}</span></span>
        <span class="panel-meta">
          <span>${meta}</span>
          ${icon("chevron", "icon panel-chevron")}
        </span>
      </button>
      <div class="panel-content">
        <div class="panel-content-inner">${content}</div>
      </div>
    </section>
  `;
}

function defaultArtifact(run) {
  const preference = ["attack", "requests", "container", "browser", "baseline", "compose", "reports"];
  for (const key of preference) {
    const group = (run.artifact_groups || []).find((item) => item.key === key && item.items?.length);
    if (!group) continue;
    const textItem = group.items.find((item) => item.kind === "text");
    return textItem || group.items[0];
  }
  return null;
}

async function openArtifact(href, label, kind) {
  state.selectedArtifact = { href, label, kind };
  document.querySelectorAll(".artifact-button").forEach((button) => {
    button.classList.toggle("is-active", button.dataset.href === href);
  });

  const labelNode = $("viewerLabel");
  const metaNode = $("viewerMeta");
  const openNode = $("viewerOpen");
  const viewer = $("viewerFrame");
  if (!labelNode || !metaNode || !openNode || !viewer) return;

  labelNode.textContent = label;
  metaNode.textContent = href;
  openNode.href = href;

  try {
    if (kind === "image") {
      viewer.innerHTML = `<img src="${escapeHtml(href)}?t=${Date.now()}" alt="${escapeHtml(label)}">`;
      return;
    }
    if (href.endsWith(".html")) {
      viewer.innerHTML = `<iframe src="${escapeHtml(href)}?t=${Date.now()}"></iframe>`;
      return;
    }
    const response = await fetch(`${href}?t=${Date.now()}`, { cache: "no-store" });
    if (!response.ok) throw new Error(`${href} -> ${response.status}`);
    const text = await response.text();
    let formatted = text;
    if (href.endsWith(".json")) {
      try {
        formatted = JSON.stringify(JSON.parse(text), null, 2);
      } catch (_error) {
      }
    }
    viewer.innerHTML = `<pre>${escapeHtml(formatted)}</pre>`;
  } catch (error) {
    viewer.innerHTML = `<pre>加载 artifact 失败：${escapeHtml(error.message)}</pre>`;
  }
}

function bindPanelToggles() {
  document.querySelectorAll("[data-panel-toggle]").forEach((button) => {
    button.addEventListener("click", () => {
      const key = button.dataset.panelToggle;
      state.panels[key] = !(state.panels[key] !== false);
      const panel = document.querySelector(`[data-panel="${key}"]`);
      if (panel) {
        panel.classList.toggle("is-collapsed", state.panels[key] === false);
      }
    });
  });
}

function renderArchitectureFields(fields = []) {
  if (!fields.length) return "";
  return `
    <div class="arch-field-grid">
      ${fields
        .map(
          (field) => `
            <article class="arch-field">
              <span class="arch-field-label">${escapeHtml(field.label || "-")}</span>
              <div class="arch-field-value">${escapeHtml(field.value || "-")}</div>
            </article>
          `
        )
        .join("")}
    </div>
  `;
}

function renderArchitectureStats(stats = []) {
  if (!stats.length) return "";
  return `
    <div class="arch-stat-grid">
      ${stats
        .map(
          (item) => `
            <article class="arch-stat">
              <span class="arch-stat-label">${escapeHtml(item.label || "-")}</span>
              <strong class="arch-stat-value">${escapeHtml(item.value || "-")}</strong>
            </article>
          `
        )
        .join("")}
    </div>
  `;
}

function renderArchitectureLinks(links = []) {
  if (!links.length) return "";
  return `
    <div class="arch-link-grid">
      ${links
        .map(
          (linkItem) => `
            <a class="arch-link-card" href="${escapeHtml(linkItem.href || "#")}" target="_blank" rel="noreferrer">
              <span class="arch-link-label">${escapeHtml(linkItem.label || "打开链接")}</span>
              <span class="arch-link-copy">${escapeHtml(linkItem.description || linkItem.href || "")}</span>
            </a>
          `
        )
        .join("")}
    </div>
  `;
}

function renderArchitectureNode(node, depth = 0) {
  if (!node) return "";
  const children = (node.items || []).map((item) => renderArchitectureNode(item, depth + 1)).join("");
  const fields = renderArchitectureFields(node.fields || []);
  const stats = renderArchitectureStats(node.stats || []);
  const links = renderArchitectureLinks(node.links || []);
  const badges = (node.badges || [])
    .map((badge) => `<span class="tag">${escapeHtml(badge)}</span>`)
    .join("");
  const hasBody = Boolean(children || fields || stats || links || node.summary || badges);
  const summaryBlock = `
    <div class="arch-summary-main">
      <strong class="arch-title">${escapeHtml(node.title || "未命名节点")}</strong>
      ${node.summary ? `<span class="arch-summary-copy">${escapeHtml(node.summary)}</span>` : ""}
    </div>
    <div class="arch-summary-meta">
      ${node.items?.length ? `<span class="section-chip">${escapeHtml(node.items.length)} 个子项</span>` : ""}
      ${node.fields?.length ? `<span class="section-chip">${escapeHtml(node.fields.length)} 个字段</span>` : ""}
      ${node.links?.length ? `<span class="section-chip">${escapeHtml(node.links.length)} 个链接</span>` : ""}
    </div>
  `;

  if (!hasBody) {
    return `
      <article class="arch-leaf" data-depth="${escapeHtml(depth)}">
        ${summaryBlock}
      </article>
    `;
  }

  const openAttr = node.open === false ? "" : "open";
  return `
    <details class="arch-node" data-depth="${escapeHtml(depth)}" ${openAttr}>
      <summary class="arch-summary">
        ${summaryBlock}
      </summary>
      <div class="arch-body">
        ${badges ? `<div class="tag-row arch-badges">${badges}</div>` : ""}
        ${stats}
        ${fields}
        ${links}
        ${children ? `<div class="arch-children">${children}</div>` : ""}
      </div>
    </details>
  `;
}

function renderArchitecturePanel() {
  const architecture = state.architecture;
  if (!architecture) {
    return renderPanel("architecture", "当前架构库", "未生成", "systems", `<div class="empty-state">尚未找到架构 JSON，请先执行渲染命令。</div>`);
  }
  const sections = architecture.sections || [];
  const content = `
    <div class="callout architecture-callout">
      <strong>${escapeHtml(architecture.title || "当前架构库")}</strong>
      <div class="plan-copy">${escapeHtml(architecture.summary || "当前工作台的结构化真值视图。")}</div>
      <div class="tag-row" style="margin-top:10px;">
        <span class="tag">生成时间 ${escapeHtml(formatDateTime(architecture.generated_at))}</span>
        <a class="tag" href="./architecture.json" target="_blank" rel="noreferrer">架构 JSON</a>
        <a class="tag" href="./docs/architecture-library.html" target="_blank" rel="noreferrer">镜像页</a>
        <a class="tag" href="./docs/root-readme.html" target="_blank" rel="noreferrer">仓库入口镜像</a>
      </div>
    </div>
    <div class="architecture-tree">
      ${sections.length ? sections.map((section) => renderArchitectureNode(section, 0)).join("") : `<div class="empty-state">架构库目前没有可展示的分区。</div>`}
    </div>
  `;
  return renderPanel("architecture", "当前架构库", `${sections.length} 个分区`, "systems", content);
}

function renderEmptyWorkspace() {
  $("detailWorkspace").innerHTML = `
    <div class="workspace-empty">
      ${icon("shield", "icon icon-xl")}
      <h2>选择一个运行</h2>
      <p class="empty-copy">左侧队列用于切换 run。即使当前没有选中运行，你也可以直接展开下方“当前架构库”查看仓库控制面、数据层、系统分组、授权边界与本地入口。</p>
    </div>
    ${renderArchitecturePanel()}
  `;
  bindPanelToggles();
}

function renderDetail() {
  const run = state.runs.find((item) => item.run_id === state.selectedRunId);
  if (!run) {
    renderEmptyWorkspace();
    return;
  }

  const advisory = run.advisory_meta || {};
  const profile = run.profile_meta || {};
  const screenshotItems = ((run.artifact_groups || []).find((group) => group.key === "browser")?.items || []).filter((item) => item.kind === "image");
  const segments = progressSegments(run.progress || {});
  const browserStatus = run.browser_evidence?.present ? "已采集" : (run.browser_evidence?.required ? "必需待补" : "可选");
  const artifactCount = (run.artifact_groups || []).reduce((sum, group) => sum + Number(group.count || 0), 0);

  const timelineContent = `
    <div class="progress-bar">${segments.bar}</div>
    <div class="progress-legend">${segments.legend}</div>
    <div class="timeline">
      ${(run.timeline || [])
        .map((item) => `
          <article class="timeline-item ${timelineTone(item.status)}">
            <span class="timeline-dot"></span>
            <div class="timeline-head">
              <strong>${escapeHtml(item.step || "-")}</strong>
              <span class="timeline-time">${escapeHtml(formatDateTime(item.at || "-"))}</span>
            </div>
            <div class="${statusClass(item.status || "default")}" style="margin-top:8px;">${escapeHtml(formatStatus(item.status || "unknown"))}</div>
            <div class="timeline-detail">${escapeHtml(item.detail || "-")}</div>
          </article>
        `)
        .join("") || `<div class="empty-state">当前运行没有记录时间线。</div>`}
    </div>
  `;

  const reasoningCards = [
    {
      label: "概要",
      copy: advisory.summary || "当前漏洞条目没有摘要。"
    },
    {
      label: "成功判据",
      copy: (profile.success_criteria || []).join(" | ") || "当前 profile 没有定义成功判据。"
    },
    {
      label: "Seed / 攻击思路",
      copy: (run.reasoning_lines || []).join("\n\n") || "当前运行没有记录思路说明。"
    },
    {
      label: "允许目标",
      copy: (profile.allowed_target_types || []).join(", ") || "当前 profile 没有声明允许目标类型。"
    }
  ];

  const reasoningContent = `
    ${run.blocked_reason ? `<div class="callout"><strong>失败原因</strong><div class="plan-copy">${escapeHtml(run.blocked_reason)}</div></div>` : ""}
    <div class="tag-row" style="margin-bottom:14px;">
      <span class="tag">漏洞家族 ${escapeHtml(profile.vuln_family || "未定义")}</span>
      <span class="tag">清理策略 ${escapeHtml(profile.cleanup_policy || "-")}</span>
      <span class="tag">破坏性风险 ${escapeHtml(profile.destructive_risk || "-")}</span>
      <span class="tag">制品模式 ${escapeHtml(run.artifact_mode || "-")}</span>
    </div>
    <div class="plan-grid">
      ${reasoningCards
        .map(
          (card) => `
            <article class="plan-card">
              <span class="plan-label">${escapeHtml(card.label)}</span>
              <div class="plan-copy">${escapeHtml(card.copy)}</div>
            </article>
          `
        )
        .join("")}
    </div>
  `;

  const evidenceContent = `
    <div class="artifact-groups">
      ${(run.artifact_groups || [])
        .map(
          (group) => `
            <section class="artifact-group">
              <h3>${escapeHtml(group.label)} · ${escapeHtml(group.count)}</h3>
              <div class="artifact-grid">
                ${group.items
                  .map(
                    (item) => `
                      <button class="artifact-button" type="button" data-artifact data-href="${escapeHtml(item.href)}" data-kind="${escapeHtml(item.kind)}" data-label="${escapeHtml(item.label)}">
                        <span>${escapeHtml(item.label)}</span>
                        <span class="artifact-kind">${escapeHtml(ARTIFACT_KIND_LABELS[item.kind] || item.kind)}</span>
                      </button>
                    `
                  )
                  .join("")}
              </div>
            </section>
          `
        )
        .join("") || `<div class="empty-state">当前运行没有可浏览的产物分组。</div>`}

      ${
        screenshotItems.length
          ? `<div class="gallery">
               ${screenshotItems
                 .map(
                   (item) => `
                     <button class="artifact-button gallery-card" type="button" data-artifact data-href="${escapeHtml(item.href)}" data-kind="${escapeHtml(item.kind)}" data-label="${escapeHtml(item.label)}">
                       <img src="${escapeHtml(item.href)}" alt="${escapeHtml(item.label)}">
                       <span>${escapeHtml(item.label)}</span>
                     </button>
                   `
                 )
                 .join("")}
             </div>`
          : ""
      }
    </div>
  `;

  const logContent = `
    <div class="viewer-card">
      <div class="viewer-toolbar">
        <div>
          <div id="viewerLabel" class="viewer-label">${escapeHtml(state.selectedArtifact?.label || "选择一个产物")}</div>
          <div id="viewerMeta" class="viewer-meta">${escapeHtml(state.selectedArtifact?.href || "这里会显示 JSON、文本、HTML 报告、截图和其他日志的预览。")}</div>
        </div>
        <div class="detail-actions">
          <a id="viewerOpen" class="button button-secondary" href="${escapeHtml(state.selectedArtifact?.href || run.dashboard_refs.report_html)}" target="_blank" rel="noreferrer">${icon("link")}<span>打开产物</span></a>
          <button id="viewerRefresh" class="button button-secondary" type="button">${icon("refresh")}<span>刷新预览</span></button>
        </div>
      </div>
      <div id="viewerFrame" class="viewer-frame"><pre>选择报告、日志、截图、JSON 或 HTML 产物后，会在这里直接预览。</pre></div>
    </div>
  `;

  const sourceLinks = [
    advisory.official_source_url
      ? `<a href="${escapeHtml(advisory.official_source_url)}" target="_blank" rel="noreferrer">${escapeHtml(advisory.official_source_url)}</a>`
      : `<span class="muted">当前漏洞条目没有关联官方来源。</span>`,
    ...(advisory.secondary_source_urls || []).map((url) => `<a href="${escapeHtml(url)}" target="_blank" rel="noreferrer">${escapeHtml(url)}</a>`)
  ].join("");

  const sourcesContent = `
    <div class="tag-row">
      ${(advisory.aliases || []).map((alias) => `<span class="tag">${escapeHtml(alias)}</span>`).join("")}
      ${(advisory.secure_code_topics || []).map((topic) => `<a class="tag" href="./docs/secure-code-index.html" target="_blank" rel="noreferrer">${escapeHtml(topic)}</a>`).join("")}
    </div>
    <div class="source-links">${sourceLinks}</div>
  `;

  const rawRunContent = `<article class="json-card"><pre>${escapeHtml(JSON.stringify(run, null, 2))}</pre></article>`;
  const rawAdvisoryContent = `<article class="json-card"><pre>${escapeHtml(JSON.stringify(advisory, null, 2))}</pre></article>`;
  const rawProfileContent = `<article class="json-card"><pre>${escapeHtml(JSON.stringify(profile, null, 2))}</pre></article>`;

  $("detailWorkspace").innerHTML = `
    <section class="detail-hero">
      <div class="detail-topline">
        <span class="${statusClass(run.verification_status)}">${escapeHtml(formatStatus(run.verification_status))}</span>
        <div class="tag-row">
          <span class="tag">${escapeHtml(run.system_id)}</span>
          <span class="tag">${escapeHtml(run.repro_profile_id)}</span>
          <span class="tag">${escapeHtml(run.verification_mode || "-")}</span>
          <span class="tag">${escapeHtml(run.target_env || "-")}</span>
        </div>
      </div>
      <h2 class="detail-title">${escapeHtml(advisory.title || run.advisory_id)}</h2>
      <div class="detail-subtitle">${escapeHtml(advisory.summary || "当前漏洞条目没有摘要。")}</div>

      <div class="detail-actions">
        <a class="button button-primary" href="${escapeHtml(run.dashboard_refs.report_html)}" target="_blank" rel="noreferrer">${icon("report")}<span>HTML 报告</span></a>
        <a class="button button-secondary" href="${escapeHtml(run.dashboard_refs.report_md)}" target="_blank" rel="noreferrer">${icon("markdown")}<span>Markdown 报告</span></a>
        <a class="button button-secondary" href="${escapeHtml(run.dashboard_refs.bundle)}" target="_blank" rel="noreferrer">${icon("json")}<span>运行 JSON</span></a>
      </div>

      <div class="detail-stat-grid">
        <article class="detail-stat">
          <strong>时间线步骤</strong>
          <span>${escapeHtml(run.timeline?.length || 0)}</span>
        </article>
        <article class="detail-stat">
          <strong>Artifact 数</strong>
          <span>${escapeHtml(artifactCount)}</span>
        </article>
        <article class="detail-stat">
          <strong>浏览器证据</strong>
          <span>${escapeHtml(browserStatus)}</span>
        </article>
        <article class="detail-stat">
          <strong>完成时间</strong>
          <span>${escapeHtml(timeAgo(run.finished_at))}</span>
        </article>
      </div>
    </section>

    ${renderPanel("timeline", "进度时间线", `${escapeHtml(run.timeline?.length || 0)} 步`, "timeline", timelineContent)}
    ${renderPanel("reasoning", "攻击方案与推理", escapeHtml(profile.vuln_family || "未定义"), "reasoning", reasoningContent)}
    ${renderPanel("evidence", "证据浏览器", `${escapeHtml(run.artifact_groups?.length || 0)} 组`, "evidence", evidenceContent)}
    ${renderPanel("logs", "实时日志查看器", state.selectedArtifact ? "已选产物" : "等待选择", "logs", logContent)}
    ${renderPanel("sources", "来源与修复主题", `${escapeHtml((advisory.secondary_source_urls || []).length + (advisory.official_source_url ? 1 : 0))} 条链接`, "sources", sourcesContent)}
    ${renderArchitecturePanel()}
    ${renderPanel("run_json", "运行 JSON", "原始数据", "json", rawRunContent)}
    ${renderPanel("advisory_json", "漏洞条目 JSON", "原始数据", "json", rawAdvisoryContent)}
    ${renderPanel("profile_json", "复现档案 JSON", "原始数据", "json", rawProfileContent)}
  `;

  bindPanelToggles();

  document.querySelectorAll("[data-artifact]").forEach((button) => {
    button.addEventListener("click", () => openArtifact(button.dataset.href, button.dataset.label, button.dataset.kind));
  });

  $("viewerRefresh")?.addEventListener("click", () => {
    if (state.selectedArtifact) {
      openArtifact(state.selectedArtifact.href, state.selectedArtifact.label, state.selectedArtifact.kind);
    }
  });

  const artifactExists = (run.artifact_groups || []).some((group) => group.items.some((item) => item.href === state.selectedArtifact?.href));
  const defaultItem = artifactExists ? state.selectedArtifact : defaultArtifact(run);
  if (defaultItem) {
    openArtifact(defaultItem.href, defaultItem.label, defaultItem.kind);
  }
}

function renderAll() {
  renderMetrics();
  renderSystems();
  renderRecentFailures();
  renderRunQueue();
  renderDetail();
}

function attachGlobalEvents() {
  $("searchInput").addEventListener("input", (event) => {
    state.filters.search = String(event.target.value || "").trim().toLowerCase();
    renderRunQueue();
  });

  [
    ["systemFilter", "system"],
    ["statusFilter", "status"],
    ["profileFilter", "profile"]
  ].forEach(([id, key]) => {
    $(id).addEventListener("input", (event) => {
      state.filters[key] = String(event.target.value || "");
      renderRunQueue();
    });
  });

  $("refreshDashboard").addEventListener("click", () => loadData(false));
  $("autoRefresh").addEventListener("change", (event) => {
    state.autoRefresh = Boolean(event.target.checked);
    startRefreshLoop();
  });
}

function startRefreshLoop() {
  if (state.refreshHandle) {
    clearInterval(state.refreshHandle);
    state.refreshHandle = null;
  }
  if (!state.autoRefresh) return;
  state.refreshHandle = setInterval(() => loadData(true), state.refreshMs);
}

async function loadData(preserveSelection = true) {
  const previous = state.selectedRunId;
  renderSyncState("loading", "刷新中", `本地时间 ${new Date().toLocaleTimeString("zh-CN", { hour12: false })}`);

  try {
    const [summary, runs, systems, advisories, profiles, architecture] = await Promise.all([
      fetchJson("./summary.json"),
      fetchJson("./runs.json"),
      fetchJson("./systems.json"),
      fetchJson("./advisories.json"),
      fetchJson("./profiles.json"),
      fetchJson("./architecture.json")
    ]);

    state.summary = summary;
    state.runs = runs;
    state.systems = systems;
    state.advisories = advisories;
    state.profiles = profiles;
    state.architecture = architecture;
    hydrateFilters();

    const hashRun = location.hash.startsWith("#run=") ? location.hash.replace("#run=", "") : null;
    const candidate = preserveSelection ? (hashRun || previous) : hashRun;
    if (candidate && runs.some((item) => item.run_id === candidate)) {
      state.selectedRunId = candidate;
    } else {
      state.selectedRunId = runs[0]?.run_id || null;
    }

    renderAll();
    renderSyncState("live", "实时同步", `最近生成 ${formatDateTime(summary.generated_at || new Date().toISOString())}`);
  } catch (error) {
    $("runQueue").innerHTML = `<div class="empty-state">工作台加载失败：${escapeHtml(error.message)}</div>`;
    $("detailWorkspace").innerHTML = `<div class="workspace-empty"><h2>加载失败</h2><p class="empty-copy">${escapeHtml(error.message)}</p></div>`;
    renderSyncState("error", "加载失败", error.message);
  }
}

async function init() {
  attachGlobalEvents();
  await loadData(false);
  startRefreshLoop();
  window.addEventListener("hashchange", () => loadData(false));
}

document.addEventListener("DOMContentLoaded", init);