一、前言
在前幾天的實作中，我們已經逐步將 Gemini AI 分析功能整合到 AI SOC Dashboard。
從一開始只能查看資安事件，到後來可以透過 Gemini 產生事件摘要、可能風險、建議處置，以及 MITRE ATT&CK 技術對應，整個系統已經不再只是單純的事件紀錄平台。
不過 Day 23 的 AI 分析結果主要還是透過文字方式呈現。雖然可以讀取資訊，但當分析欄位逐漸增加時，所有內容集中顯示，閱讀起來就不夠直覺。
因此今天要將 AI 分析結果整理成真正的 AI Analysis Panel，讓使用者可以快速掌握事件嚴重度、事件摘要、可能風險、MITRE ATT&CK 對應，以及建議處置。
修改 React App.jsx
將舊的 AI 分析區塊替換成新的 AI Analysis Panel

{aiAnalysis && aiAnalysis.ai_analysis && (
  <div className="ai-panel">
    <div className="ai-panel-header">
      <div>
        <h2>AI Security Analysis</h2>
        <p>Security Event Intelligence</p>
      </div>
      <span className="analysis-status">
        Analysis Complete
      </span>
    </div>

    <div className="ai-event-info">
      <div className="ai-event-top">
        <h3>{aiAnalysis.event.event_type}</h3>

        <span
          className={`severity-badge ${
            String(aiAnalysis.event.severity).toLowerCase() === "high" ||
            aiAnalysis.event.severity === 1
              ? "severity-high"
              : String(aiAnalysis.event.severity).toLowerCase() === "medium" ||
                aiAnalysis.event.severity === 2
              ? "severity-medium"
              : "severity-low"
          }`}
        >
          {aiAnalysis.event.severity === 1
            ? "High Risk"
            : aiAnalysis.event.severity === 2
            ? "Medium Risk"
            : aiAnalysis.event.severity === 3
            ? "Low Risk"
            : `${aiAnalysis.event.severity} Risk`}
        </span>
      </div>

      <p>
        <strong>Source IP：</strong>
        {aiAnalysis.event.src_ip}
      </p>
      <p>
        <strong>Destination IP：</strong>
        {aiAnalysis.event.dest_ip}
      </p>
    </div>

    <div className="ai-section">
      <h3>事件摘要 Summary</h3>
      <p>{aiAnalysis.ai_analysis.summary}</p>
    </div>

    <div className="ai-section">
      <h3>攻擊類型 Attack Type</h3>
      <p>{aiAnalysis.ai_analysis.attack_type}</p>
    </div>

    <div className="ai-section">
      <h3>可能風險 Risk</h3>
      <p>{aiAnalysis.ai_analysis.risk}</p>
    </div>

    <div className="ai-section">
      <h3>建議處置 Recommendation</h3>
      <p>
        {aiAnalysis.ai_analysis.recommendation ||
          "目前沒有建議處置資訊"}
      </p>
    </div>

    <div className="ai-section">
      <h3>MITRE ATT&CK</h3>
      <p>
        <strong>Technique ID：</strong>
        {aiAnalysis.ai_analysis.mitre_technique_id ||
          "未提供"}
      </p>
      <p>
        <strong>Technique Name：</strong>
        {aiAnalysis.ai_analysis.mitre_technique_name ||
          "未提供"}
      </p>
      <small>
        AI 提供的技術對應仍需人工確認。
      </small>
    </div>

    <div className="human-decision">
      <strong>Human Decision</strong>
      <p>
        AI 分析結果僅供參考，
        最終風險判斷與處置仍由 SOC 分析人員確認。
      </p>
    </div>
  </div>
)}

nano src/App.css
加入

/* Day 24 - AI Analysis Panel */

.ai-panel {
  margin-top: 32px;
  padding: 28px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.ai-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.ai-panel-header h2 {
  margin: 0;
  color: #1f2937;
}

.ai-panel-header p {
  color: #6b7280;
  margin-top: 6px;
}

.analysis-status {
  background: #dcfce7;
  color: #166534;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
}

.ai-event-info {
  background: #f8fafc;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.ai-event-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.ai-event-top h3 {
  margin: 0;
}

.severity-badge {
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
}

.severity-high {
  background: #fee2e2;
  color: #991b1b;
}

.severity-medium {
  background: #fef3c7;
  color: #92400e;
}

.severity-low {
  background: #dcfce7;
  color: #166534;
}

.ai-section {
  padding: 18px 0;
  border-bottom: 1px solid #e5e7eb;
}

.ai-section h3 {
  margin: 0 0 12px;
  color: #1f2937;
  font-size: 17px;
}

.ai-section p {
  color: #374151;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.ai-section small {
  color: #6b7280;
}

.human-decision {
  margin-top: 24px;
  padding: 18px;
  border-radius: 10px;
  background: #eff6ff;
  border-left: 4px solid #2563eb;
}

.human-decision strong {
  color: #1e40af;
}

.human-decision p {
  color: #374151;
  line-height: 1.7;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .ai-panel {
    padding: 16px;
  }
}

今天的實作主要是改善 AI SOC Dashboard 的 AI 分析結果呈現方式。
在 Day 23，我們已經能夠將 Gemini 的分析結果顯示在 React 前端，但當事件摘要、攻擊類型、風險、建議處置及 MITRE ATT&CK 等資訊全部集中在一起時，閱讀上仍然不夠直覺。
因此，今天透過 React 與 CSS，將原本的分析結果整理成獨立的 AI Analysis Panel，並加入 Severity 風險標籤，讓不同嚴重程度的事件能夠透過顏色快速區分。
另外，也將 MITRE ATT&CK 與建議處置整理成獨立區塊，並保留 Human Decision 提示，強調 AI 的分析結果只是協助資安人員判斷的參考資訊，不能直接取代人工決策。
透過今天的實作，我也發現開發 SOC Dashboard 不只是把資料成功顯示出來，更重要的是如何讓使用者快速理解資訊。良好的介面設計能夠降低閱讀負擔，讓分析人員更容易掌握事件重點。