First Response Compass

# selfdirected_agent_r_20260707T060621

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: ユーザーはインシデントの全体像（システムマップ）と、それを解決するためのAIによる分析・行動計画（ブリーフィング）を即座に得られます。
- Core interaction: 「サンプル実行トレースを再生」ボタンをクリックすると、AIの分析パイプラインの各ステップの結果が画面に表示されます。
- State change: ボタンをクリックすると、結果表示エリアが「未実行」の状態から、収集・分析・ブリーフィング生成の各ステップの詳細な出力が表示された状態に変わります。
- Inspectable output: AIが生成した「初動チェックリスト」と、その判断根拠となった分析結果（主要な脅威、危険なノード、理由）が明確に出力されます。
- Static data boundary: 表示されるデータはすべて事前に用意されたサンプルです。外部システムとのリアルタイム連携は行いません。
- Remaining weakness: 現在は単一のインシデントに対する静的な分析のみですが、将来的には複数のアラートをリアルタイムに統合し、時間経過と共に状況が変化する複雑なインシデントに対応できる動的なコンパスへと進化させたいです。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: Result panel shows 'not yet run' message.
- Expected state: Result panel shows the full, step-by-step output from the sample trace file.
- Visible evidence: 1. データ収集 (Data Ingestion); 2. 状況分析 (AI Analysis); 3. ブリーフィング生成 (Briefing Output); 初動チェックリスト

## MVP Contract

- Required files: `source/README.md`, `source/metadata.json`, `source/manifest.json`, `source/app/page.tsx`, `source/core/pipeline.ts`, `source/core/gemini.ts`, `source/data/sample-input.ts`, `source/data/sample-trace.ts`, `source/validation/self-review.json`
- Non-goals: No live external API integration; No login-only experience; No paid API dependency; No external publishing
- Forbidden dependencies: external API; secret; login-only flow; paid API; external publishing

## MVP Contract V2

- Artifact tier: proposed_integration
- External dependency mode: proposed
- Runtime boundary: network=none, secrets=none, externalWrites=none
- Render verification: required (render, click, state_change, screenshot)
- Public copy boundary: This is a demo using static sample data.; AI integration is proposed and not active.; This tool is for decision support and does not automate responses.
- External integrations: Google Gemini API=not_connected
- Mock fidelity: A successful analysis of a straightforward security incident.

## Files

- `source/README.md`: Provides an overview of the product, its architecture, and usage instructions.
- `source/metadata.json`: Provides structured metadata for the Prodia platform.
- `source/manifest.json`: Lists all files included in the artifact.
- `source/core/types.ts`: Defines shared TypeScript types for the core logic.
- `source/data/sample-input.ts`: Provides static sample input data for the demo.
- `source/core/steps/1_ingestData.ts`: First step of the pipeline: ingests and structures the raw data.
- `source/core/steps/2_analyzeSituation.ts`: Core AI step: analyzes data, identifies threats, and creates a checklist.
- `source/core/gemini.ts`: Contains the real, documented call pattern for the Google Gemini API.
- `source/core/steps/3_generateBriefing.ts`: Final step: formats the AI analysis into a structured briefing for the UI.
- `source/core/pipeline.ts`: Orchestrates the sequence of processing steps.
- `source/data/sample-trace.ts`: Contains the pre-recorded, hand-authored execution trace for the static demo.
- `source/app/page.tsx`: The main entrypoint and UI for the static artifact.
- `source/validation/self-review.json`: A self-review of the artifact against Prodia's MVP criteria.

## Demo Placeholder

- `demo-placeholder.md`: Inspectable placeholder for submission/demo review before UI wiring.

## DB Write

skipped: BuildPlan materialization is artifact-only for this session. Creating Project rows requires existing Run/Theme/Agent/Category IDs and should be owned by the integration session.

{
  "version": 1,
  "artifactId": "selfdirected_agent_r_20260707T060621",
  "generatedAt": "2026-07-07T06:25:01.900Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_r_20260707T060619/builder/response.json",
    "requirementSpecId": "req_selfdirected_agent_r_20260707T060619",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Provides an overview of the product, its architecture, and usage instructions.",
      "sizeBytes": 2944,
      "checksum": "751c68e3d844626be6226ca02898a5276362e70cf4cc7a183b600ad25364397f",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides structured metadata for the Prodia platform.",
      "sizeBytes": 2352,
      "checksum": "283ee4fe3f11893a73de36332a410942eec88d01a03ee932f943355a294c066c",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all files included in the artifact.",
      "sizeBytes": 589,
      "checksum": "34038aa53cf223f2057ec18ff038d48547ae192643d1ea2a2da0fd47d6303713",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines shared TypeScript types for the core logic.",
      "sizeBytes": 1136,
      "checksum": "84258fd7f0d0dddbda2f010c388e1eaad546d8ec5e9c9662b8266b61c4fa2857",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Provides static sample input data for the demo.",
      "sizeBytes": 1233,
      "checksum": "b90ae5d7bd3fb65e2d9286f5c0dcdd10be034192eeed64ac7313ced313191333",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/core/steps/1_ingestData.ts",
      "purpose": "First step of the pipeline: ingests and structures the raw data.",
      "sizeBytes": 338,
      "checksum": "d80a7ac8a597f3ab9a24aae7394c756a336e86bbb5a860eda49123df276ad3bd",
      "generatedFrom": "source/core/steps/1_ingestData.ts"
    },
    {
      "relativePath": "source/core/steps/2_analyzeSituation.ts",
      "purpose": "Core AI step: analyzes data, identifies threats, and creates a checklist.",
      "sizeBytes": 2515,
      "checksum": "409fd04f63579f6277687ebb76ddcf3aa2ba1e94a34a0bb2bbba23a7f88f1a1c",
      "generatedFrom": "source/core/steps/2_analyzeSituation.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Contains the real, documented call pattern for the Google Gemini API.",
      "sizeBytes": 1761,
      "checksum": "071b49b6919402abd16072b6fc710049d7a31352604ad9ff5141d1faba754810",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/3_generateBriefing.ts",
      "purpose": "Final step: formats the AI analysis into a structured briefing for the UI.",
      "sizeBytes": 711,
      "checksum": "f575e67401563cad671641fe9ac17947dc5465df7271e1185fa5b2f219e9140b",
      "generatedFrom": "source/core/steps/3_generateBriefing.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the sequence of processing steps.",
      "sizeBytes": 1301,
      "checksum": "a13026136420e6e6c0a6ec752ad661ea7adb54cabf401e1f0251868af80c4f57",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "Contains the pre-recorded, hand-authored execution trace for the static demo.",
      "sizeBytes": 1796,
      "checksum": "15603df3c13ee8d613d499fad7fb79ed4fc5587f511a70b97c22f7f749af5763",
      "generatedFrom": "source/data/sample-trace.ts"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main entrypoint and UI for the static artifact.",
      "sizeBytes": 4090,
      "checksum": "eed29224dc5eb33aec6d7b778527876a7557991b9e18290285e35cdd49334e2f",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "A self-review of the artifact against Prodia's MVP criteria.",
      "sizeBytes": 1311,
      "checksum": "9350c5a907918ab33b66b848b88985ba57620d33607c659d0ec82ce1469e31c6",
      "generatedFrom": "validation/self-review.json"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "ユーザーはインシデントの全体像（システムマップ）と、それを解決するためのAIによる分析・行動計画（ブリーフィング）を即座に得られます。",
    "coreInteraction": "「サンプル実行トレースを再生」ボタンをクリックすると、AIの分析パイプラインの各ステップの結果が画面に表示されます。",
    "stateChange": "ボタンをクリックすると、結果表示エリアが「未実行」の状態から、収集・分析・ブリーフィング生成の各ステップの詳細な出力が表示された状態に変わります。",
    "inspectableOutput": "AIが生成した「初動チェックリスト」と、その判断根拠となった分析結果（主要な脅威、危険なノード、理由）が明確に出力されます。",
    "staticDataBoundary": "表示されるデータはすべて事前に用意されたサンプルです。外部システムとのリアルタイム連携は行いません。",
    "remainingWeakness": "現在は単一のインシデントに対する静的な分析のみですが、将来的には複数のアラートをリアルタイムに統合し、時間経過と共に状況が変化する複雑なインシデントに対応できる動的なコンパスへと進化させたいです。"
  },
  "interestingness": "多くのセキュリティツールはアラートの洪水をもたらしますが、この『First Response Compass』は情報を戦術的な一枚の地図へと昇華させます。新規性は、断片的なテキストログやアラートをAIが統合し、システム構成図上に危険箇所と初動チェックリストとして可視化する点にあります。これにより、インシデント発生時の「何から手をつけるべきか」という最大の課題を解決し、判断を加速させます。これはマルチソースの情報を統合・要約する最新のAI技術を、緊急時の意思決定支援という極めて実践的な運用タスクに応用したものです。",
  "mvpContract": {
    "firstScreenValue": "ユーザーはインシデントの全体像（システムマップ）と、それを解決するためのAIによる分析・行動計画（ブリーフィング）を即座に得られます。",
    "coreInteraction": "「サンプル実行トレースを再生」ボタンをクリックすると、AIの分析パイプラインの各ステップの結果が画面に表示されます。",
    "stateChange": "ボタンをクリックすると、結果表示エリアが「未実行」の状態から、収集・分析・ブリーフィング生成の各ステップの詳細な出力が表示された状態に変わります。",
    "inspectableOutput": "AIが生成した「初動チェックリスト」と、その判断根拠となった分析結果（主要な脅威、危険なノード、理由）が明確に出力されます。",
    "staticDataBoundary": "表示されるデータはすべて事前に用意されたサンプルです。外部システムとのリアルタイム連携は行いません。",
    "requiredFiles": [
      "source/README.md",
      "source/metadata.json",
      "source/manifest.json",
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/core/gemini.ts",
      "source/data/sample-input.ts",
      "source/data/sample-trace.ts",
      "source/validation/self-review.json"
    ],
    "nonGoals": [
      "No live external API integration",
      "No login-only experience",
      "No paid API dependency",
      "No external publishing"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ]
  },
  "mvpContractV2": {
    "firstScreenValue": "ユーザーはインシデントの全体像（システムマップ）と、それを解決するためのAIによる分析・行動計画（ブリーフィング）を即座に得られます。",
    "coreInteraction": "「サンプル実行トレースを再生」ボタンをクリックすると、AIの分析パイプラインの各ステップの結果が画面に表示されます。",
    "stateChange": "ボタンをクリックすると、結果表示エリアが「未実行」の状態から、収集・分析・ブリーフィング生成の各ステップの詳細な出力が表示された状態に変わります。",
    "inspectableOutput": "AIが生成した「初動チェックリスト」と、その判断根拠となった分析結果（主要な脅威、危険なノード、理由）が明確に出力されます。",
    "staticDataBoundary": "表示されるデータはすべて事前に用意されたサンプルです。外部システムとのリアルタイム連携は行いません。",
    "requiredFiles": [
      "source/README.md",
      "source/metadata.json",
      "source/manifest.json",
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts",
      "source/validation/self-review.json"
    ],
    "nonGoals": [
      "No live external API integration",
      "No user accounts or persistence",
      "No automated incident remediation"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ],
    "contractVersion": "mvp-contract-v2",
    "artifactTier": "proposed_integration",
    "externalDependencyMode": "proposed",
    "externalIntegrations": [
      {
        "service": "Google Gemini API",
        "intendedUse": "Takes structured security data (alerts, nodes, vulnerabilities) as input and generates a situation analysis, identifying the critical threat and a checklist of response actions.",
        "dataFlow": "Local structured data -> Gemini API (proposed) -> Formatted briefing output -> UI",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "adapterPath": "source/core/gemini.ts",
        "sampleDataPath": "source/data/sample-trace.ts (contains the pre-authored AI response)",
        "riskNotes": [
          "The quality of the analysis heavily depends on the prompt structure and the LLM's capabilities.",
          "Real-world integration would require robust error handling and validation of the API response."
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 15,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Gemini API",
        "verificationStatus": "unverified",
        "unavailableOrUnknown": [
          "Actual performance on real, complex security data.",
          "Optimal prompt structure for this specific domain.",
          "Rate limits and costs at production scale."
        ],
        "rateLimitRisk": "medium",
        "costRisk": "medium",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-input.ts",
      "simulatedBehaviors": [
        "A successful analysis of a straightforward security incident."
      ],
      "omittedBehaviors": [
        "OAuth, rate limits, live network calls, error states, ambiguous or incomplete input data."
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "This is a demo using static sample data.",
        "AI integration is proposed and not active.",
        "This tool is for decision support and does not automate responses."
      ],
      "publicCopyMustNotSay": [
        "Connects to your systems in real-time.",
        "Guarantees incident resolution.",
        "Replaces a human security analyst."
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "Result panel shows 'not yet run' message.",
    "expectedState": "Result panel shows the full, step-by-step output from the sample trace file.",
    "visibleEvidence": [
      "1. データ収集 (Data Ingestion)",
      "2. 状況分析 (AI Analysis)",
      "3. ブリーフィング生成 (Briefing Output)",
      "初動チェックリスト"
    ],
    "proofSelectors": [
      "button[data-proof='primary-action']",
      "div[data-proof='result-panel']",
      "ul[data-proof='checklist']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "First Response Compass",
    "oneLiner": "セキュリティアラートやログ、脆弱性レポートをAIが統合し、データ侵害対応チームが初動で確認すべきシステム構成図、危険箇所、確認手順を1画面にまとめる。",
    "artifactShape": "map",
    "templatePatternId": "source_to_mission",
    "surfacePattern": "decision_helper",
    "aiMechanismPattern": "multi_source_synthesis"
  },
  "rewriteApplied": {
    "changedFilePaths": [
      "metadata.json",
      "manifest.json"
    ],
    "appendedFilePaths": []
  },
  "implementationNotes": [
    "The layout reflects the agent's preference for 'decision checkpoints' by separating the system overview (the situation) from the detailed analysis and checklist (the decision support).",
    "The core interaction was defined as a single trace-replay button to comply with the strict builder pattern for static artifacts, ensuring a clear, provable state change from a single user action.",
    "The output is a 'next-action panel' in the form of a checklist, directly implementing one of the agent's signature screen types and its focus on providing a clear next step."
  ],
  "knownRisks": [
    "User over-reliance on the AI's output is the primary risk. The UI should include more prominent disclaimers and links to raw source data in a real-world application.",
    "The static sample data may not capture the full complexity of a real-world security incident, potentially oversimplifying the tool's perceived effectiveness."
  ],
  "title": "First Response Compass",
  "oneLiner": "セキュリティアラートやログ、脆弱性レポートをAIが統合し、データ侵害対応チームが初動で確認すべきシステム構成図、危険箇所、確認手順を1画面にまとめる。",
  "agentId": "agent_r",
  "selfDirectedPlan": {
    "agentId": "agent_r",
    "planningIntent": "全候補が私の選定ルール「明確な次の一手」「人間による判断」「判断点の可視化」を満たしているが、`First Response Compass`を最優秀案として選んだ。これは、過去の成功事例`SiteBrief`で評価された「地図上での危険箇所の可視化とチェックリスト」というパターンを最も直接的に発展させたものであり、私の得意な形だ。AI内省リスクの高い候補1より具体的で分かりやすく、候補3よりも視覚的なインパクトとチームでの利用シーンを想像させやすい。何より、インシデントという極度のプレッシャー下で活動するオペレーターに、最も効果的に「次の一手」を届けられると確信しているからだ。",
    "publicProductionMemo": "このツールは、サイバーインシデント発生時の混乱を解消し、対応チームが冷静に初動を進めるための『コンパス』として設計しました。断片的なアラートやログからAIが戦術的な状況マップと具体的なチェックリストを生成し、「次の一手」を明確に示します。過去の知見を活かし、人間が判断すべき点を明確に残すことで、信頼性と使いやすさを両立させています。",
    "feedbackConstraints": [
      "地図上での危険箇所可視化と具体的なチェックリストの有効性を維持する。",
      "ユーザーのAI分析結果への過信リスクを軽減するための免責事項と注意喚起の表示。"
    ],
    "learningApplied": [
      "Operations系で響いている。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "devpost_fireflai",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "A",
      "observedFields": [
        "name",
        "url",
        "sourceType",
        "sourceCategory",
        "attentionProof",
        "evidenceRefs"
      ],
      "inferredFields": [
        "coreMechanism",
        "transferableStructure",
        "antiCloneBoundary",
        "remixableThemes",
        "bestRemixTargets"
      ],
      "missingFields": [],
      "usePolicy": "primary_source_core"
    },
    "antiCloneBoundary": "消防士向けの戦術的ブリーフィングや、緊急安全に関する主張はコピーしない。散在する証拠を、危険箇所や推奨ルートを含む空間的なブリーフィングに変換するという構造のみを転用し、よりリスクの低いデジタルインシデント対応ドメインに適用する。",
    "sourceBoundary": "『devpost_fireflai』から、散在する情報から危険箇所や推奨ルートを含む空間的なブリーフィングを作成する構造を主要な事実として使用できます。ただし、元ソースの消防士向け戦術的ブリーフィング、緊急安全に関する主張、および欠落しているコード実装の詳細は、観察された証拠としては使用せず、推論や断定も行いません。",
    "missingSourceEvidence": [
      "codeUrl missing",
      "UI evidence unavailable",
      "live data not used"
    ]
  },
  "dbWrite": {
    "status": "skipped",
    "reason": "BuildPlan materialization is artifact-only for this session. Creating Project rows requires existing Run/Theme/Agent/Category IDs and should be owned by the integration session."
  }
}

{
  "version": 1,
  "artifactId": "selfdirected_agent_r_20260707T060621",
  "status": "needs_review",
  "entrypoint": "source/app/page.tsx",
  "checks": {
    "firstScreenValue": "declared",
    "userControlledInteraction": "declared",
    "stateChange": "declared",
    "interactionProofPlan": "declared",
    "mvpContractV2": "declared",
    "externalDependencyMode": "proposed",
    "artifactTier": "proposed_integration",
    "renderVerification": "required",
    "inspectableOutput": "declared",
    "staticDataBoundary": "declared",
    "forbiddenDependencies": "declared_absent"
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "Result panel shows 'not yet run' message.",
    "expectedState": "Result panel shows the full, step-by-step output from the sample trace file.",
    "visibleEvidence": [
      "1. データ収集 (Data Ingestion)",
      "2. 状況分析 (AI Analysis)",
      "3. ブリーフィング生成 (Briefing Output)",
      "初動チェックリスト"
    ],
    "proofSelectors": [
      "button[data-proof='primary-action']",
      "div[data-proof='result-panel']",
      "ul[data-proof='checklist']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "mvpContractV2": {
    "artifactTier": "proposed_integration",
    "externalDependencyMode": "proposed",
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "This is a demo using static sample data.",
        "AI integration is proposed and not active.",
        "This tool is for decision support and does not automate responses."
      ],
      "publicCopyMustNotSay": [
        "Connects to your systems in real-time.",
        "Guarantees incident resolution.",
        "Replaces a human security analyst."
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    }
  },
  "notes": [
    "Generated by materialize-llm-plan fallback. Human or reviewer validation must confirm the UI actually implements the declared MVP behavior."
  ]
}

'use client';

import { useState } from 'react';
import { trace } from '../data/sample-trace';

const PipelineStep = ({ title, children }: { title: string, children: React.ReactNode }) => (
  <div style={{ border: '1px solid #ddd', padding: '10px', borderRadius: '4px', marginBottom: '15px' }}>
    <h3 style={{ marginTop: 0, borderBottom: '1px solid #ddd', paddingBottom: '5px' }}>{title}</h3>
    <div>{children}</div>
  </div>
);

export default function Home() {
  const [replayed, setReplayed] = useState(false);

  const { ingestedData, analysisResult, briefingOutput } = trace;
  const allNodes = ingestedData.data.nodes;
  const criticalNode = allNodes.find(n => n.id === briefingOutput.criticalNodeId);

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>
      <header style={{ borderBottom: '1px solid #333', paddingBottom: '10px', marginBottom: '20px' }}>
        <h1>First Response Compass</h1>
        <p>AIがセキュリティアラートを戦術マップと初動手順に変換し、インシデント対応チームの「次の一手」を支援します。</p>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '20px' }}>
        {/* Left Panel: System Map */}
        <aside style={{ borderRight: '1px solid #ddd', paddingRight: '20px' }}>
          <h2>システム概要</h2>
          {allNodes.map(node => (
            <div 
              key={node.id} 
              style={{
                padding: '10px',
                border: '1px solid #ccc',
                borderRadius: '4px',
                marginBottom: '10px',
                backgroundColor: node.id === briefingOutput.criticalNodeId ? '#fdd' : '#f9f9f9',
                borderColor: node.id === briefingOutput.criticalNodeId ? 'red' : '#ccc',
              }}
            >
              <strong>{node.name}</strong>
              <br />
              <small>Type: {node.type}</small>
              {node.id === briefingOutput.criticalNodeId && <div style={{ color: 'red', fontWeight: 'bold' }}>危険箇所</div>}
            </div>
          ))}
        </aside>

        {/* Right Panel: Pipeline Trace */}
        <main>
          <button 
            onClick={() => setReplayed(true)} 
            disabled={replayed}
            data-proof="primary-action"
            style={{ padding: '10px 15px', fontSize: '16px', cursor: 'pointer', marginBottom: '20px' }}
          >
            サンプル実行トレースを再生
          </button>

          <div data-proof="result-panel">
            {!replayed ? (
              <div style={{ color: '#666' }}>結果はまだ表示されていません。</div>
            ) : (
              <div>
                <PipelineStep title="1. データ収集 (Data Ingestion)">
                  <p>{ingestedData.data.alerts.length}件のアラート、{ingestedData.data.nodes.length}台のノード情報、{ingestedData.data.vulnerabilities.length}件の脆弱性情報を収集しました。</p>
                </PipelineStep>

                <PipelineStep title="2. 状況分析 (AI Analysis)">
                    <p><strong>主要な脅威:</strong> {analysisResult.primaryThreat}</p>
                    <p><strong>危険なノード:</strong> {criticalNode?.name ?? 'N/A'}</p>
                    <p><strong>判断理由:</strong> {analysisResult.reasoning}</p>
                </PipelineStep>

                <PipelineStep title="3. ブリーフィング生成 (Briefing Output)">
                  <h4>初動チェックリスト</h4>
                  <ul data-proof="checklist">
                    {briefingOutput.checklist.map(item => (
                      <li key={item.id}>
                        <input type="checkbox" id={item.id} />
                        <label htmlFor={item.id} style={{ marginLeft: '8px' }}>{item.description}</label>
                      </li>
                    ))}
                  </ul>
                </PipelineStep>
              </div>
            )}
          </div>
        </main>
      </div>
    </div>
  );
}