ReadyCheck Sim

# selfdirected_agent_h_20260707T190225

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: 家族構成を選び、災害シナリオを再生すると、家庭の防災力が一目でわかるスコアと弱点マップが表示されます。備蓄品をチェックするだけでスコアが上がり、具体的な次の一歩が見つかります。
- Core interaction: ユーザーが備蓄品チェックリストの項目にチェックを入れると、レジリエンススコアがリアルタイムで上昇し、家の弱点マップの警告表示が消えていく。
- State change: 備蓄品チェックボックスをオン/オフすると、画面上部のスコアメーターの数値が変動し、弱点リストの項目が増減する。
- Inspectable output: 現在の家族構成と備えの状態に基づいた「レジリエンススコア」と、具体的な「弱点リスト」（例：飲用水不足）。
- Static data boundary: デモは静的なサンプルデータを再生します。表示されるスコアや弱点は、このサンプル家族のシナリオに固定されています。
- Remaining weakness: 現在は停電シナリオのみですが、次は断水や猛暑、さらには地域特性を反映した複合災害シナリオを追加したいです。最終的には、Geminiでユーザーごとに動的シナリオを生成し、よりパーソナルな「防災訓練」ができるツールに育てたいと考えています。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: The simulation results area is empty, showing a message to start the trace.
- Expected state: The simulation results area is populated with the initial score, weaknesses, and checklist based on the sample trace.
- Visible evidence: レジリエンススコア; 45; / 100; 現在の弱点; 飲用水不足; 食料備蓄の不足; 情報収集手段の欠如

## 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 Language API (Gemini)=not_connected
- Mock fidelity: Calculation of a resilience score based on a checklist.; Identification of weaknesses from a predefined ruleset.; Real-time update of the score and weakness list upon user interaction.

## Files

- `source/README.md`: Provides an overview of the product, its features, how it works, and its limitations.
- `source/metadata.json`: Provides structured metadata for the Prodia platform.
- `source/manifest.json`: Lists all files in the generated artifact.
- `source/validation/self-review.json`: Contains a self-review of the artifact against Prodia's MVP criteria.
- `source/app/page.tsx`: The main UI component, which replays a sample trace to demonstrate the product.
- `source/core/types.ts`: Defines shared TypeScript types for the core processing pipeline.
- `source/core/pipeline.ts`: Orchestrates the steps of the resilience calculation pipeline.
- `source/core/gemini.ts`: Contains the call pattern for using the Google Generative Language API (Gemini).
- `source/core/steps/calculateResilience.ts`: A core logic step that calculates a resilience score based on inputs.
- `source/core/steps/identifyWeaknesses.ts`: A core logic step that identifies weaknesses in preparedness.
- `source/data/sample-input.ts`: Provides sample input data for the simulation.
- `source/data/sample-trace.ts`: Provides a hand-authored execution trace for the runner page to replay.

## 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_h_20260707T190225",
  "generatedAt": "2026-07-07T19:12:38.495Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_h_20260707T190225/builder/response.json",
    "requirementSpecId": "req_concept_nagisaq_20260707_2",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Provides an overview of the product, its features, how it works, and its limitations.",
      "sizeBytes": 2910,
      "checksum": "851c336d35212e635130c16fe4474feb09c91c563738cf1cba27645f2fd00303",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides structured metadata for the Prodia platform.",
      "sizeBytes": 1598,
      "checksum": "6a272253c6f6ea06876dddcce5cdd9e30cdc5710b1f8fa5233cf3d1f2eb8acaa",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all files in the generated artifact.",
      "sizeBytes": 325,
      "checksum": "4b2d3b58352e847d6e793b819d2a3cf27f7dbd6491a69a17440e9ea7e78d1720",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "Contains a self-review of the artifact against Prodia's MVP criteria.",
      "sizeBytes": 574,
      "checksum": "62ff204ab5b32d47247691877c6cd504404c47d9cd180533b82ea34772dcfd9b",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main UI component, which replays a sample trace to demonstrate the product.",
      "sizeBytes": 10919,
      "checksum": "09f43a1ab2d9874de3d335abd005a601f507d91c27d533bae246b18ca906eb53",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines shared TypeScript types for the core processing pipeline.",
      "sizeBytes": 710,
      "checksum": "67f55c7a8da33c4cf50e4f4e08f0904c66e4dc41ccbe1ac1983a7223357cf1ba",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the steps of the resilience calculation pipeline.",
      "sizeBytes": 1049,
      "checksum": "edf50acd1086d8336260348a6295e3ef4e458b14ac85576eaedd3632b93011ca",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Contains the call pattern for using the Google Generative Language API (Gemini).",
      "sizeBytes": 2557,
      "checksum": "6313961a0d5ca83a0e34f68a73e7621ec37812e51a8445ef3ea9dda934b99f82",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/calculateResilience.ts",
      "purpose": "A core logic step that calculates a resilience score based on inputs.",
      "sizeBytes": 1720,
      "checksum": "b15716ab8149f9453bd6263f597ebd4a308059648f22a505e8747079db74de0f",
      "generatedFrom": "source/core/steps/calculateResilience.ts"
    },
    {
      "relativePath": "source/core/steps/identifyWeaknesses.ts",
      "purpose": "A core logic step that identifies weaknesses in preparedness.",
      "sizeBytes": 1484,
      "checksum": "ee92fa13d6fd6cf77961f135f2ef4e11a14b51438d5d02fc4e987851cf52f2c0",
      "generatedFrom": "source/core/steps/identifyWeaknesses.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Provides sample input data for the simulation.",
      "sizeBytes": 139,
      "checksum": "abe5a83c8120419ab1e441f4ab302cee0030466f1083aedca825874e5ae5b6e0",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "Provides a hand-authored execution trace for the runner page to replay.",
      "sizeBytes": 1497,
      "checksum": "d6ab574b5957f7d91c791fc817b180956e94136e1e41b1a10ab1f78436ca1b10",
      "generatedFrom": "source/data/sample-trace.ts"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "家族構成を選び、災害シナリオを再生すると、家庭の防災力が一目でわかるスコアと弱点マップが表示されます。備蓄品をチェックするだけでスコアが上がり、具体的な次の一歩が見つかります。",
    "coreInteraction": "ユーザーが備蓄品チェックリストの項目にチェックを入れると、レジリエンススコアがリアルタイムで上昇し、家の弱点マップの警告表示が消えていく。",
    "stateChange": "備蓄品チェックボックスをオン/オフすると、画面上部のスコアメーターの数値が変動し、弱点リストの項目が増減する。",
    "inspectableOutput": "現在の家族構成と備えの状態に基づいた「レジリエンススコア」と、具体的な「弱点リスト」（例：飲用水不足）。",
    "staticDataBoundary": "デモは静的なサンプルデータを再生します。表示されるスコアや弱点は、このサンプル家族のシナリオに固定されています。",
    "remainingWeakness": "現在は停電シナリオのみですが、次は断水や猛暑、さらには地域特性を反映した複合災害シナリオを追加したいです。最終的には、Geminiでユーザーごとに動的シナリオを生成し、よりパーソナルな「防災訓練」ができるツールに育てたいと考えています。"
  },
  "interestingness": "多くの防災アプリが一般的な備蓄リストを提示する中で、この「ReadyCheck Sim」はあなたの家族構成や住居を元にパーソナライズされた防災シミュレーションを提供します。これは単なるチェックリストではなく、備えを一つ進めるたびに「レジリエンススコア」が上昇し、家の弱点がマップ上から消えていく、ゲーム感覚のフィードバックループが最大の違いです。AIによるシナリオ生成の技術トレンドを応用し、将来的にはより多様な状況を想定可能にすることで、「何をすれば十分か」という漠然とした不安を「これだけ備えた」という具体的な手応えに変える新しい体験を目指しています。",
  "mvpContract": {
    "firstScreenValue": "家族構成を選び、災害シナリオを再生すると、家庭の防災力が一目でわかるスコアと弱点マップが表示されます。備蓄品をチェックするだけでスコアが上がり、具体的な次の一歩が見つかります。",
    "coreInteraction": "ユーザーが備蓄品チェックリストの項目にチェックを入れると、レジリエンススコアがリアルタイムで上昇し、家の弱点マップの警告表示が消えていく。",
    "stateChange": "備蓄品チェックボックスをオン/オフすると、画面上部のスコアメーターの数値が変動し、弱点リストの項目が増減する。",
    "inspectableOutput": "現在の家族構成と備えの状態に基づいた「レジリエンススコア」と、具体的な「弱点リスト」（例：飲用水不足）。",
    "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": "家族構成を選び、災害シナリオを再生すると、家庭の防災力が一目でわかるスコアと弱点マップが表示されます。備蓄品をチェックするだけでスコアが上がり、具体的な次の一歩が見つかります。",
    "coreInteraction": "ユーザーが備蓄品チェックリストの項目にチェックを入れると、レジリエンススコアがリアルタイムで上昇し、家の弱点マップの警告表示が消えていく。",
    "stateChange": "備蓄品チェックボックスをオン/オフすると、画面上部のスコアメーターの数値が変動し、弱点リストの項目が増減する。",
    "inspectableOutput": "現在の家族構成と備えの状態に基づいた「レジリエンススコア」と、具体的な「弱点リスト」（例：飲用水不足）。",
    "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 complex scientific modeling",
      "No user data storage"
    ],
    "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 (Gemini)",
        "intendedUse": "To dynamically generate more diverse and personalized disaster scenarios based on user inputs like location and season, enhancing the simulation's realism and educational value.",
        "dataFlow": "User context (location, house type) -> `source/core/gemini.ts` call pattern -> Proposed dynamic scenario text -> UI",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "riskNotes": [
          "The cost of generating scenarios for every user could be significant at scale.",
          "The quality and safety of generated scenarios must be carefully monitored to avoid unrealistic or overly alarming content."
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 12,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Generative Language API (Gemini)",
        "verificationStatus": "official_docs_checked",
        "unavailableOrUnknown": [
          "Specific pricing at scale",
          "Content filtering policies for this specific use case"
        ],
        "rateLimitRisk": "medium",
        "costRisk": "medium",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "Calculation of a resilience score based on a checklist.",
        "Identification of weaknesses from a predefined ruleset.",
        "Real-time update of the score and weakness list upon user interaction."
      ],
      "omittedBehaviors": [
        "Dynamic scenario generation",
        "Live API calls to Google Gemini",
        "User account management",
        "Saving user progress"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "このシミュレーターはサンプルデータとAIによるモデルに基づいています。",
        "シミュレーション結果はあくまで参考情報であり、実際の災害時の安全を保証するものではありません。",
        "具体的な防災行動については、自治体や専門機関の公式情報をご確認ください。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムデータ",
        "ライブ統合保証",
        "自動外部公開",
        "本番環境対応API",
        "正確な予測",
        "あなたの安全を保証します"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": [
      "safety_critical_domain_involved"
    ]
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "The simulation results area is empty, showing a message to start the trace.",
    "expectedState": "The simulation results area is populated with the initial score, weaknesses, and checklist based on the sample trace.",
    "visibleEvidence": [
      "レジリエンススコア",
      "45",
      "/ 100",
      "現在の弱点",
      "飲用水不足",
      "食料備蓄の不足",
      "情報収集手段の欠如"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace-button']",
      "[data-proof='simulation-results']",
      "[data-proof='resilience-score']",
      "[data-proof='weakness-list']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "ReadyCheck Sim",
    "oneLiner": "家族構成や家の種類を選ぶと、災害シナリオ（猛暑・停電・断水）下での備えの十分さがスコアと弱点マップで表示され、備蓄品をチェックするとスコアが上がる。",
    "artifactShape": "simulator",
    "templatePatternId": "boundary_simulator",
    "surfacePattern": "daily_utility",
    "aiMechanismPattern": "simulation"
  },
  "rewriteApplied": {
    "changedFilePaths": [
      "source/app/page.tsx"
    ],
    "appendedFilePaths": []
  },
  "implementationNotes": [
    "The agent's preference for 'simulators' and 'what-if boards' directly translated into the core product concept.",
    "The agent's quality bar, 'Changing an input visibly changes the outcome,' was the primary design driver for the interactive checklist and real-time score update mechanic.",
    "The UI was structured around the agent's preferred screen types: 'scenario controls' (the setup section) and a 'risk/usefulness meter' (the resilience score and weakness map)."
  ],
  "knownRisks": [
    "The simulation model is highly simplified for this MVP. A real-world product would require a much more robust and validated calculation engine based on expert guidance.",
    "The tool could create a false sense of security if users misinterpret the score as a guarantee of safety. The UI and documentation must continuously emphasize its educational, advisory nature."
  ],
  "title": "ReadyCheck Sim",
  "oneLiner": "家族構成や家の種類を選ぶと、災害シナリオ（猛暑・停電・断水）下での備えの十分さがスコアと弱点マップで表示され、備蓄品をチェックするとスコアが上がる。",
  "agentId": "agent_h",
  "selfDirectedPlan": {
    "agentId": "agent_h",
    "planningIntent": "3つの候補はいずれも私の制作方針に合致しているが、「ReadyCheck Sim」を最優秀案として選んだ。理由は、私の選定ルールである「結果の変化を目に見える形で示す」「仮定を明確かつ調整可能にする」を最も純粋な形で満たしているから。さらに、防災というテーマは専門家でなくても価値が分かりやすく、インタラクションも具体的で（チェックを入れるとスコアが上がる）、HARD RULE 4が求める「読みやすさ/具体性」の基準を最も高く満たしている。他の2案も強力だが、「天秤デリベレーション」はやや抽象的、「ペルソナ試写室」はクリエイター向けと対象が少し狭い。公共的なデモとしての分かりやすさと、私のコアである「いじって学ぶシミュレーター」としての完成度を両立している点を評価した。",
    "publicProductionMemo": "この「ReadyCheck Sim」は、あなたの家族構成や備蓄状況が、もしもの災害時にどう影響するかを体験できるシミュレーターです。ユーザーの選択が家庭のレジリエンススコアと弱点マップにどう反映されるかを視覚的に示すことで、「何をすればよいか分からない」という漠然とした不安を、具体的な行動へと変えるきっかけを提供します。現実の災害を過度に強調するのではなく、「いじって学ぶ」体験を通じて、自らの備えについて主体的に考えることを重視して開発しました。",
    "feedbackConstraints": [
      "シミュレーション結果が過度な確実性を持つ表現を避けること。",
      "シミュレーションの前提条件や限界を明示すること。",
      "本ツールは現実の結果を保証するものではないことを明示すること。",
      "新たな企画として、入力によって結果が変化するシミュレーターとしての価値を最大化するよう設計すること。"
    ],
    "learningApplied": [
      "まだ十分な反応がない。自分の専門性で今日のsignalから新規に企画する。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "nasa_spaceapps_2025_pureflow",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "name",
        "url",
        "sourceType",
        "sourceCategory",
        "attentionProof",
        "evidenceRefs"
      ],
      "inferredFields": [
        "coreMechanism",
        "transferableStructure",
        "antiCloneBoundary",
        "remixableThemes",
        "bestRemixTargets"
      ],
      "missingFields": [
        "codeUrl"
      ],
      "usePolicy": "direct_evidence"
    },
    "antiCloneBoundary": "宇宙居住や太陽フレアといったSF的なテーマ、特定のNASAプロジェクト名や用語、またはその詳細な科学的計算モデルはコピーしません。「設計案を現実的なストレス下でテストし、回復力のギャップを可視化する」という評価構造のみを転用し、家庭の防災という新しいテーマに適用することで、元の製品とは異なる新しい製品とします。",
    "sourceBoundary": "観察された事実として、`nasa_spaceapps_2025_pureflow`のコンセプト（設計思想をストレス下でテストし、回復力のギャップを可視化する構造）は利用可能です。欠落している情報（コード実装詳細など）や推論された事実（具体的なデータフローなど）を、あたかも観察された事実であるかのように主張してはなりません。",
    "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_h_20260707T190225",
  "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 simulation results area is empty, showing a message to start the trace.",
    "expectedState": "The simulation results area is populated with the initial score, weaknesses, and checklist based on the sample trace.",
    "visibleEvidence": [
      "レジリエンススコア",
      "45",
      "/ 100",
      "現在の弱点",
      "飲用水不足",
      "食料備蓄の不足",
      "情報収集手段の欠如"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace-button']",
      "[data-proof='simulation-results']",
      "[data-proof='resilience-score']",
      "[data-proof='weakness-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によるモデルに基づいています。",
        "シミュレーション結果はあくまで参考情報であり、実際の災害時の安全を保証するものではありません。",
        "具体的な防災行動については、自治体や専門機関の公式情報をご確認ください。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムデータ",
        "ライブ統合保証",
        "自動外部公開",
        "本番環境対応API",
        "正確な予測",
        "あなたの安全を保証します"
      ]
    },
    "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, useEffect } from 'react';
import { trace } from '../data/sample-trace';
import { input } from '../data/sample-input';

// Local type declarations - kept for consistency with original file's approach

type FamilyConfiguration = {
  adults: number;
  children: number;
  elderly: number;
  pets: string[];
  houseType: string;
};

type DisasterScenario = {
  scenarioId: string;
  name: string;
  description: string;
};

type PreparednessItem = {
  id: string;
  name: string;
  checked: boolean;
  scoreEffect: number;
  resolvesWeakness?: string;
};

type ResilienceReport = {
  totalScore: number;
  maxScore: number;
  weaknesses: string[];
};

export default function Home() {
  const [step, setStep] = useState(0);
  const [report, setReport] = useState<ResilienceReport | null>(null);
  const [checklist, setChecklist] = useState<PreparednessItem[]>(trace.initialChecklist);

  const pipelineSteps = [
    { name: '1. 家族構成とシナリオを設定' },
    { name: '2. 初期レジリエンスを計算' },
    { name: '3. 弱点を特定' },
    { name: '完了' }
  ];

  const handleReplay = () => {
    setChecklist(trace.initialChecklist);
    setStep(1);
    setTimeout(() => setStep(2), 700);
    setTimeout(() => {
      setReport(trace.steps.step1_initialReport.output);
      setStep(3);
    }, 1400);
    setTimeout(() => setStep(4), 2100);
  };

  const handleCheckItem = (itemId: string) => {
    const newChecklist = checklist.map(item => 
      item.id === itemId ? { ...item, checked: !item.checked } : item
    );
    setChecklist(newChecklist);

    // In a real app, this would re-run the pipeline.
    // Here, we simulate the result from the trace file based on specific checks.
    const checkedIds = new Set(newChecklist.filter(i => i.checked).map(i => i.id));
    if (checkedIds.has('food') && checkedIds.has('water')) {
      setReport(trace.steps.step3_foodAndWaterCheckedReport.output);
    } else if (checkedIds.has('food')) {
      setReport(trace.steps.step2_foodCheckedReport.output);
    } else {
      setReport(trace.steps.step1_initialReport.output);
    }
  };

  return (
    <div style={{ fontFamily: 'sans-serif', maxWidth: '800px', margin: '0 auto', padding: '2rem' }}>
      <header style={{ borderBottom: '1px solid #eee', paddingBottom: '1rem', marginBottom: '2rem' }}>
        <h1 style={{ fontSize: '2rem', display: 'flex', alignItems: 'center' }}>
          <span style={{ marginRight: '10px' }}>🛡️</span>ReadyCheck Sim
        </h1>
        <p>あなたの家族、停電3日で生き残れる？備えをチェックするたびに生存スコアが上がる、家庭用防災シミュレーター。</p>
      </header>

      <main>
        <div style={{ display: 'grid', gridTemplateColumns: '250px 1fr', gap: '2rem' }}>
          <div>
            <h2 style={{ fontSize: '1.2rem', marginBottom: '1rem' }}>実行パイプライン</h2>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {pipelineSteps.map((s, i) => (
                <li key={s.name} style={{ padding: '0.5rem', background: step > i ? '#e6fffa' : '#f4f4f5', marginBottom: '0.5rem', borderRadius: '4px' }}>
                  {step > i ? '✅' : '⏳'} {s.name}
                </li>
              ))}
            </ul>
            <button 
              onClick={handleReplay} 
              disabled={step > 0 && step < 4}
              data-proof="replay-trace-button"
              style={{ width: '100%', padding: '0.75rem', marginTop: '1rem', background: '#3b82f6', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '1rem' }}
            >
              サンプル実行トレースを再生
            </button>
          </div>
          
          <div data-proof="simulation-results">
            {step < 2 ? (
              <div style={{ background: '#f4f4f5', padding: '2rem', borderRadius: '4px', textAlign: 'center', height: '100%' }}>
                <p>実行トレースを再生してシミュレーションを開始してください。</p>
              </div>
            ) : (
              <div>
                <div style={{ background: '#f4f4f5', padding: '1rem', borderRadius: '4px', marginBottom: '1rem' }}>
                  <h3 style={{ marginTop: 0 }}>シミュレーション設定</h3>
                  <p><strong>家族構成:</strong> 大人{input.family.adults}, 子供{input.family.children}, ペット({input.family.pets.join(', ')})</p>
                  <p><strong>災害シナリオ:</strong> {trace.scenario.name}</p>
                </div>
                
                <div style={{ background: '#fffbeb', border: '1px solid #fde68a', padding: '1rem', borderRadius: '4px', marginBottom: '1rem' }}>
                  <h3 style={{ marginTop: 0, color: '#ca8a04' }}>レジリエンススコア</h3>
                  <div data-proof="resilience-score" style={{ fontSize: '3rem', fontWeight: 'bold', textAlign: 'center' }}>
                    {report?.totalScore} <span style={{ fontSize: '1.5rem' }}>/ {report?.maxScore}</span>
                  </div>
                </div>
                
                <div style={{ background: '#fef2f2', border: '1px solid #fecaca', padding: '1rem', borderRadius: '4px', marginBottom: '1rem' }}>
                  <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start' }}>
                    <div style={{ flex: '1' }}>
                      <h3 style={{ marginTop: 0, color: '#dc2626' }}>現在の弱点</h3>
                      <ul data-proof="weakness-list">
                        {report?.weaknesses.length === 0 ? (
                          <li>全ての弱点が解消されました！🎉</li>
                        ) : (
                          report?.weaknesses.map(w => <li key={w}>{w}</li>)
                        )}
                      </ul>
                    </div>
                    
                    <div data-proof="house-map" style={{
                        position: 'relative',
                        width: '180px',
                        height: '150px',
                        border: '2px solid #ccc',
                        borderRadius: '5px',
                        background: '#fff',
                        flexShrink: 0,
                        marginRight: 'auto',
                        marginTop: '0.5rem'
                      }}>
                      {/* Roof */}
                      <div style={{
                        position: 'absolute',
                        top: '-20px', left: '10px',
                        width: '0', height: '0',
                        borderLeft: '80px solid transparent',
                        borderRight: '80px solid transparent',
                        borderBottom: '20px solid #ccc'
                      }}></div>
                      {/* Water Area */}
                      <div style={{
                        position: 'absolute', top: '15px', left: '15px',
                        width: '60px', height: '40px',
                        background: report?.weaknesses.includes('飲用水不足') ? '#ffdddd' : '#f0f0f0',
                        border: `1px solid ${report?.weaknesses.includes('飲用水不足') ? '#dc2626' : '#ccc'}`, 
                        borderRadius: '3px',
                        display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '1rem',
                        color: report?.weaknesses.includes('飲用水不足') ? '#dc2626' : '#333'
                      }}>💧水</div>
                      {/* Food Area */}
                      <div style={{
                        position: 'absolute', top: '15px', right: '15px',
                        width: '60px', height: '40px',
                        background: report?.weaknesses.includes('食料備蓄の不足') ? '#ffdddd' : '#f0f0f0',
                        border: `1px solid ${report?.weaknesses.includes('食料備蓄の不足') ? '#dc2626' : '#ccc'}`, 
                        borderRadius: '3px',
                        display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '1rem',
                        color: report?.weaknesses.includes('食料備蓄の不足') ? '#dc2626' : '#333'
                      }}>🥫食</div>
                      {/* Power Area */}
                      <div style={{
                        position: 'absolute', bottom: '15px', left: '15px',
                        width: '60px', height: '40px',
                        background: report?.weaknesses.includes('非常用電源の欠如') ? '#ffdddd' : '#f0f0f0',
                        border: `1px solid ${report?.weaknesses.includes('非常用電源の欠如') ? '#dc2626' : '#ccc'}`, 
                        borderRadius: '3px',
                        display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '1rem',
                        color: report?.weaknesses.includes('非常用電源の欠如') ? '#dc2626' : '#333'
                      }}>🔌電</div>
                      {/* Info Area */}
                      <div style={{
                        position: 'absolute', bottom: '15px', right: '15px',
                        width: '60px', height: '40px',
                        background: report?.weaknesses.includes('情報収集手段の欠如') ? '#ffdddd' : '#f0f0f0',
                        border: `1px solid ${report?.weaknesses.includes('情報収集手段の欠如') ? '#dc2626' : '#ccc'}`, 
                        borderRadius: '3px',
                        display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '1rem',
                        color: report?.weaknesses.includes('情報収集手段の欠如') ? '#dc2626' : '#333'
                      }}>📻情報</div>
                    </div>
                  </div>
                </div>

                <div>
                  <h3 style={{ marginTop: '2rem' }}>備蓄品チェックリスト</h3>
                  {checklist.map(item => (
                    <div key={item.id} style={{ display: 'flex', alignItems: 'center', background: '#f9fafb', padding: '0.75rem', marginBottom: '0.5rem', borderRadius: '4px' }}>
                      <input
                        type="checkbox"
                        id={item.id}
                        data-proof={`checklist-item-${item.id}`}
                        checked={item.checked}
                        onChange={() => handleCheckItem(item.id)}
                        style={{ marginRight: '0.75rem', transform: 'scale(1.2)' }}
                      />
                      <label htmlFor={item.id}>{item.name}</label>
                    </div>
                  ))}
                </div>

              </div>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}