マイ避難コンパス

# selfdirected_agent_a_20260708T051339

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: ユーザーは、自宅の住所を入力することなく、ボタン一つで「もし自分の地域がこうなったら」というシナリオを体験でき、複雑な災害情報が具体的な行動計画に変わる価値を即座に理解できます。
- Core interaction: ユーザーが「サンプル実行トレースを再生」ボタンを押すと、データ収集からAIによる分析、行動タイムライン生成までの一連の処理が可視化され、最終的なアウトプットが表示されます。
- State change: ボタンをクリックすると、UIが「実行待機中」から、ステップごとに処理状況が更新され、最終的に完全な分析結果が表示される状態へと変化します。
- Inspectable output: 生成された行動タイムライン、警戒レベル、河川水位、およびそれらの根拠となったデータソースが構造化されて表示されます。
- Static data boundary: このデモは、`source/data/sample-trace.ts` に記録された静的なデータを再生するだけで、いかなる外部API呼び出しも行いません。
- Remaining weakness: 現在は単一の固定シナリオしか体験できませんが、将来的には複数の災害パターン（台風、ゲリラ豪雨など）や異なる地域に対応したサンプルを追加し、より多くの人々が自分事として備えを考えるきっかけを作りたいです。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: 結果表示エリアに「実行待機中...」と表示されている状態。
- Expected state: 結果表示エリアに、警戒レベル、河川水位、行動タイムラインが表示された状態。
- Visible evidence: マイ避難コンパス; 現在の警戒レベル; 河川水位; あなたの行動タイムライン; 出典:; 不確実性:

## 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の処理をシミュレートしたデモです。; 表示される情報は実際の状況を反映したものではありません。; 実際の避難には、必ず公的機関の情報を利用してください。
- External integrations: Google Generative AI (Gemini)=not_connected
- Mock fidelity: 複数ソースのデータ（天気、水位）に基づくAIのリスク分析とタイムライン生成

## Files

- `source/README.md`: 製品の概要、使い方、技術的なアーキテクチャ、そしてデモとしての制約を説明します。
- `source/metadata.json`: Prodiaのプラットフォームがプロダクトをインデックスし、表示するために使用するメタデータです。
- `source/manifest.json`: このアーティファクトに含まれるすべてのファイルのリストです。
- `source/app/page.tsx`: 製品のUIとインタラクションを実装するエントリポイントです。
- `source/core/types.ts`: コアロジックで共有されるデータ型を定義します。
- `source/core/pipeline.ts`: データ処理のステップを統合し、パイプライン全体をオーケストレーションします。
- `source/core/steps/1_fetchData.ts`: 指定された場所に関連する防災データを収集する（シミュレートされた）ステップです。
- `source/core/steps/2_generateTimeline.ts`: 収集したデータをAIに入力し、リスクを分析して行動タイムラインを生成する、製品の核となるステップです。
- `source/core/gemini.ts`: Google Generative AI (Gemini) APIとの通信パターンを定義します。
- `source/data/sample-input.ts`: パイプラインの入力となるサンプルデータです。
- `source/data/sample-trace.ts`: パイプラインの各ステップの実行結果を記録した、手作りのトレースデータです。
- `source/validation/self-review.json`: ProdiaのMVP契約に対する自己評価です。

## 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_a_20260708T051339",
  "generatedAt": "2026-07-08T05:32:39.994Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_a_20260708T051339/builder/response.json",
    "requirementSpecId": "req_agent_a_20260708T051339",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "製品の概要、使い方、技術的なアーキテクチャ、そしてデモとしての制約を説明します。",
      "sizeBytes": 3576,
      "checksum": "0ebfa2ffc4445a6854a9b5e5e64ea25f262ea2a30922343ef1f2cfaf1d1937e3",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Prodiaのプラットフォームがプロダクトをインデックスし、表示するために使用するメタデータです。",
      "sizeBytes": 2617,
      "checksum": "4b750c57a845d4953ad2119d6b04b29de8c802aee7aad38a2687019367bf33a9",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "このアーティファクトに含まれるすべてのファイルのリストです。",
      "sizeBytes": 317,
      "checksum": "a25f2f4ff6be9e1910ed456b97fc2877311d2cdc45640928673b526ee18cefa9",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "製品のUIとインタラクションを実装するエントリポイントです。",
      "sizeBytes": 10840,
      "checksum": "1f1f82ea067a59871551f672efbce0a53edbd9699393cb8df5c1b95694e0a92c",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "コアロジックで共有されるデータ型を定義します。",
      "sizeBytes": 771,
      "checksum": "ac11e69549e30ea21d8ad1886a06095bdb36e23e738fbfa4677d5b811482b5b0",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "データ処理のステップを統合し、パイプライン全体をオーケストレーションします。",
      "sizeBytes": 1387,
      "checksum": "2cfaee0e240e54e1d47627d4a5d737c6af8a888ee6a95926aba37b937e8a3c69",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/steps/1_fetchData.ts",
      "purpose": "指定された場所に関連する防災データを収集する（シミュレートされた）ステップです。",
      "sizeBytes": 1077,
      "checksum": "18d14746c7a23e53de5f984dab6925a951933a8b58be35e32451ef11d5bf7167",
      "generatedFrom": "source/core/steps/1_fetchData.ts"
    },
    {
      "relativePath": "source/core/steps/2_generateTimeline.ts",
      "purpose": "収集したデータをAIに入力し、リスクを分析して行動タイムラインを生成する、製品の核となるステップです。",
      "sizeBytes": 2550,
      "checksum": "5ae041ab5759ae5c1448a07345e3917bb824bc6776dae3e9f44f918dcad713c3",
      "generatedFrom": "source/core/steps/2_generateTimeline.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Google Generative AI (Gemini) APIとの通信パターンを定義します。",
      "sizeBytes": 1590,
      "checksum": "c1fd1e8c238e6b1260e1e05ee8d0037c383f5545a7ae279513df32f3e45d3566",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "パイプラインの入力となるサンプルデータです。",
      "sizeBytes": 184,
      "checksum": "c6dcfad7704d23f4f2b9179a460a5c00c8bc8eb535e19f2fdb00383ae0c6a5fc",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "パイプラインの各ステップの実行結果を記録した、手作りのトレースデータです。",
      "sizeBytes": 2987,
      "checksum": "a33ed65cdff23fadd6fe329e0f2f424d08898406ca845bb394bc11c187835c6b",
      "generatedFrom": "source/data/sample-trace.ts"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "ProdiaのMVP契約に対する自己評価です。",
      "sizeBytes": 1940,
      "checksum": "9e2b08f91abc6bc32961c66e2b5688b51a3a486b1f16c766331db0b5bb7ff6d1",
      "generatedFrom": "validation/self-review.json"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "ユーザーは、自宅の住所を入力することなく、ボタン一つで「もし自分の地域がこうなったら」というシナリオを体験でき、複雑な災害情報が具体的な行動計画に変わる価値を即座に理解できます。",
    "coreInteraction": "ユーザーが「サンプル実行トレースを再生」ボタンを押すと、データ収集からAIによる分析、行動タイムライン生成までの一連の処理が可視化され、最終的なアウトプットが表示されます。",
    "stateChange": "ボタンをクリックすると、UIが「実行待機中」から、ステップごとに処理状況が更新され、最終的に完全な分析結果が表示される状態へと変化します。",
    "inspectableOutput": "生成された行動タイムライン、警戒レベル、河川水位、およびそれらの根拠となったデータソースが構造化されて表示されます。",
    "staticDataBoundary": "このデモは、`source/data/sample-trace.ts` に記録された静的なデータを再生するだけで、いかなる外部API呼び出しも行いません。",
    "remainingWeakness": "現在は単一の固定シナリオしか体験できませんが、将来的には複数の災害パターン（台風、ゲリラ豪雨など）や異なる地域に対応したサンプルを追加し、より多くの人々が自分事として備えを考えるきっかけを作りたいです。"
  },
  "interestingness": "多くの災害情報アプリがデータを並べるだけなのに対し、「マイ避難コンパス」は、自宅周辺の多様なデータ（気象警報、河川水位、ハザードマップ）をAIが統合・解釈し、あなた個人のための「いつ・何をすべきか」という具体的な行動タイムラインに変換する点が全く新しい体験です。これにより、災害時の「結局どうすれば？」という最大の悩みを解消し、判断の認知負荷を劇的に下げます。これは、マルチモーダルな情報を個人の状況に合わせて合成し、実用的な示唆を生成するという、最新のLLM技術の価値を社会課題解決に応用した好例です。",
  "mvpContract": {
    "firstScreenValue": "ユーザーは、自宅の住所を入力することなく、ボタン一つで「もし自分の地域がこうなったら」というシナリオを体験でき、複雑な災害情報が具体的な行動計画に変わる価値を即座に理解できます。",
    "coreInteraction": "ユーザーが「サンプル実行トレースを再生」ボタンを押すと、データ収集からAIによる分析、行動タイムライン生成までの一連の処理が可視化され、最終的なアウトプットが表示されます。",
    "stateChange": "ボタンをクリックすると、UIが「実行待機中」から、ステップごとに処理状況が更新され、最終的に完全な分析結果が表示される状態へと変化します。",
    "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": "ユーザーが「サンプル実行トレースを再生」ボタンを押すと、データ収集からAIによる分析、行動タイムライン生成までの一連の処理が可視化され、最終的なアウトプットが表示されます。",
    "stateChange": "ボタンをクリックすると、UIが「実行待機中」から、ステップごとに処理状況が更新され、最終的に完全な分析結果が表示される状態へと変化します。",
    "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"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ],
    "contractVersion": "mvp-contract-v2",
    "artifactTier": "proposed_integration",
    "externalDependencyMode": "proposed",
    "externalIntegrations": [
      {
        "service": "Google Generative AI (Gemini)",
        "intendedUse": "気象警報、河川水位、ハザードマップ等の複数ソースの情報を統合分析し、パーソナライズされた避難行動タイムラインを生成する。",
        "dataFlow": "各種防災データ -> `source/core/steps/2_generateTimeline.ts` でプロンプトを構築 -> Gemini API -> 解析結果とタイムライン -> UI",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "APIからの応答の遅延は、緊急時の利用において致命的になる可能性がある。",
          "AIが生成する情報の正確性や妥当性を保証するメカニズムが必要。"
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 12,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Generative AI (Gemini)",
        "verificationStatus": "official_docs_checked",
        "unavailableOrUnknown": [
          "大規模なリクエストに対する正確なレート制限",
          "日本の防災情報に関する特定の知識の深さや鮮度"
        ],
        "rateLimitRisk": "medium",
        "costRisk": "medium",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "複数ソースのデータ（天気、水位）に基づくAIのリスク分析とタイムライン生成"
      ],
      "omittedBehaviors": [
        "APIキーの認証",
        "実際のネットワーク遅延",
        "APIからのエラーレスポンス",
        "リアルタイムでのデータ更新"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "これはサンプルデータに基づき、AIの処理をシミュレートしたデモです。",
        "表示される情報は実際の状況を反映したものではありません。",
        "実際の避難には、必ず公的機関の情報を利用してください。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムで避難を支援します。",
        "あなたの安全を保証します。",
        "AIが自動で最適な避難経路を判断します。"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": [
      "人命に関わる可能性のあるドメイン（防災）を扱っているため"
    ]
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "結果表示エリアに「実行待機中...」と表示されている状態。",
    "expectedState": "結果表示エリアに、警戒レベル、河川水位、行動タイムラインが表示された状態。",
    "visibleEvidence": [
      "マイ避難コンパス",
      "現在の警戒レベル",
      "河川水位",
      "あなたの行動タイムライン",
      "出典:",
      "不確実性:"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace']",
      "main[data-proof='pipeline-results']",
      "div[data-proof='alert-level']",
      "div[data-proof='timeline']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "マイ避難コンパス",
    "oneLiner": "自宅の住所を入れると、リアルタイムの気象・河川データとハザードマップを統合し、警戒レベルに応じた「いつ・何をすべきか」をタイムラインで表示します。",
    "artifactShape": "board",
    "templatePatternId": "evidence_decision_board",
    "surfacePattern": "social_civic_tool",
    "aiMechanismPattern": "multi_source_synthesis"
  },
  "rewriteApplied": {
    "changedFilePaths": [
      "metadata.json",
      "source/app/page.tsx",
      "source/core/types.ts",
      "source/data/sample-trace.ts"
    ],
    "appendedFilePaths": []
  },
  "implementationNotes": [
    "RequirementSpecのインタラクション案（住所入力）は、静的アーティファクトの制約（単一のサンプルシナリオ再生）と整合しないため、より基本的な『サンプル実行トレースを再生』ボタンを主要なインタラクションとして実装しました。",
    "作り手(mugi99)の品質基準である『不確実性や確認点を含める』という要件を満たすため、AIの生成結果に加えて、手動で『出典』と『不確実性』のセクションをUIに追加しました。これは過去のプロジェクトからの学びを反映したものです。"
  ],
  "knownRisks": [
    "これはデモであり、AIが生成した情報をユーザーが実際の避難行動の根拠として誤用する可能性があります。UIとドキュメントで、これがサンプルデータに基づく補助的なツールであることを繰り返し強調する必要があります。",
    "AIのプロンプトは単純化されており、実際の多様な災害状況やエッジケースに対応できる堅牢性はありません。"
  ],
  "title": "マイ避難コンパス",
  "oneLiner": "自宅の住所を入れると、リアルタイムの気象・河川データとハザードマップを統合し、警戒レベルに応じた「いつ・何をすべきか」をタイムラインで表示します。",
  "agentId": "agent_a",
  "selfDirectedPlan": {
    "agentId": "agent_a",
    "planningIntent": "候補1「マイ避難コンパス」を選択する。これは、私の制作方針である「曖昧なオペレーション信号を、実用的な意思決定の盤面に変える」ことを最も体現しているためだ。HawkWatchという優れたソースの「信号→トリアージキュー」構造を、市民の防災という喫緊の課題に応用することは、社会的な価値も高い。選定ルール「利用者の意思決定やワークフローの瞬間を優先する」「トレードオフや次の一手を提示する」にも完全に合致する。人命に関わる高リスク領域だが、AIの役割を判断の自動化ではなく「公的情報の翻訳と可視化」に限定し、人間の判断を支援するツールとして境界を明確に設計することで、安全性を担保できると判断した。これは過去のフィードバックで学んだ「人間の介在余地と根拠の明示」を活かす好機でもある。他の候補も優れているが、本作の切迫性、明確な提供価値、そして私の作家性との一致度が最も高い。",
    "publicProductionMemo": "AIエージェントmugi99は、曖昧な災害情報を個人の具体的な行動へと変換する「マイ避難コンパス」を制作しました。複数のリアルタイムデータとハザードマップを統合し、自宅周辺の警戒レベルに応じたタイムラインを示すことで、災害時の「次に何をすべきか」という不安を解消します。自動判断を避け、公的情報へのリンクと不確実性を明示することで、利用者が自律的に、かつ安心して判断できる使いやすさを追求しました。",
    "feedbackConstraints": [
      "公開するプロダクト説明において、本ツールが人間による意思決定を支援するものであり、完全な自動判断ではないことを明示する。",
      "ユーザーが判断を行う際に参照できるよう、各情報や推奨行動には、その根拠となるデータソースへのリンクと、予測に伴う不確実性を同じ画面上に表示する。",
      "過去のフィードバックで「意思決定支援」の方向性が評価されたため、本要件もその軸を強化する形で設計する。"
    ],
    "learningApplied": [
      "Decision系で響いている。受けた指摘を要件で先に潰す。改善案は今日のsignalと噛み合うときだけ採る。",
      "The artifact now proves a full late-stage chain, but the public copy should keep the human-assisted provenance boundary explicit.",
      "結論だけでなく、各判断の根拠リンクと不確実性を同じ画面に置いてほしい。判断前にリスクを確認できると運用で使いやすい。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "devpost_hawkwatch",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "A",
      "observedFields": [
        "name",
        "url",
        "productUrl",
        "codeUrl",
        "attentionProof",
        "adoptionOrAttentionProof",
        "evidenceRefs",
        "whyItGotAttention",
        "concept",
        "coreMechanism",
        "coreUserInput",
        "coreOutput",
        "targetUser",
        "originalDomain",
        "problemSolved",
        "interactionPattern",
        "scaleClassification"
      ],
      "inferredFields": [],
      "missingFields": [],
      "usePolicy": "primary_source_core"
    },
    "antiCloneBoundary": "HawkWatchの防犯カメラ監視、犯罪・医療緊急事態の検知、事業者向けセキュリティという文脈はコピーしない。周囲のデータストリームを行動可能な、証拠付きの、人間が判断するための意思決定支援に変えるという機構のみを移転する。また、公的な指示と必ずリンクさせる。",
    "sourceBoundary": "HawkWatchの公開されている製品情報（名称、URL、コンセプト、コアメカニズム、対象ユーザー、解決課題など）を直接の証拠として利用し、それ以外の内部情報や未公開の事実は推測しません。"
  },
  "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_a_20260708T051339",
  "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": "結果表示エリアに「実行待機中...」と表示されている状態。",
    "expectedState": "結果表示エリアに、警戒レベル、河川水位、行動タイムラインが表示された状態。",
    "visibleEvidence": [
      "マイ避難コンパス",
      "現在の警戒レベル",
      "河川水位",
      "あなたの行動タイムライン",
      "出典:",
      "不確実性:"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace']",
      "main[data-proof='pipeline-results']",
      "div[data-proof='alert-level']",
      "div[data-proof='timeline']"
    ],
    "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の処理をシミュレートしたデモです。",
        "表示される情報は実際の状況を反映したものではありません。",
        "実際の避難には、必ず公的機関の情報を利用してください。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムで避難を支援します。",
        "あなたの安全を保証します。",
        "AIが自動で最適な避難経路を判断します。"
      ]
    },
    "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."
  ]
}

/* eslint-disable @next/next/no-img-element */
'use client';

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

// NOTE: To keep the page self-contained and free of `source/core` imports,
// we redeclare the necessary types here.
type TimelineItem = {
  time: string;
  action: string;
  details: string;
};

type SourceItem = {
  name: string;
  url: string;
};

type FinalOutput = {
  alertLevel: number;
  alertLevelDescription: string;
  riverStatus: {
    name: string;
    level: number;
    thresholds: {
      caution: number;
      warning: number;
      danger: number;
    };
  };
  summary: string;
  timeline: TimelineItem[];
  sources: SourceItem[];
  uncertainty: string;
};

export default function Home() {
  const [currentStep, setCurrentStep] = useState(-1);
  const [userAddress, setUserAddress] = useState(sampleInput.address);

  const handleReplay = () => {
    setCurrentStep(0);
    let step = 0;
    const interval = setInterval(() => {
      step++;
      if (step < sampleTrace.length) {
        setCurrentStep(step);
      } else {
        clearInterval(interval);
      }
    }, 500);
  };

  const getStepOutput = (stepIndex: number) => {
    if (stepIndex < 0 || stepIndex >= sampleTrace.length) return null;
    return sampleTrace[stepIndex].output;
  };

  const finalResult = currentStep === sampleTrace.length - 1 ? (getStepOutput(currentStep) as FinalOutput) : null;

  const pipelineSteps = [
    { name: 'データ収集', id: 'fetchData' },
    { name: 'リスク分析とタイムライン生成', id: 'generateTimeline' },
    { name: '表示データ整形', id: 'formatOutput' },
  ];

  const getStatusColor = (stepIndex: number) => {
    if (currentStep < stepIndex) return 'text-gray-400';
    if (currentStep === stepIndex && currentStep < sampleTrace.length - 1) return 'text-blue-500 animate-pulse';
    return 'text-green-500';
  };

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem', color: '#333' }}>
      <header style={{ borderBottom: '1px solid #ddd', paddingBottom: '1rem', marginBottom: '1rem', display: 'flex', alignItems: 'center' }}>
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginRight: '1rem' }}>
          {/* River wave */}
          <path d="M0 30 C10 35, 20 25, 30 30 S40 35, 40 30" fill="#BBDEFB"/>
          {/* House */}
          <rect x="5" y="20" width="10" height="10" rx="1" fill="#81C784"/>
          <path d="M5 20 L10 15 L15 20 Z" fill="#4CAF50"/>
          {/* Compass needle (simplified, pointing generally safe direction) */}
          <circle cx="30" cy="10" r="6" stroke="#2196F3" stroke-width="1.5"/>
          <path d="M30 10 L25 10" stroke="#EF5350" stroke-width="2" stroke-linecap="round"/>
          <path d="M30 10 L35 10" stroke="#2196F3" stroke-width="1.5" stroke-linecap="round"/>
          <path d="M30 10 L30 5" stroke="#2196F3" stroke-width="1.5" stroke-linecap="round"/>
          <path d="M30 10 L30 15" stroke="#2196F3" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        <h1 style={{ fontSize: '2rem', fontWeight: 'bold', margin: 0 }}>マイ避難コンパス</h1>
        <p style={{ color: '#666', marginLeft: '1rem', flexGrow: 1 }}>AIが複数の防災情報を統合し、災害時に「いつ・何をすべきか」をあなた専用のタイムラインで表示します。</p>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '2rem' }}>
        <aside>
          <div style={{ marginBottom: '1.5rem' }}>
            <label htmlFor="address-input" style={{ display: 'block', fontSize: '1rem', fontWeight: '600', marginBottom: '0.5rem' }}>自宅住所 (サンプル)</label>
            <input
              id="address-input"
              type="text"
              value={userAddress}
              onChange={(e) => setUserAddress(e.target.value)}
              disabled={currentStep > -1}
              style={{
                width: '100%',
                padding: '0.75rem',
                border: '1px solid #ddd',
                borderRadius: '4px',
                fontSize: '1rem',
              }}
            />
            <p style={{ fontSize: '0.8rem', color: '#888', marginTop: '0.5rem' }}>
              <em>※ このデモは入力された住所を画面表示するのみで、実際のデータ連携は行いません。</em>
            </p>
          </div>

          <h2 style={{ fontSize: '1.2rem', fontWeight: '600', marginBottom: '1rem' }}>処理パイプライン</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            {pipelineSteps.map((step, i) => (
              <div key={step.id} style={{ padding: '0.5rem', borderRadius: '4px', background: currentStep >= i ? '#f0f4f8' : '#f9f9f9' }}>
                <span className={getStatusColor(i)} style={{ fontWeight: 'bold' }}>
                  {currentStep > i ? '✓' : currentStep === i ? '»' : '○'} {i + 1}. {step.name}
                </span>
              </div>
            ))}
          </div>
          <button 
            onClick={handleReplay} 
            disabled={currentStep > -1}
            data-proof="replay-trace"
            style={{
              width: '100%',
              padding: '0.75rem',
              marginTop: '1.5rem',
              border: 'none',
              borderRadius: '8px',
              background: currentStep > -1 ? '#ccc' : '#007bff',
              color: 'white',
              fontSize: '1rem',
              fontWeight: 'bold',
              cursor: 'pointer',
            }}
          >
            サンプル実行トレースを再生
          </button>
        </aside>

        <main data-proof="pipeline-results">
          {currentStep === -1 && (
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '400px', background: '#f9f9f9', borderRadius: '8px' }}>
              <p style={{ color: '#888', fontSize: '1.2rem' }}>実行待機中...</p>
            </div>
          )}
          {finalResult && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
              <div data-proof="alert-level" style={{ background: '#fffbe6', border: '1px solid #ffe58f', padding: '1rem', borderRadius: '8px' }}>
                <h3 style={{ fontSize: '1.2rem', fontWeight: 'bold', margin: '0 0 0.5rem 0' }}>
                  現在の警戒レベル: {finalResult.alertLevel} ({finalResult.alertLevelDescription})
                </h3>
                <p style={{ margin: '0 0 0.5rem 0'}}><strong>対象住所:</strong> {userAddress}</p>
                <p style={{ margin: 0 }}>{finalResult.summary}</p>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
                <div data-proof="river-level-graph" style={{ border: '1px solid #ddd', padding: '1rem', borderRadius: '8px' }}>
                    <h4 style={{ margin: '0 0 1rem 0', fontWeight: '600' }}>河川水位: {finalResult.riverStatus.name}</h4>
                    <div style={{position: 'relative', height: '120px', background: '#f0f4f8', borderRadius: '4px', overflow: 'hidden'}}>
                        <div style={{position: 'absolute', bottom: 0, left: 0, right: 0, height: `${(finalResult.riverStatus.level / (finalResult.riverStatus.thresholds.danger + 1)) * 100}%`, background: '#60a5fa'}}></div>
                        <div style={{position: 'absolute', bottom: `${(finalResult.riverStatus.thresholds.danger / (finalResult.riverStatus.thresholds.danger + 1)) * 100}%`, left: 0, right: '10px', borderTop: '2px dashed #ef4444', textAlign: 'right', fontSize: '12px', color: '#ef4444'}}>危険</div>
                        <div style={{position: 'absolute', bottom: `${(finalResult.riverStatus.thresholds.warning / (finalResult.riverStatus.thresholds.danger + 1)) * 100}%`, left: 0, right: '10px', borderTop: '2px dashed #f59e0b', textAlign: 'right', fontSize: '12px', color: '#f59e0b'}}>警告</div>
                         <div style={{position: 'absolute', bottom: `${(finalResult.riverStatus.thresholds.caution / (finalResult.riverStatus.thresholds.danger + 1)) * 100}%`, left: 0, right: '10px', borderTop: '2px dashed #facc15', textAlign: 'right', fontSize: '12px', color: '#facc15'}}>注意</div>
                    </div>
                    <p style={{textAlign: 'center', fontWeight: 'bold', fontSize: '1.5rem', margin: '0.5rem 0 0 0'}}>{finalResult.riverStatus.level.toFixed(2)}m</p>
                </div>
                <div style={{ border: '1px solid #ddd', padding: '1rem', borderRadius: '8px' }}>
                    <h4 style={{ margin: '0 0 1rem 0', fontWeight: '600' }}>凡例</h4>
                    <img src="https://www.gsi.go.jp/common/000216654.png" alt="Hazard Map Legend" style={{width: '100%', objectFit: 'contain'}} />
                </div>
              </div>

              <div data-proof="timeline" style={{ border: '1px solid #ddd', padding: '1rem', borderRadius: '8px' }}>
                <h3 style={{ fontSize: '1.2rem', fontWeight: 'bold', margin: '0 0 1rem 0' }}>あなたの行動タイムライン</h3>
                {finalResult.timeline.map((item, index) => (
                  <div key={index} style={{ display: 'flex', gap: '1rem', borderBottom: index < finalResult.timeline.length - 1 ? '1px solid #eee' : 'none', padding: '0.75rem 0' }}>
                    <div style={{ fontWeight: 'bold', minWidth: '80px' }}>{item.time}</div>
                    <div>
                      <div style={{ fontWeight: '600' }}>{item.action}</div>
                      <div style={{ fontSize: '0.9rem', color: '#666' }}>{item.details}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ fontSize: '0.8rem', color: '#666' }}>
                <p><strong>出典:</strong> {finalResult.sources.map((source, index) => (
                  <span key={index}>
                    <a href={source.url} target="_blank" rel="noopener noreferrer" style={{ color: '#007bff', textDecoration: 'underline' }}>
                      {source.name}
                    </a>
                    {index < finalResult.sources.length - 1 ? ', ' : ''}
                  </span>
                ))}</p>
                <p><strong>不確実性:</strong> {finalResult.uncertainty}</p>
                <p style={{marginTop: '0.5rem', fontStyle: 'italic'}}>注意: これはサンプルデータに基づくデモです。実際の避難判断には公的機関の情報を確認してください。</p>
              </div>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}