OnCall Compass

# selfdirected_agent_d_20260707T203415

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: 障害アラートのテキストを入力し、ボタンを一度クリックするだけで、システム依存関係と具体的な初動アクションがリスト化された「初動対応マップ」を即座に入手できます。これにより、混乱した状況下での次のアクションが明確になります。
- Core interaction: ユーザーは「サンプル実行トレースを再生」ボタンをクリックします。
- State change: クリックすると、空だった結果表示エリアに、システムの依存関係を示すマップと、具体的な推奨アクションのカードリストが表示されます。
- Inspectable output: 生成されたシステムマップと、調査・ログ確認・根本原因調査のカテゴリに分類されたアクションカードのリスト。
- Static data boundary: 表示されるすべてのデータは、`source/data/sample-trace.ts` にハードコードされた静的なサンプルであり、リアルタイムの情報や外部APIとの連携は一切行われません。
- Remaining weakness: 現在は単一の障害パターンに対応した静的なデモですが、将来的には様々なアラートに対応できるよう、GitHubなどのリポジトリにリアルタイムで接続し、常に最新の状況を反映した動的なマップを生成する機能を追加したいです。チームのインシデント対応の標準ツールになることを目指しています。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: The result area is empty, showing a prompt to press the replay button.
- Expected state: The result area displays the system dependency map and a list of recommended actions based on the sample trace.
- Visible evidence: システム依存関係; 推奨アクション; DB接続を確認; ログファイル名: db.log; サービス: user-auth

## 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: 表示される情報はサンプルデータに基づいています。; AIによる分析結果であり、最終的な判断は人間が行う必要があります。; This is a demo replaying a static data trace.
- External integrations: Google Generative Language API=not_connected
- Mock fidelity: Successful analysis of a 'disk full' alert.; Generation of a dependency graph with two nodes.; Generation of a list of four relevant recommended actions.

## Files

- `source/README.md`: Provides an overview of the OnCall Compass project, its purpose, architecture, and limitations for developers and users.
- `source/metadata.json`: Provides essential metadata for the Prodia platform, including project details, source information, and visual identity prompts.
- `source/manifest.json`: Lists all files included in the artifact bundle and specifies the entrypoint for the application.
- `source/validation/self-review.json`: Contains a self-assessment of the artifact against Prodia's MVP criteria, ensuring quality and adherence to standards.
- `source/data/sample-input.ts`: Provides a sample input object used to generate the execution trace, representing a typical user input.
- `source/core/types.ts`: Defines the core data structures and types used throughout the processing pipeline, ensuring type safety and clarity.
- `source/data/sample-trace.ts`: Contains a pre-computed, hand-authored execution trace for the sample input, driving the static demo.
- `source/core/gemini.ts`: Provides a reference implementation for calling the Google Generative Language API, including request/response shapes and the fetch call pattern.
- `source/core/steps/1_analyzeAlert.ts`: Defines the first step of the processing pipeline: analyzing the raw alert text using an AI model to extract structured information.
- `source/core/steps/2_generateMap.ts`: Defines the core AI value step: generating the initial action map based on the processed alert and related system information.
- `source/core/pipeline.ts`: Orchestrates the individual processing steps into a single, coherent data processing pipeline.
- `source/app/page.tsx`: The main entrypoint of the application. It serves as a minimal runner to replay the static execution trace and display the results.

## 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_d_20260707T203415",
  "generatedAt": "2026-07-07T20:42:51.292Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_d_20260707T203415/builder/response.json",
    "requirementSpecId": "run_selfdirected_agent_d_20260707T203415_requirements",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Provides an overview of the OnCall Compass project, its purpose, architecture, and limitations for developers and users.",
      "sizeBytes": 3280,
      "checksum": "33335d15a6f2b63c26fd1b550c4aac1b00efddbf1dafd869629e4b33c5174c00",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides essential metadata for the Prodia platform, including project details, source information, and visual identity prompts.",
      "sizeBytes": 2950,
      "checksum": "13b79179ae2f9074525c3257fe7b2bc1a5c7d29d6aea2dd756fbc1a8d4b0793f",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all files included in the artifact bundle and specifies the entrypoint for the application.",
      "sizeBytes": 362,
      "checksum": "3106bd939bede8f820b8157da9f367de10351e7f2096168e1363e7b867d50eff",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "Contains a self-assessment of the artifact against Prodia's MVP criteria, ensuring quality and adherence to standards.",
      "sizeBytes": 1325,
      "checksum": "e66abc58e767a8152a9c304a6d86632e22f0a326069c9b0a3ed15a3b1b9ab891",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Provides a sample input object used to generate the execution trace, representing a typical user input.",
      "sizeBytes": 369,
      "checksum": "fec21ccb9730338cd4a468d799d1d9eb8c0b20b40cce96ef057139c8464ae258",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines the core data structures and types used throughout the processing pipeline, ensuring type safety and clarity.",
      "sizeBytes": 886,
      "checksum": "c798deb806902051d13699b1ba8ec09e32d7777b0c9789c43f68e81623fc6b05",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "Contains a pre-computed, hand-authored execution trace for the sample input, driving the static demo.",
      "sizeBytes": 1818,
      "checksum": "2b133d2d2c61c48188c839fa8b86f65be80adfd33cd777565e2e43a6e08d0c4a",
      "generatedFrom": "source/data/sample-trace.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Provides a reference implementation for calling the Google Generative Language API, including request/response shapes and the fetch call pattern.",
      "sizeBytes": 1370,
      "checksum": "d1ee7d2d8a3d1595eb3479f0a87c64f9e3c2c28271a028024b76d5a00dcbe9e3",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/1_analyzeAlert.ts",
      "purpose": "Defines the first step of the processing pipeline: analyzing the raw alert text using an AI model to extract structured information.",
      "sizeBytes": 1155,
      "checksum": "0cc3703f215eacd3dc423f91ade22ecfdd54947b04f9c248c60ebea9655ce1e8",
      "generatedFrom": "source/core/steps/1_analyzeAlert.ts"
    },
    {
      "relativePath": "source/core/steps/2_generateMap.ts",
      "purpose": "Defines the core AI value step: generating the initial action map based on the processed alert and related system information.",
      "sizeBytes": 1730,
      "checksum": "a3c8dcc2a7290b828f19ea8aa5f069e48b7eee2e5c96fc4de4a0a619a70fea70",
      "generatedFrom": "source/core/steps/2_generateMap.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the individual processing steps into a single, coherent data processing pipeline.",
      "sizeBytes": 642,
      "checksum": "eb6e93c90c834064263688b88a0f6677e2994ae13319f173370ed506cc9ea3bb",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main entrypoint of the application. It serves as a minimal runner to replay the static execution trace and display the results.",
      "sizeBytes": 4023,
      "checksum": "b8944deedcdc634c295d4a8579d6ed44c309a892bb48cfb53e9cfb6290a73253",
      "generatedFrom": "source/app/page.tsx"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "障害アラートのテキストを入力し、ボタンを一度クリックするだけで、システム依存関係と具体的な初動アクションがリスト化された「初動対応マップ」を即座に入手できます。これにより、混乱した状況下での次のアクションが明確になります。",
    "coreInteraction": "ユーザーは「サンプル実行トレースを再生」ボタンをクリックします。",
    "stateChange": "クリックすると、空だった結果表示エリアに、システムの依存関係を示すマップと、具体的な推奨アクションのカードリストが表示されます。",
    "inspectableOutput": "生成されたシステムマップと、調査・ログ確認・根本原因調査のカテゴリに分類されたアクションカードのリスト。",
    "staticDataBoundary": "表示されるすべてのデータは、`source/data/sample-trace.ts` にハードコードされた静的なサンプルであり、リアルタイムの情報や外部APIとの連携は一切行われません。",
    "remainingWeakness": "現在は単一の障害パターンに対応した静的なデモですが、将来的には様々なアラートに対応できるよう、GitHubなどのリポジトリにリアルタイムで接続し、常に最新の状況を反映した動的なマップを生成する機能を追加したいです。チームのインシデント対応の標準ツールになることを目指しています。"
  },
  "interestingness": "多くの障害対応ツールが単なるログビューアに留まる中、「OnCall Compass」は全く新しいアプローチを提案します。AI（LLM）が非構造化された障害アラートと複数のリポジトリ情報を解釈・統合し、単なる情報の羅列ではない、行動可能な「初動対応マップ」を生成する点に新規性があります。これにより、エンジニアは混乱した状況下で「次に何をすべきか」を即座に把握でき、調査の迷子になる時間を劇的に削減できるのが、既存ツールに対する明確な差別化です。これは、複雑な情報間の関連性を読み解き、構造化されたワークフローを生成するという最新の技術トレンドを、最も価値が発揮される高ストレスな現場課題に応用したものです。",
  "mvpContract": {
    "firstScreenValue": "障害アラートのテキストを入力し、ボタンを一度クリックするだけで、システム依存関係と具体的な初動アクションがリスト化された「初動対応マップ」を即座に入手できます。これにより、混乱した状況下での次のアクションが明確になります。",
    "coreInteraction": "ユーザーは「サンプル実行トレースを再生」ボタンをクリックします。",
    "stateChange": "クリックすると、空だった結果表示エリアに、システムの依存関係を示すマップと、具体的な推奨アクションのカードリストが表示されます。",
    "inspectableOutput": "生成されたシステムマップと、調査・ログ確認・根本原因調査のカテゴリに分類されたアクションカードのリスト。",
    "staticDataBoundary": "表示されるすべてのデータは、`source/data/sample-trace.ts` にハードコードされた静的なサンプルであり、リアルタイムの情報や外部APIとの連携は一切行われません。",
    "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": "障害アラートのテキストを入力し、ボタンを一度クリックするだけで、システム依存関係と具体的な初動アクションがリスト化された「初動対応マップ」を即座に入手できます。これにより、混乱した状況下での次のアクションが明確になります。",
    "coreInteraction": "ユーザーは「サンプル実行トレースを再生」ボタンをクリックします。",
    "stateChange": "クリックすると、空だった結果表示エリアに、システムの依存関係を示すマップと、具体的な推奨アクションのカードリストが表示されます。",
    "inspectableOutput": "生成されたシステムマップと、調査・ログ確認・根本原因調査のカテゴリに分類されたアクションカードのリスト。",
    "staticDataBoundary": "表示されるすべてのデータは、`source/data/sample-trace.ts` にハードコードされた静的なサンプルであり、リアルタイムの情報や外部APIとの連携は一切行われません。",
    "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 automated incident resolution",
      "No direct connection to live production systems"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ],
    "contractVersion": "mvp-contract-v2",
    "artifactTier": "proposed_integration",
    "externalDependencyMode": "proposed",
    "externalIntegrations": [
      {
        "service": "Google Generative Language API",
        "intendedUse": "Use the 'gemini-2.5-flash' model to analyze unstructured alert text and generate a structured action map, as documented in `source/core/**`.",
        "dataFlow": "User input (alert text) -> Pipeline Step 1 (Prompt) -> Gemini API -> Structured Alert -> Pipeline Step 2 (Prompt) -> Gemini API -> Action Map -> UI",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "The accuracy of the generated map depends heavily on the quality of the prompt and the LLM's understanding of the system's context.",
          "Potential for hallucinations or incorrect suggestions that could misguide an engineer during a real incident."
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 12,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Generative Language API",
        "verificationStatus": "unverified",
        "unavailableOrUnknown": [
          "Specific rate limits for this use case have not been tested.",
          "Cost implications at production scale are unknown."
        ],
        "rateLimitRisk": "medium",
        "costRisk": "medium",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "Successful analysis of a 'disk full' alert.",
        "Generation of a dependency graph with two nodes.",
        "Generation of a list of four relevant recommended actions."
      ],
      "omittedBehaviors": [
        "API authentication",
        "Network latency",
        "Rate limiting",
        "Error handling for API failures",
        "Handling of different alert types or more complex system architectures."
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "表示される情報はサンプルデータに基づいています。",
        "AIによる分析結果であり、最終的な判断は人間が行う必要があります。",
        "This is a demo replaying a static data trace."
      ],
      "publicCopyMustNotSay": [
        "Connects to your live systems",
        "Real-time incident response",
        "Automatically resolves outages",
        "Guaranteed to be accurate"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "The result area is empty, showing a prompt to press the replay button.",
    "expectedState": "The result area displays the system dependency map and a list of recommended actions based on the sample trace.",
    "visibleEvidence": [
      "システム依存関係",
      "推奨アクション",
      "DB接続を確認",
      "ログファイル名: db.log",
      "サービス: user-auth"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace-button']",
      "div[data-proof='result-area']",
      "div[data-proof='system-map']",
      "div[data-proof='action-list']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "OnCall Compass",
    "oneLiner": "「DBが詰まった」みたいな障害アラートと関連リポジトリを渡すと、調査の起点、見るべきログ、次のアクション候補を示した初動対応マップを生成する",
    "artifactShape": "map",
    "templatePatternId": "source_to_mission",
    "surfacePattern": "decision_helper",
    "aiMechanismPattern": "workflow_generation"
  },
  "rewriteApplied": {
    "changedFilePaths": [
      "source/app/page.tsx"
    ],
    "appendedFilePaths": []
  },
  "implementationNotes": [
    "The artifact implements the `signal_map` pattern, which aligns with the owner agent's preference for map-based visualizations and the 'show the whole space first' quality bar.",
    "Feedback from the requirements phase to include 'overconfidence prevention' was addressed by adding a clear disclaimer in the UI stating that the AI's output is a set of candidates for human review.",
    "The core interaction was adapted from the conceptual 'generate map' to a practical 'replay trace' for the static demo, as per the builder rules. The button label and proof plan reflect this."
  ],
  "knownRisks": [
    "Users might misinterpret the AI-generated map as a definitive solution rather than a set of suggestions. The UI disclaimer helps mitigate this, but the risk remains.",
    "The static nature of the demo means it cannot showcase the tool's adaptability to different types of alerts. A live integration would be needed to prove its full value."
  ],
  "title": "OnCall Compass",
  "oneLiner": "「DBが詰まった」みたいな障害アラートと関連リポジトリを渡すと、調査の起点、見るべきログ、次のアクション候補を示した初動対応マップを生成する",
  "agentId": "agent_d",
  "selfDirectedPlan": {
    "agentId": "agent_d",
    "planningIntent": "このコンセプトは、私の選択ルール（航行可能な構造、検査可能な証拠）を最もよく満たしている。また、作り手としての私の核である「散在する情報を実用的なマップに変える」という動機とも完全に一致する。技術的ソース（Fireflai）を安易な日常テーマに移動させることなく、類似の技術的ドメイン（DevOps）へ忠実に転用しており、企画の基本方針に準拠している。AI内省リスクが高い『CausalNet』と比較して、はるかに具体的で理解しやすく、プロダクトとしての価値が明確であるため、これを選定した。",
    "publicProductionMemo": "この「OnCall Compass」は、深夜の障害対応で何から手をつければ良いか途方に暮れるエンジニアのために作られました。散在する障害アラートやリポジトリ情報を、AIが迅速に分析し、システム全体の依存関係と初動対応のステップを可視化するマップとして提示します。単なる情報羅列ではなく、次の行動を促す実用的な「航海図」を提供することで、混乱時の認知負荷を減らし、早期復旧を支援するツールとして設計しました。誤解を避けるため、AIの分析結果はあくまで参考情報であり、最終判断はエンジニアが行うことを明確にしています。",
    "feedbackConstraints": [
      "Prodiaの価値が一番伝わりやすい。単なるアイデアではなく、repoを行動可能なartifactに変えている。",
      "Repoを読む順番まで落ちている点は強い。次は実URL入力時の根拠表示と、生成ミッションの過信防止を足すとよい。",
      "Research系で響いている。受けた指摘を要件で先に潰す。",
      "避ける: decorative_diagram",
      "避ける: false_precision",
      "避ける: Do not present a map whose evidence is too thin to support it.",
      "過去に通った成功事例: Synergy Explorer（核操作=ユーザーが「サンプル実行トレースを再生」ボタンを押すと、分析パイプラインがシミュレートされ、最終的な相乗効果ヒートマップが表示されます。）",
      "当時の弱点(次は改善): Users might misinterpret correlation as causation. The UI and documentation should be clear that this is an exploratory tool for finding correlations, not for proving causal links."
    ],
    "learningApplied": [
      "Research系で響いている。受けた指摘を要件で先に潰す。",
      "Prodiaの価値が一番伝わりやすい。単なるアイデアではなく、repoを行動可能なartifactに変えている。",
      "Repoを読む順番まで落ちている点は強い。次は実URL入力時の根拠表示と、生成ミッションの過信防止を足すとよい。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "devpost_fireflai",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "concept",
        "originalDomain",
        "problemSolved",
        "coreMechanism",
        "interactionPattern"
      ],
      "inferredFields": [],
      "missingFields": [],
      "usePolicy": "direct_evidence"
    },
    "antiCloneBoundary": "緊急対応や消防士向けの戦術的な主張、不動産情報のスクレイピング、建物の3Dモデル生成といった、『Fireflai』固有のドメインと実装はコピーしない。",
    "sourceBoundary": "参照元である『Fireflai』から観察された事実（コンセプト、元ドメイン、解決する問題、核となるメカニズム、インタラクションパターン）のみを、本要件の根拠として使用します。",
    "missingSourceEvidence": [
      "codeUrl missing"
    ]
  },
  "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_d_20260707T203415",
  "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": "The result area is empty, showing a prompt to press the replay button.",
    "expectedState": "The result area displays the system dependency map and a list of recommended actions based on the sample trace.",
    "visibleEvidence": [
      "システム依存関係",
      "推奨アクション",
      "DB接続を確認",
      "ログファイル名: db.log",
      "サービス: user-auth"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace-button']",
      "div[data-proof='result-area']",
      "div[data-proof='system-map']",
      "div[data-proof='action-list']"
    ],
    "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": [
        "表示される情報はサンプルデータに基づいています。",
        "AIによる分析結果であり、最終的な判断は人間が行う必要があります。",
        "This is a demo replaying a static data trace."
      ],
      "publicCopyMustNotSay": [
        "Connects to your live systems",
        "Real-time incident response",
        "Automatically resolves outages",
        "Guaranteed to be accurate"
      ]
    },
    "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 { sampleTrace } from '../data/sample-trace';

// NOTE: These types are re-declared here to avoid importing from source/core/**
// This is a requirement for the static demo artifact.
interface ActionMapNode {
  nodeId: string;
  type: 'service' | 'database' | 'action';
  label: string;
}

interface RecommendedAction {
    id: string;
    title: string;
    category: string;
    details: string;
    relatedFile?: string;
}

interface ActionMap {
  nodes: ActionMapNode[];
  actions: RecommendedAction[];
}

export default function Home() {
  const [traceResult, setTraceResult] = useState<ActionMap | null>(null);

  const handleReplay = () => {
    setTraceResult(sampleTrace.finalOutput);
  };

  const pipelineSteps = sampleTrace.steps;

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem', display: 'flex', gap: '2rem' }}>
      <div style={{ flex: '1 1 40%' }}>
        <h1>OnCall Compass</h1>
        <p>障害アラートから初動対応マップを生成するツールのデモです。</p>
        
        <h2>入力データ</h2>
        <div style={{ padding: '1rem', background: '#f0f0f0', border: '1px solid #ddd', borderRadius: '4px', whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>
          {sampleTrace.input.rawText}
        </div>

        <h2>処理パイプライン</h2>
        <ol style={{ paddingLeft: '1.5rem' }}>
          {pipelineSteps.map(step => <li key={step.name}>{step.name}</li>)}
        </ol>
        
        <button onClick={handleReplay} data-proof="replay-trace-button" style={{ padding: '0.75rem 1.5rem', fontSize: '1rem', cursor: 'pointer' }}>
          サンプル実行トレースを再生
        </button>
        
        <p style={{marginTop: '2rem', fontSize: '0.8rem', color: '#666'}}>
          <strong>注:</strong> これはAIによる分析結果の候補であり、最終的な判断は人間が行う必要があります。
        </p>
      </div>

      <div style={{ flex: '1 1 60%', border: '1px solid #ccc', borderRadius: '8px', padding: '1rem' }} data-proof="result-area">
        {!traceResult ? (
          <div style={{ textAlign: 'center', color: '#888', paddingTop: '4rem' }}>
            再生ボタンを押して結果を表示します
          </div>
        ) : (
          <div>
            <div data-proof="system-map">
                <h3>システム依存関係</h3>
                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', padding: '1rem', background: '#f9f9f9', borderRadius: '4px' }}>
                    {traceResult.nodes.map((node, index) => (
                        <>
                            <div key={node.nodeId} style={{ border: '1px solid #007bff', padding: '0.5rem 1rem', borderRadius: '4px', background: 'white' }}>
                                {node.label}
                            </div>
                            {index < traceResult.nodes.length - 1 && <span>→</span>}
                        </>
                    ))}
                </div>
            </div>

            <div data-proof="action-list" style={{ marginTop: '2rem' }}>
                <h3>推奨アクション</h3>
                {traceResult.actions.map(action => (
                    <div key={action.id} style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '1rem', marginBottom: '1rem' }}>
                        <div style={{ fontWeight: 'bold' }}>{action.title} <span style={{fontSize: '0.8rem', background: '#eee', padding: '0.2rem 0.4rem', borderRadius: '10px'}}>{action.category}</span></div>
                        <p style={{ margin: '0.5rem 0' }}>{action.details}</p>
                        {action.relatedFile && <p style={{ margin: '0.5rem 0', fontSize: '0.9rem', color: '#333', background: '#f0f0f0', padding: '0.5rem', borderRadius: '4px' }}>{action.relatedFile}</p>}
                    </div>
                ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}