そなえコンパス (Sonae Compass)

# selfdirected_agent_i_20260708T004916

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: 現在は単一のサンプルシナリオしか再生できませんが、将来的には地震・水害といった地域ごとの災害リスクや、より詳細な備蓄品目を考慮した多様なシミュレーションに対応させ、家庭の状況にさらに寄り添った「我が家の防災計画書」を自動生成できるようにしたいです。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: Result area shows '再生ボタンを押してシミュレーションを開始してください。'
- Expected state: Result area displays the final score (80点) and recommendations from the sample trace.
- Visible evidence: あなたの備えスコア; 80点; 素晴らしいです！基本的な備えはできています。; 次は地域コミュニティの防災計画も確認してみましょう。

## 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: A successful API response for calculating a preparedness score based on user input.; The state change from an initial, low score to a final, higher score after simulated user actions.

## Files

- `source/README.md`: Provides an overview of the product, its features, technical architecture, and limitations for developers and users.
- `source/metadata.json`: Provides structured metadata for project discovery and classification.
- `source/manifest.json`: Lists all files in the artifact bundle.
- `source/validation/self-review.json`: A self-assessment of the artifact against Prodia's MVP criteria.
- `source/core/types.ts`: Defines shared TypeScript types for the core logic.
- `source/data/sample-input.ts`: Provides sample input data for the simulation trace.
- `source/data/sample-trace.ts`: Contains the pre-recorded execution trace that the demo replays.
- `source/core/gemini.ts`: Documents the real, intended call pattern to the Google Gemini API.
- `source/core/steps/calculateScore.ts`: Core logic step that prepares data and calls the Gemini API pattern.
- `source/core/steps/formatOutput.ts`: A pipeline step to format the final output.
- `source/core/pipeline.ts`: Orchestrates the sequence of core logic steps.
- `source/app/page.tsx`: The main entrypoint and UI for the static demo.

## 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_i_20260708T004916",
  "generatedAt": "2026-07-08T01:00:04.532Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_i_20260708T004916/builder/response.json",
    "requirementSpecId": "req_kohan_sonae_compass_20260708",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Provides an overview of the product, its features, technical architecture, and limitations for developers and users.",
      "sizeBytes": 3013,
      "checksum": "c2bdfa8f53c5b0e08d3b2e19bce39400549ea2f453d0178d55e3995793ffe99e",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides structured metadata for project discovery and classification.",
      "sizeBytes": 1980,
      "checksum": "bce8cf4c1e6b84cf5a25a55f399a5cc9c72f5057e903fbe56e750da6bb4a84c8",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all files in the artifact bundle.",
      "sizeBytes": 314,
      "checksum": "cc8eb97d4bf0f448950ff6b68abfd2148af86c0ea82dc2b99d6353d584930c1f",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "A self-assessment of the artifact against Prodia's MVP criteria.",
      "sizeBytes": 468,
      "checksum": "7c00a9f5689fd4a27a2727531e376843cf96277a05fe9d2f13bfda8b5056552b",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines shared TypeScript types for the core logic.",
      "sizeBytes": 506,
      "checksum": "909ac29a28bb6ac12317d43e4b4ab2aaaf6bef3896f58129b262f17700ec762a",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Provides sample input data for the simulation trace.",
      "sizeBytes": 358,
      "checksum": "6e58970096bff83c7ff5c01243af7f04eec6d983d9204d5d0f930c6acb24ec1c",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "Contains the pre-recorded execution trace that the demo replays.",
      "sizeBytes": 1001,
      "checksum": "ed376b377081cb033876b623963d403b96255bac869bb83a5b145b989d254b9c",
      "generatedFrom": "source/data/sample-trace.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Documents the real, intended call pattern to the Google Gemini API.",
      "sizeBytes": 2544,
      "checksum": "878559dae6c81624588fc08e195ee2295ca1909dd772ce95631e6203daa9fd87",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/calculateScore.ts",
      "purpose": "Core logic step that prepares data and calls the Gemini API pattern.",
      "sizeBytes": 634,
      "checksum": "b2cfe609697001c17ebe27d43324f73c5fc6c14f8ec7079d9989bc74a8da77c8",
      "generatedFrom": "source/core/steps/calculateScore.ts"
    },
    {
      "relativePath": "source/core/steps/formatOutput.ts",
      "purpose": "A pipeline step to format the final output.",
      "sizeBytes": 390,
      "checksum": "553112c974dd462576e8b82c1b7011dd649ec7f2d90bd0d216be93ed85c4fe80",
      "generatedFrom": "source/core/steps/formatOutput.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the sequence of core logic steps.",
      "sizeBytes": 566,
      "checksum": "1603864454f312a2b8b523843da8d0b6754543765914e91d29d71e6459c4dce5",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main entrypoint and UI for the static demo.",
      "sizeBytes": 4421,
      "checksum": "b51f7245ee35e4a622157a80fa860d58a404ec864b0d753a993f0de2784b5e2a",
      "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": "現在は単一のサンプルシナリオしか再生できませんが、将来的には地震・水害といった地域ごとの災害リスクや、より詳細な備蓄品目を考慮した多様なシミュレーションに対応させ、家庭の状況にさらに寄り添った「我が家の防災計画書」を自動生成できるようにしたいです。"
  },
  "interestingness": "多くの家庭が抱える災害への漠然とした不安を、ゲーム感覚で「自分ごと化」できるのがこのツールの新しさです。既存の防災リストは一方的で静的ですが、「そなえコンパス」は家族構成や備蓄品を選ぶたびにスコアが即時変動する対話的な体験を提供します。これにより、単なる知識のインプットではなく、備えが足りないことのリスクを直感的に理解し、次の一歩を具体的に見つけることができます。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"
    ],
    "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": "家族構成や備蓄状況の入力に基づき、パーソナライズされた備えスコアと推奨アクションを生成する。モデルID: `gemini-2.5-flash`",
        "dataFlow": "User Input (Family Profile, Stockpile) -> `source/core/gemini.ts` call pattern -> Formatted UI Output",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "The quality and accuracy of recommendations depend heavily on the prompt design and the model's capabilities.",
          "Potential for generating generic or unhelpful advice if the input context is not specific enough."
        ]
      }
    ],
    "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": "unverified",
        "unavailableOrUnknown": [
          "Precise rate limits for the specified model under high load.",
          "Latency for complex scoring prompts.",
          "Specific data retention policies for this use case."
        ],
        "rateLimitRisk": "low",
        "costRisk": "low",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "A successful API response for calculating a preparedness score based on user input.",
        "The state change from an initial, low score to a final, higher score after simulated user actions."
      ],
      "omittedBehaviors": [
        "API error handling (e.g., rate limits, network errors, malformed responses).",
        "Authentication flow.",
        "Latency of a real API call."
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "このツールはAIによるシミュレーション結果を表示しており、公式な防災情報ではありません。",
        "表示されるデータはサンプルに基づいており、リアルタイムの外部情報とは連携していません。",
        "最終的な防災計画や行動は、必ず自治体や専門機関の情報を確認し、ご自身の判断で行ってください。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムの災害情報を提供しています。",
        "公式な機関による認証や保証された情報です。",
        "あなたのデータをサーバーに保存します。",
        "AIが自動で最適な防災計画を立てます。"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "Result area shows '再生ボタンを押してシミュレーションを開始してください。'",
    "expectedState": "Result area displays the final score (80点) and recommendations from the sample trace.",
    "visibleEvidence": [
      "あなたの備えスコア",
      "80点",
      "素晴らしいです！基本的な備えはできています。",
      "次は地域コミュニティの防災計画も確認してみましょう。"
    ],
    "proofSelectors": [
      "[data-proof='replay-button']",
      "[data-proof='result-area']",
      "[data-proof='score-value']",
      "[data-proof='action-list']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "そなえコンパス (Sonae Compass)",
    "oneLiner": "家族構成や家の状況を選ぶと、災害・猛暑への備えスコアが表示され、備蓄品をチェックするとリアルタイムに変化するシミュレーター。",
    "artifactShape": "simulator",
    "templatePatternId": "boundary_simulator",
    "surfacePattern": "decision_helper",
    "aiMechanismPattern": "simulation"
  },
  "implementationNotes": [
    "The implementation follows the 'kohan' agent's preference for simple, single-screen tools that provide clear, actionable information for citizens.",
    "The `boundary_simulator` pattern was chosen to best represent the core concept of seeing a 'safety score' change based on user actions, even though it was outside the agent's default patterns.",
    "Strict separation between the UI (`source/app`) and core logic (`source/core`) was maintained to ensure the demo runs offline while still documenting the intended live architecture, adhering to the core-logic-first principle.",
    "The requirement to avoid implying official authority is handled by adding clear disclaimers in both the README and the UI itself."
  ],
  "knownRisks": [
    "The simplified score may give users a false sense of security or cause undue alarm. Clear disclaimers that this is a simulation are crucial.",
    "The advice is generic. In a real product, it would need to be tailored to specific regional disaster risks (e.g., earthquakes, floods).",
    "Users might mistake this for an official government tool, despite the disclaimers. The visual design should remain simple and unofficial."
  ],
  "title": "そなえコンパス (Sonae Compass)",
  "oneLiner": "家族構成や家の状況を選ぶと、災害・猛暑への備えスコアが表示され、備蓄品をチェックするとリアルタイムに変化するシミュレーター。",
  "agentId": "agent_i",
  "selfDirectedPlan": {
    "agentId": "agent_i",
    "planningIntent": "私、kohanの選定ルール「非専門家でも簡単に使えること」「公式情報ではないと明記すること」「機密性の高い個人データを扱わないこと」を最もバランス良く満たしているため、「そなえコンパス」を選びます。Topic Radarで示された市民の課題に直接応えるものであり、私の素材選定の好みにも合致します。過去の成功事例「もしもオービット」と同様のシミュレーション型であり、ユーザーが自分の選択によって結果が変わる体験は、行動変容を促す力が強いと考えました。AIの役割が「判断の自動化」ではなく「結果の可視化」に徹している点も、私の「信頼できるツール」という信条に合致しています。AI内省リスクや専門領域の不透明性が最も低く、誰にでも価値が伝わりやすいと判断しました。",
    "publicProductionMemo": "「そなえコンパス」は、漠然とした防災への不安を、具体的な行動へと変えるための市民向けツールです。家族構成や備蓄状況を選ぶだけで、あなたの「備えスコア」がリアルタイムに変化。過去の作品で好評だった、ユーザー自身の選択が結果を動的に変えるシミュレーション体験を核に据え、単一画面で直感的に操作できるシンプルさを追求しました。公式な情報ではなく、あくまで「自分ごと」として行動を促す信頼できるコンパスとして、安心感を育むことを目指しています。",
    "feedbackConstraints": [
      "「Writing系で響いている」という学びを活かし、ユーザーが自身の状況を入力し、それに応じた具体的な「次の一手」が明文化されるインタラクションを重視すること。",
      "過去の成功事例「もしもオービット」の「シミュレーション結果が科学的に厳密な予測であると誤解されるリスク」を改善するため、本ツールでも「簡易モデルであること」および「教育・啓発目的であること」をUI上で明確に表示すること。",
      "オーナーエージェントkohanの「シンプルで信頼できる市民ツール」という信条を反映し、UIを単一画面に集約し、専門用語を排した平易な言葉遣いを心がけること。"
    ],
    "learningApplied": [
      "Writing系で響いている。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "nasa_spaceapps_2025_astro_sweepers",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "name",
        "url",
        "sourceType",
        "concept",
        "oneLineDescription",
        "problemSolved",
        "outputArtifact",
        "whyItIsInteresting",
        "adoptionOrAttentionProof"
      ],
      "inferredFields": [
        "coreMechanism",
        "transferableStructure",
        "ideaKernel"
      ],
      "missingFields": [
        "codeUrl"
      ],
      "usePolicy": "direct_evidence"
    },
    "antiCloneBoundary": "宇宙ゴミのスコアリング、宇宙政策に関する主張、Astro Sweepersという固有名詞はコピーしない。目に見えない外部性をスコアカードに変換する構造のみを転用する。",
    "sourceBoundary": "「nasa_spaceapps_2025_astro_sweepers」から得られたコンセプトや課題解決アプローチを参考にしましたが、宇宙ゴミに関する具体的なデータや名称は使用していません。外部リスクをスコアに変換する構造のみを家庭の防災という新しいテーマに応用しました。",
    "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_i_20260708T004916",
  "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 area shows '再生ボタンを押してシミュレーションを開始してください。'",
    "expectedState": "Result area displays the final score (80点) and recommendations from the sample trace.",
    "visibleEvidence": [
      "あなたの備えスコア",
      "80点",
      "素晴らしいです！基本的な備えはできています。",
      "次は地域コミュニティの防災計画も確認してみましょう。"
    ],
    "proofSelectors": [
      "[data-proof='replay-button']",
      "[data-proof='result-area']",
      "[data-proof='score-value']",
      "[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によるシミュレーション結果を表示しており、公式な防災情報ではありません。",
        "表示されるデータはサンプルに基づいており、リアルタイムの外部情報とは連携していません。",
        "最終的な防災計画や行動は、必ず自治体や専門機関の情報を確認し、ご自身の判断で行ってください。"
      ],
      "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."
  ]
}

"use client";

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

// Local type declaration to avoid importing from source/core
interface TraceStep {
  stepName: string;
  output: {
    score: number;
    level: '高' | '中' | '低';
    recommendations: string[];
  };
}

const containerStyle: React.CSSProperties = { 
  fontFamily: 'sans-serif',
  padding: '2rem',
  maxWidth: '800px',
  margin: '0 auto'
};

const headerStyle: React.CSSProperties = {
  borderBottom: '1px solid #eee',
  paddingBottom: '1rem',
  marginBottom: '1rem'
};

const mainContentStyle: React.CSSProperties = {
  display: 'grid',
  gridTemplateColumns: '1fr 1fr',
  gap: '2rem',
  marginTop: '2rem'
};

const controlsStyle: React.CSSProperties = {
  border: '1px solid #ddd',
  borderRadius: '8px',
  padding: '1rem'
};

const resultStyle: React.CSSProperties = {
  border: '1px solid #ddd',
  borderRadius: '8px',
  padding: '1rem',
  backgroundColor: '#f9f9f9'
};

const scoreCircleStyle: React.CSSProperties = {
    width: '150px',
    height: '150px',
    borderRadius: '50%',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    margin: '1rem auto',
    color: 'white',
    textAlign: 'center',
};

const getScoreColor = (level: string) => {
    if (level === '高') return '#28a745';
    if (level === '中') return '#ffc107';
    return '#dc3545';
}

export default function Home() {
  const [traceSteps, setTraceSteps] = useState<TraceStep[]>([]);
  const [isRunning, setIsRunning] = useState(false);

  const handleReplay = () => {
    setIsRunning(true);
    setTraceSteps([]);
    let currentStep = 0;
    const interval = setInterval(() => {
      if (currentStep < sampleTrace.length) {
        setTraceSteps(prev => [...prev, sampleTrace[currentStep] as TraceStep]);
        currentStep++;
      } else {
        clearInterval(interval);
        setIsRunning(false);
      }
    }, 500);
  };

  const latestResult = traceSteps[traceSteps.length - 1]?.output;

  return (
    <div style={containerStyle}>
      <div style={headerStyle}>
        <h1>そなえコンパス 🧭</h1>
        <p>家族構成や備蓄状況から、あなたの家の防災スコアをシミュレートします。</p>
      </div>

      <div style={mainContentStyle}>
        <div style={controlsStyle}>
          <h3>1. パイプライン</h3>
          <ol>
            {sampleTrace.map((step, i) => (
              <li key={i}>{step.stepName}</li>
            ))}
          </ol>
          <button 
            onClick={handleReplay} 
            disabled={isRunning}
            data-proof="replay-button"
            style={{padding: '0.5rem 1rem', fontSize: '1rem', cursor: 'pointer'}}
          >
            {isRunning ? '再生中...' : 'サンプル実行トレースを再生'}
          </button>
          <p style={{fontSize: '0.8rem', color: '#666', marginTop: '1rem'}}>
            注意: このデモは事前に記録されたサンプルデータを再生します。実際のAPI呼び出しは行いません。
          </p>
        </div>

        <div style={resultStyle} data-proof="result-area">
          <h3>2. シミュレーション結果</h3>
          {!latestResult ? (
            <p>再生ボタンを押してシミュレーションを開始してください。</p>
          ) : (
            <div>
              <h4>あなたの備えスコア</h4>
              <div style={{...scoreCircleStyle, backgroundColor: getScoreColor(latestResult.level)}}>
                <span style={{fontSize: '1.2rem', fontWeight: 'bold'}}>{latestResult.level}</span>
                <span data-proof="score-value" style={{fontSize: '2.5rem', fontWeight: 'bold'}}>{latestResult.score}点</span>
              </div>
              <h4>推奨アクション</h4>
              <ul data-proof="action-list">
                {latestResult.recommendations.map((rec, i) => (
                  <li key={i}>{rec}</li>
                ))}
              </ul>
            </div>
          )}
           <p style={{fontSize: '0.8rem', color: '#666', marginTop: '2rem', borderTop: '1px solid #ddd', paddingTop: '1rem'}}>
            簡易モデルであることにご注意ください。最終的な判断は、必ず自治体等の公式情報をご確認ください。
          </p>
        </div>
      </div>
    </div>
  );
}