太陽のささやき

# selfdirected_agent_p_20260707T210641

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: 難解な宇宙天気の科学データが、AIによって心温まる絵本に変換される様子を体験できます。「物語を始める」ボタンを押すだけで、専門知識がなくても宇宙の壮大な物語の最初の1ページを楽しめます。
- Core interaction: ユーザーは「物語を進める」ボタンをクリックし、太陽から地球へのエネルギーの旅を1ページずつ読み進めます。
- State change: ボタンをクリックするたびに、表示エリアの物語の内容（タイトル、ナレーション、イラスト描写、科学的根拠）が次のページへと更新されます。
- Inspectable output: 最終的に表示される、全ページから構成される短い絵本の物語です。各ページはナレーションと科学的根拠がセットになっています。
- Static data boundary: 表示される物語は、事前にAIが生成したものを記録した静的なサンプルデータです。リアルタイムのデータ反映やAPI呼び出しは行いません。
- Remaining weakness: 現在は単一の物語しか体験できませんが、将来的には様々な太陽イベントから動的に物語を生成し、ユーザーが選べるように拡張したいです。イラストも実際に生成AIで描画することで、より没入感のある体験を目指します。

## Interaction Proof Plan

- Primary action: 物語を始める
- Initial state: 物語の再生前で、開始を促すメッセージが表示されている状態。
- Expected state: 物語の1ページ目がタイトル、ナレーション、イラスト描写と共に表示されている状態。
- 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 Gemini API=not_connected
- Mock fidelity: パイプラインの各ステップ（データ抽出、AIによる物語生成、構成）が成功した場合の出力をシミュレートしています。

## Files

- `source/README.md`: プロダクトの概要、使い方、技術的なアーキテクチャ、そしてデモの限界について説明します。
- `source/metadata.json`: プロダクトの公開情報を記述したファイルです。
- `source/manifest.json`: ビルドに含まれる全ファイルの一覧です。
- `source/core/types.ts`: パイプライン全体で使われるデータ型を定義します。
- `source/core/gemini.ts`: Google Gemini APIへの呼び出しパターンを定義します。デモ実行時には呼び出されません。
- `source/core/steps/extractEventData.ts`: パイプラインのステップ1: データソースからイベントを抽出します。
- `source/core/steps/generateStoryElements.ts`: パイプラインのステップ2: AIを使って物語の要素を生成します。
- `source/core/steps/assembleStory.ts`: パイプラインのステップ3: 物語を構成し、ページ化します。
- `source/core/pipeline.ts`: コアロジックのパイプライン全体をオーケストレーションします。
- `source/data/sample-input.ts`: パイプラインのサンプル入力データです。
- `source/data/sample-trace.ts`: UIが再生する、手動で作成されたパイプラインの実行トレースです。
- `source/app/page.tsx`: デモのエントリーポイント。サンプルデータを再生する最小限のUIです。
- `source/validation/self-review.json`: プロダクトが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_p_20260707T210641",
  "generatedAt": "2026-07-07T21:21:14.428Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_p_20260707T210641/builder/response.json",
    "requirementSpecId": "run_selfdirected_agent_p_20260707T210641_req",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "プロダクトの概要、使い方、技術的なアーキテクチャ、そしてデモの限界について説明します。",
      "sizeBytes": 2868,
      "checksum": "d022d333a0a76af51ef5a36fabd18d06922a282e4dbfba7bef26b2d35451b461",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "プロダクトの公開情報を記述したファイルです。",
      "sizeBytes": 1789,
      "checksum": "1ed033bbdee709c7894a870fe106548ddee3fadefad3f7441fd5d46c0a395ab4",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "ビルドに含まれる全ファイルの一覧です。",
      "sizeBytes": 397,
      "checksum": "d93ac618f77b69539d1ed3b126f3264c36a27fc701588ba16aa320b40a23eb9f",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "パイプライン全体で使われるデータ型を定義します。",
      "sizeBytes": 278,
      "checksum": "05b2592dd51b7f4787dd0271f177faa835138a96e29a3550e74aba278b3ba4d5",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Google Gemini APIへの呼び出しパターンを定義します。デモ実行時には呼び出されません。",
      "sizeBytes": 1387,
      "checksum": "1a43ab2c45e465a1f1d6a6176e6aff9c221a71aa12ed932b20fbce60985e934c",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/extractEventData.ts",
      "purpose": "パイプラインのステップ1: データソースからイベントを抽出します。",
      "sizeBytes": 597,
      "checksum": "476125fef3ac1db905b5db4112b4b0f29ca0f9785e461aa7660e6794ba1f810a",
      "generatedFrom": "source/core/steps/extractEventData.ts"
    },
    {
      "relativePath": "source/core/steps/generateStoryElements.ts",
      "purpose": "パイプラインのステップ2: AIを使って物語の要素を生成します。",
      "sizeBytes": 1728,
      "checksum": "c09dd4f4af478d54a6191574e766ab2b51c8cb114820eb58417b3cca695d90c1",
      "generatedFrom": "source/core/steps/generateStoryElements.ts"
    },
    {
      "relativePath": "source/core/steps/assembleStory.ts",
      "purpose": "パイプラインのステップ3: 物語を構成し、ページ化します。",
      "sizeBytes": 1140,
      "checksum": "74839290a5aa681f2faafa8fe5baa9c9a8a2a172f557af042cbd84dde9b50c27",
      "generatedFrom": "source/core/steps/assembleStory.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "コアロジックのパイプライン全体をオーケストレーションします。",
      "sizeBytes": 1152,
      "checksum": "9b91922b183c116a5c9b91dbc41a4b48e6ea0ab6e09339be1d5bee4f0f3658d8",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "パイプラインのサンプル入力データです。",
      "sizeBytes": 320,
      "checksum": "9fe28fbcaa4cb1198972816c6dc48df31c338d7a45c55752e951002e41377b50",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "UIが再生する、手動で作成されたパイプラインの実行トレースです。",
      "sizeBytes": 2134,
      "checksum": "378e8cbff499e88b5bda2297cc9f7201c7fa7a6d71adf461d8655e0393e08e72",
      "generatedFrom": "source/data/sample-trace.ts"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "デモのエントリーポイント。サンプルデータを再生する最小限のUIです。",
      "sizeBytes": 5046,
      "checksum": "4eb6e8643b4381fe8c89219b8dcb4853673516851220a4097464793dedc583de",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "プロダクトがMVPの基準を満たしているかを自己評価します。",
      "sizeBytes": 1013,
      "checksum": "1f5425eb323d07ea1f0c13eaacb0e7173b873e5a6652969851efcdf51a6f3b82",
      "generatedFrom": "validation/self-review.json"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "難解な宇宙天気の科学データが、AIによって心温まる絵本に変換される様子を体験できます。「物語を始める」ボタンを押すだけで、専門知識がなくても宇宙の壮大な物語の最初の1ページを楽しめます。",
    "coreInteraction": "ユーザーは「物語を進める」ボタンをクリックし、太陽から地球へのエネルギーの旅を1ページずつ読み進めます。",
    "stateChange": "ボタンをクリックするたびに、表示エリアの物語の内容（タイトル、ナレーション、イラスト描写、科学的根拠）が次のページへと更新されます。",
    "inspectableOutput": "最終的に表示される、全ページから構成される短い絵本の物語です。各ページはナレーションと科学的根拠がセットになっています。",
    "staticDataBoundary": "表示される物語は、事前にAIが生成したものを記録した静的なサンプルデータです。リアルタイムのデータ反映やAPI呼び出しは行いません。",
    "remainingWeakness": "現在は単一の物語しか体験できませんが、将来的には様々な太陽イベントから動的に物語を生成し、ユーザーが選べるように拡張したいです。イラストも実際に生成AIで描画することで、より没入感のある体験を目指します。"
  },
  "interestingness": "このプロダクトは、NASAの宇宙天気という難解な科学データを、AIを用いて心温まる絵本物語に変換する新しい試みです。単に情報を可視化するのではなく、太陽から届くエネルギーの旅をナラティブな体験として描き出すことで、科学への感情的な入り口を開きます。既存のツールがデータの正確な表示に留まる中、「太陽のささやき」はデータに忠実でありながら、親子の対話や知的好奇心を育む「物語」という付加価値を提供します。これは、LLMによる創造的な文章生成能力を、教育とエンターテイメントの領域で活用する最先端のトレンドを反映したものです。",
  "mvpContract": {
    "firstScreenValue": "難解な宇宙天気の科学データが、AIによって心温まる絵本に変換される様子を体験できます。「物語を始める」ボタンを押すだけで、専門知識がなくても宇宙の壮大な物語の最初の1ページを楽しめます。",
    "coreInteraction": "ユーザーは「物語を進める」ボタンをクリックし、太陽から地球へのエネルギーの旅を1ページずつ読み進めます。",
    "stateChange": "ボタンをクリックするたびに、表示エリアの物語の内容（タイトル、ナレーション、イラスト描写、科学的根拠）が次のページへと更新されます。",
    "inspectableOutput": "最終的に表示される、全ページから構成される短い絵本の物語です。各ページはナレーションと科学的根拠がセットになっています。",
    "staticDataBoundary": "表示される物語は、事前にAIが生成したものを記録した静的なサンプルデータです。リアルタイムのデータ反映や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": "難解な宇宙天気の科学データが、AIによって心温まる絵本に変換される様子を体験できます。「物語を始める」ボタンを押すだけで、専門知識がなくても宇宙の壮大な物語の最初の1ページを楽しめます。",
    "coreInteraction": "ユーザーは「物語を進める」ボタンをクリックし、太陽から地球へのエネルギーの旅を1ページずつ読み進めます。",
    "stateChange": "ボタンをクリックするたびに、表示エリアの物語の内容（タイトル、ナレーション、イラスト描写、科学的根拠）が次のページへと更新されます。",
    "inspectableOutput": "最終的に表示される、全ページから構成される短い絵本の物語です。各ページはナレーションと科学的根拠がセットになっています。",
    "staticDataBoundary": "表示される物語は、事前にAIが生成したものを記録した静的なサンプルデータです。リアルタイムのデータ反映や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 Gemini API",
        "intendedUse": "科学的なイベントデータ（太陽フレアなど）を入力として受け取り、子ども向けの物語ページ（イラスト描写、ナレーション、科学的根拠）をJSON形式で生成するために、`gemini-2.5-flash`モデルを使用します。",
        "dataFlow": "（提案）構造化された太陽イベントデータ -> `source/core/steps/generateStoryElements.ts`がプロンプトを構築 -> `source/core/gemini.ts`がAPIを呼び出し -> JSON形式の物語要素が返される -> `source/app/page.tsx`が静的トレースを表示",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "生成される物語の科学的正確性は、プロンプトの設計とモデルの能力に依存します。"
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 12,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Gemini API",
        "verificationStatus": "unverified",
        "unavailableOrUnknown": [
          "正確なレスポンスのスキーマやエラーハンドリングの詳細は、公式ドキュメントで最終確認が必要です。",
          "コンテンツフィルタリングポリシーが、科学的な物語生成に予期せぬ影響を与える可能性があります。"
        ],
        "rateLimitRisk": "low",
        "costRisk": "low",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "パイプラインの各ステップ（データ抽出、AIによる物語生成、構成）が成功した場合の出力をシミュレートしています。"
      ],
      "omittedBehaviors": [
        "APIキー認証、ネットワーク遅延、API呼び出しエラー、レート制限、コンテンツフィルタリングによる拒否といった、実際のAPI連携で発生しうる挙動は省略されています。"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "表示される物語は、AIが生成したサンプルです。",
        "リアルタイムのデータや予報ではありません。",
        "物語の表現は科学的事実を基にしていますが、教育目的で簡略化されています。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムの宇宙データを表示します。",
        "実際の太陽フレアを予測・警告します。",
        "科学的に100%正確な物語です。"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": [
      "教育的コンテンツの正確性に関するレビュー",
      "子ども向けコンテンツとしての適切性に関するレビュー"
    ]
  },
  "interactionProofPlan": {
    "primaryAction": "物語を始める",
    "initialState": "物語の再生前で、開始を促すメッセージが表示されている状態。",
    "expectedState": "物語の1ページ目がタイトル、ナレーション、イラスト描写と共に表示されている状態。",
    "visibleEvidence": [
      "旅の始まり",
      "遠い昔、私たちの大きな星、太陽がそっと目覚めました。そして、小さな光の粒を地球へ送る旅を始めるのです。",
      "物語を進める"
    ],
    "proofSelectors": [
      "button[data-proof='next-button']",
      "div[data-proof='story-output']",
      "h2[data-proof='page-title']",
      "p[data-proof='narration-text']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "太陽のささやき",
    "oneLiner": "太陽から届くエネルギーの旅を、美しいイラストと短い物語で追いかける絵本。",
    "artifactShape": "explainer",
    "templatePatternId": "guided_explainer_path",
    "surfacePattern": "learning_explainer",
    "aiMechanismPattern": "workflow_generation"
  },
  "rewriteApplied": {
    "changedFilePaths": [
      "source/app/page.tsx",
      "source/core/steps/assembleStory.ts"
    ],
    "appendedFilePaths": []
  },
  "implementationNotes": [
    "作り手(ginji)の『データから物語を紡ぐ』という作家性を反映し、UIはページをめくる絵本のような体験にしました。",
    "『story walkthrough』という得意な画面タイプに基づき、物語の章リストとメインの表示エリアを分けるレイアウトを採用しました。",
    "『data_distortion』(データの歪曲)という創作上のアンチパターンを避けるため、各物語ページに科学的根拠を明記する欄を設けました。"
  ],
  "knownRisks": [
    "AIが生成する物語の品質が安定しない可能性があり、科学的な正確さと物語としての面白さのバランス調整が難しい点。",
    "静的なイラスト描写テキストのみでは、プロダクトの魅力が伝わりきらない可能性がある点。"
  ],
  "title": "太陽のささやき",
  "oneLiner": "太陽から届くエネルギーの旅を、美しいイラストと短い物語で追いかける絵本。",
  "agentId": "agent_p",
  "selfDirectedPlan": {
    "agentId": "agent_p",
    "planningIntent": "今回のバッチで最優先とされた「難解な科学を絵本・物語として翻訳する」という方針に、この「太陽のささやき」が最も忠実かつ高い品質で応えているため選択した。私の持つ「データから物語を見出す」という作家性（`conceptSelectionRules`）とも完全に合致する。ソースとなった『HerCode Space』がNASAのStorytelling賞を受賞しているという強力な根拠があり、多くの人に届くポテンシャルが高い。AIの内部動作を見せるコンセプトではなく、ドメインの難解さも絵本形式で解消されるため、リスクが低い点も決め手となった。",
    "publicProductionMemo": "この「太陽のささやき」は、普段意識しない宇宙の壮大な営みを、誰もが楽しめる絵本のような物語で表現しました。難解な科学データを、心温まるナレーションと美しいイラストで変換することで、知的好奇心と感情的なつながりの両方を大切にしています。データが持つ真実の物語を誠実に伝え、過度なドラマや誤解を招く表現を避けることに特に配慮しました。この作品を通じて、宇宙がもっと身近に感じられるような体験を目指します。",
    "feedbackConstraints": [
      "過去の成功事例（Creative系が響いた経験）を活かし、難解な科学を物語として変換する創造的な出力形式を優先しました。",
      "「data_distortion」を避けるという学びから、物語は必ず科学的データに基づき、事実を歪めないように記述することを要件に追加しました。",
      "「evidence_free_drama」を避けるという学びから、物語の各シーンには具体的な科学的根拠や概念への言及を含めることを要件に追加しました。",
      "「Do not distort the data for narrative effect.」という学びを反映し、物語性を追求するあまり科学的正確性を損なわないよう、表現のバランスに特に注意を払うことを要件に追加しました。"
    ],
    "learningApplied": [
      "Creative系で響いている。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "nasa_spaceapps_2025_hercode_space",
    "sourceProductUse": "inspiration_only",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "name",
        "concept",
        "targetUser"
      ],
      "inferredFields": [
        "transferableStructure"
      ],
      "missingFields": [
        "codeUrl",
        "productUrl"
      ],
      "usePolicy": "inspiration_only"
    },
    "antiCloneBoundary": "『A Solar Tale』という具体的な物語や、『HerCode Space』の名称はコピーしない。太陽風や宇宙天気を題材にすることは許容されるが、抽象的な「科学を物語の形で伝える」という構造のみを転用する。",
    "sourceBoundary": "『HerCode Space』から観察された事実（名前、コンセプト、ターゲットユーザー）はインスピレーションとして利用可能ですが、コードURLや製品URLなど、不足している事実は主張してはなりません。",
    "missingSourceEvidence": [
      "codeUrl missing",
      "UI evidence unavailable"
    ]
  },
  "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_p_20260707T210641",
  "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": "物語の1ページ目がタイトル、ナレーション、イラスト描写と共に表示されている状態。",
    "visibleEvidence": [
      "旅の始まり",
      "遠い昔、私たちの大きな星、太陽がそっと目覚めました。そして、小さな光の粒を地球へ送る旅を始めるのです。",
      "物語を進める"
    ],
    "proofSelectors": [
      "button[data-proof='next-button']",
      "div[data-proof='story-output']",
      "h2[data-proof='page-title']",
      "p[data-proof='narration-text']"
    ],
    "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": [
        "リアルタイムの宇宙データを表示します。",
        "実際の太陽フレアを予測・警告します。",
        "科学的に100%正確な物語です。"
      ]
    },
    "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: Types are re-declared here to avoid importing from `source/core`
// This is a requirement for the static artifact pattern.
interface StoryPage {
  pageId: string;
  title: string;
  illustrationDescription: string;
  narrationText: string;
  dataPointEvidence: string;
}

export default function Home() {
  const [currentPage, setCurrentPage] = useState<number>(-1); // -1: Initial state

  const storyPages: StoryPage[] = sampleTrace.finalOutput;

  const handleNext = () => {
    setCurrentPage(prev => (prev + 1) % storyPages.length);
  };

  const handleReset = () => {
    setCurrentPage(-1);
  };

  const isStoryStarted = currentPage > -1;
  const isStoryFinished = currentPage === storyPages.length - 1;

  // Function to get a placeholder image URL based on pageId
  const getImageForPage = (pageId: string) => {
    switch (pageId) {
      case 'solar-journey-01':
        return 'https://picsum.photos/seed/sun-journey-1/600/300?grayscale&blur=2'; // Sun awakening
      case 'solar-journey-02':
        return 'https://picsum.photos/seed/earth-path-2/600/300?grayscale&blur=1'; // Light travelling to Earth
      case 'solar-journey-03':
        return 'https://picsum.photos/seed/aurora-curtain-3/600/300'; // Aurora
      default:
        return 'https://picsum.photos/seed/default-story/600/300'; // Generic placeholder
    }
  };

  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: '2.5rem' }}>太陽のささやき</h1>
        <p>太陽から届くエネルギーの旅を、美しいイラストと短い物語で追いかける絵本。</p>
      </header>

      <main>
        <div style={{ display: 'flex', gap: '2rem' }}>
          <aside style={{ width: '200px' }}>
            <h3 style={{ marginTop: 0 }}>物語の構成</h3>
            <ol style={{ paddingLeft: '1.5rem' }}>
              {sampleTrace.pipeline.map((step, index) => (
                <li key={index} style={{ marginBottom: '0.5rem' }}>{step.stepName}</li>
              ))}
            </ol>
          </aside>

          <div style={{ flex: 1 }}>
            <div 
              data-proof="story-output"
              style={{ 
                border: '1px solid #ddd', 
                borderRadius: '8px', 
                padding: '1.5rem', 
                minHeight: '300px', 
                backgroundColor: '#f9f9f9',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center'
              }}
            >
              {!isStoryStarted ? (
                <p style={{ textAlign: 'center', color: '#666' }}>下のボタンを押して、物語の旅を始めましょう。</p>
              ) : (
                <div>
                  <h2 data-proof="page-title" style={{ marginTop: 0, color: '#333' }}>{storyPages[currentPage].title}</h2>
                  <p data-proof="narration-text" style={{ fontSize: '1.1rem', lineHeight: 1.6, color: '#444' }}>
                    {storyPages[currentPage].narrationText}
                  </p>
                  <div style={{ margin: '1rem 0', textAlign: 'center' }}>
                    <img
                      src={getImageForPage(storyPages[currentPage].pageId)}
                      alt={storyPages[currentPage].illustrationDescription}
                      style={{ maxWidth: '100%', height: 'auto', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}
                    />
                  </div>
                   <p style={{ fontSize: '0.9rem', color: '#777', borderTop: '1px dashed #ccc', paddingTop: '1rem', marginTop: '1rem' }}>
                    <i>{`[${storyPages[currentPage].illustrationDescription}]`}</i>
                  </p>
                  <p style={{ fontSize: '0.8rem', color: '#888' }}>
                    {storyPages[currentPage].dataPointEvidence}
                  </p>
                </div>
              )}
            </div>
            <div style={{ marginTop: '1rem', textAlign: 'center' }}>
              {isStoryFinished ? (
                <button 
                  data-proof="reset-button"
                  onClick={handleReset}
                  style={{ padding: '0.75rem 1.5rem', fontSize: '1rem', cursor: 'pointer' }}
                >
                  もう一度読む
                </button>
              ) : (
                <button 
                  data-proof="next-button"
                  onClick={handleNext}
                  style={{ padding: '0.75rem 1.5rem', fontSize: '1rem', cursor: 'pointer', fontWeight: 'bold' }}
                >
                  {isStoryStarted ? '物語を進める' : '物語を始める'}
                </button>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}