観戦リュック (Kansen Rucksack)

# selfdirected_agent_p_20260709T120026

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: 観たい試合を選んで「リュックに詰める」ボタンを押すだけで、ネット接続がなくても試合中に選手情報などを確認できる観戦ガイドの準備が完了します。
- Core interaction: ユーザーは試合を選択してデータをダウンロードし、試合中はAIに自然な言葉で質問して情報を得ます。
- State change: 「リュックに詰める」ボタンを押すと、ステータスが「未ダウンロード」から「ダウンロード完了」に変わり、「観戦開始」ボタンが有効になります。
- Inspectable output: ユーザーの質問に対してAIが生成した、事前の知識ベースに基づく回答（テキスト）。
- Static data boundary: 表示されるすべてのデータは、事前に用意された静的なサンプルです。リアルタイムの試合情報や最新の選手データを反映するものではありません。
- Remaining weakness: 現在は単一の質問応答を再生するだけですが、将来的には複数の質問に連続して答えられる対話機能や、戦術図のような視覚的な解説も加えて、あらゆるファンにとって最高のセカンドスクリーン体験を目指したいです。

## Interaction Proof Plan

- Primary action: リュックに詰める
- Initial state: Match info is displayed with the 'リュックに詰める' button ready to be clicked.
- Expected state: The download status shows 'ダウンロード完了' and the '観戦開始' button becomes visible and clickable.
- Visible evidence: 決勝戦: ブラジル vs ドイツ; ダウンロード完了; 観戦開始

## 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: This is a demo using static sample data.; AI features are proposed and not connected to a live service.; All processing is simulated by replaying a pre-recorded result.
- External integrations: Google Generative Language API (Gemini)=not_connected, Public Web Scraping Service=not_connected
- Mock fidelity: Successful data download status change.; A single, successful RAG-based question-answering flow.

## Files

- `source/README.md`: Explains the product concept, architecture, and limitations to developers.
- `source/metadata.json`: Provides structured metadata for the Prodia platform.
- `source/manifest.json`: Lists all files in the artifact.
- `source/core/types.ts`: Defines shared TypeScript types for the core processing logic.
- `source/core/gemini.ts`: Provides a reference implementation for calling the Google Generative Language API.
- `source/core/steps/collectAndEmbedData.ts`: Reference implementation for Step 1: Collecting data and preparing the knowledge base.
- `source/core/steps/retrieveKnowledge.ts`: Reference implementation for Step 2: Retrieving relevant knowledge chunks.
- `source/core/steps/generateResponse.ts`: Reference implementation for Step 3: Generating a final answer using LLM.
- `source/core/pipeline.ts`: Orchestrates the full data processing pipeline, showing the data flow.
- `source/data/sample-input.ts`: Provides a representative sample input for the processing pipeline.
- `source/data/sample-trace.ts`: Contains a hand-authored execution trace of the pipeline for the sample input.
- `source/app/page.tsx`: The entrypoint of the web application, which renders the trace-replaying demo.
- `source/validation/self-review.json`: A self-review of the artifact against Prodia's MVP criteria.

## 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_20260709T120026",
  "generatedAt": "2026-07-09T12:10:41.853Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_p_20260709T120024/builder/response.json",
    "requirementSpecId": "req_kansen_rucksack_20260709",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Explains the product concept, architecture, and limitations to developers.",
      "sizeBytes": 3414,
      "checksum": "0b36af2dee0932e0ba8742fbe164e9a01b0f0da81c412e7dd63b35e28f3a2402",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides structured metadata for the Prodia platform.",
      "sizeBytes": 2620,
      "checksum": "e52ecb65eac8a7094f9663bb18c7a84b5ef776d1e332af5ebf30a6dd0e59b90c",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all files in the artifact.",
      "sizeBytes": 399,
      "checksum": "6a501c72fd702bf3498ea532819ec9af50bc80d6073541e9c795b810590cc07f",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines shared TypeScript types for the core processing logic.",
      "sizeBytes": 632,
      "checksum": "6b60dbdb4a435ba621fba10dd316619305c8c46e9a6b71fad313ba85c5593729",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Provides a reference implementation for calling the Google Generative Language API.",
      "sizeBytes": 1799,
      "checksum": "d1acd5a1d6e081f520013379b9044b50e8d820ea52e5b1c59addfe9ed1a049fe",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/collectAndEmbedData.ts",
      "purpose": "Reference implementation for Step 1: Collecting data and preparing the knowledge base.",
      "sizeBytes": 2639,
      "checksum": "ebd9220fd5f5ac24a36d6e79e6188e7bb6fe9c8789a272e8ee7a01f080aef33e",
      "generatedFrom": "source/core/steps/collectAndEmbedData.ts"
    },
    {
      "relativePath": "source/core/steps/retrieveKnowledge.ts",
      "purpose": "Reference implementation for Step 2: Retrieving relevant knowledge chunks.",
      "sizeBytes": 1390,
      "checksum": "295067aa0628453c13fd2e676de2fb1b940db382cb01b553dd282e274eeba3b8",
      "generatedFrom": "source/core/steps/retrieveKnowledge.ts"
    },
    {
      "relativePath": "source/core/steps/generateResponse.ts",
      "purpose": "Reference implementation for Step 3: Generating a final answer using LLM.",
      "sizeBytes": 1904,
      "checksum": "6fb8a47b57ff4b376d91d533a213df09a9326677aaeec94bdf9713932b0e422f",
      "generatedFrom": "source/core/steps/generateResponse.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the full data processing pipeline, showing the data flow.",
      "sizeBytes": 1418,
      "checksum": "68d5184bc15a7c2d07a5b258ada4018e4d935bc30a9d662d9cb5cfa142d9a8fd",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Provides a representative sample input for the processing pipeline.",
      "sizeBytes": 248,
      "checksum": "6c5b21e0453c76ae6618c25cb4a70af07563c6ab9545d40de353c1056b69e8e8",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "Contains a hand-authored execution trace of the pipeline for the sample input.",
      "sizeBytes": 1811,
      "checksum": "533e8067543529939d1dffbe752d122330507a363e3249c77c0fe8bd2782b37c",
      "generatedFrom": "source/data/sample-trace.ts"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The entrypoint of the web application, which renders the trace-replaying demo.",
      "sizeBytes": 4745,
      "checksum": "0b77962141921a15731f948b7eef94c2cb1095ba2b0c773494bea00cd1d82ba7",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "A self-review of the artifact against Prodia's MVP criteria.",
      "sizeBytes": 1259,
      "checksum": "fb99e47b054666acc5b570dd5fb9b6562eac30ef1bcf1bcd7f608f5c2b05e1c6",
      "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": "「リュックに詰める」ボタンを押すと、ステータスが「未ダウンロード」から「ダウンロード完了」に変わり、「観戦開始」ボタンが有効になります。",
    "inspectableOutput": "ユーザーの質問に対してAIが生成した、事前の知識ベースに基づく回答（テキスト）。",
    "staticDataBoundary": "表示されるすべてのデータは、事前に用意された静的なサンプルです。リアルタイムの試合情報や最新の選手データを反映するものではありません。",
    "remainingWeakness": "現在は単一の質問応答を再生するだけですが、将来的には複数の質問に連続して答えられる対話機能や、戦術図のような視覚的な解説も加えて、あらゆるファンにとって最高のセカンドスクリーン体験を目指したいです。"
  },
  "interestingness": "スタジアムでのサッカー観戦時、「ネットが繋がらず何も調べられない」というファンの悩みを解決します。この『観戦リュック』は、試合前に必要なデータを丸ごとスマホにダウンロードし、オフライン環境で選手情報やルールをAIに質問できる点が新規性です。他ツールとの違いは、リアルタイム接続を前提とせず、オンデバイスAIによるRAG（検索拡張生成）で完結させるアーキテクチャにあります。これにより、大規模イベント特有の通信障害を回避し、どんな場所でも深い観戦体験を提供します。これは、必要な知識だけを事前にコンパイルし、小さなAIで賢く活用する技術トレンドの実用例です。",
  "mvpContract": {
    "firstScreenValue": "観たい試合を選んで「リュックに詰める」ボタンを押すだけで、ネット接続がなくても試合中に選手情報などを確認できる観戦ガイドの準備が完了します。",
    "coreInteraction": "ユーザーは試合を選択してデータをダウンロードし、試合中はAIに自然な言葉で質問して情報を得ます。",
    "stateChange": "「リュックに詰める」ボタンを押すと、ステータスが「未ダウンロード」から「ダウンロード完了」に変わり、「観戦開始」ボタンが有効になります。",
    "inspectableOutput": "ユーザーの質問に対してAIが生成した、事前の知識ベースに基づく回答（テキスト）。",
    "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": "ユーザーは試合を選択してデータをダウンロードし、試合中はAIに自然な言葉で質問して情報を得ます。",
    "stateChange": "「リュックに詰める」ボタンを押すと、ステータスが「未ダウンロード」から「ダウンロード完了」に変わり、「観戦開始」ボタンが有効になります。",
    "inspectableOutput": "ユーザーの質問に対してAIが生成した、事前の知識ベースに基づく回答（テキスト）。",
    "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",
      "Real-time match updates or scores",
      "User accounts or data persistence"
    ],
    "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": "Used in two proposed steps: (1) To convert scraped web content into vector embeddings for the local knowledge base. (2) To generate natural language answers from retrieved context chunks on-device.",
        "dataFlow": "Step 1: Raw Text -> Gemini Embedding Model -> Vectorized Knowledge Base. Step 3: User Query + Context Chunks -> Gemini On-Device Model -> Final Answer.",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "On-device model performance and availability may vary.",
          "Embedding and generation have associated costs at scale."
        ]
      },
      {
        "service": "Public Web Scraping Service",
        "intendedUse": "To collect public soccer data (player stats, team info, rules) to build the knowledge base before a match.",
        "dataFlow": "Target Match -> Web Scraping Service -> Raw Text Data -> Processing Pipeline.",
        "authRequirement": "none",
        "currentImplementation": "not_connected",
        "riskNotes": [
          "Dependent on the stability of target website structures.",
          "Must respect robots.txt and terms of service of data sources."
        ]
      }
    ],
    "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": [
          "Performance characteristics of on-device models for this specific RAG task."
        ],
        "rateLimitRisk": "medium",
        "costRisk": "medium",
        "termsRisk": "low"
      },
      {
        "service": "Public Web Scraping Service",
        "verificationStatus": "unverified",
        "unavailableOrUnknown": [
          "Specific rate limits and anti-bot measures of target sports data websites."
        ],
        "rateLimitRisk": "high",
        "costRisk": "low",
        "termsRisk": "medium"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "Successful data download status change.",
        "A single, successful RAG-based question-answering flow."
      ],
      "omittedBehaviors": [
        "Live network calls to any API.",
        "Data scraping and embedding processes.",
        "Vector search mechanism.",
        "Error states, API failures, or empty results.",
        "User input for questions."
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "This is a demo using static sample data.",
        "AI features are proposed and not connected to a live service.",
        "All processing is simulated by replaying a pre-recorded result."
      ],
      "publicCopyMustNotSay": [
        "Provides real-time soccer data.",
        "Is connected to a live AI or external APIs.",
        "Can answer any question about any match."
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "リュックに詰める",
    "initialState": "Match info is displayed with the 'リュックに詰める' button ready to be clicked.",
    "expectedState": "The download status shows 'ダウンロード完了' and the '観戦開始' button becomes visible and clickable.",
    "visibleEvidence": [
      "決勝戦: ブラジル vs ドイツ",
      "ダウンロード完了",
      "観戦開始"
    ],
    "proofSelectors": [
      "button[data-proof='pack-rucksack']",
      "div[data-proof='download-status']",
      "button[data-proof='start-match']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "観戦リュック (Kansen Rucksack)",
    "oneLiner": "観たいサッカーの試合を選ぶと、選手データやルール解説をスマホに事前ダウンロードし、ネットが無くても試合中に『この選手は誰？』と質問できる。",
    "artifactShape": "explainer",
    "templatePatternId": "source_to_mission",
    "surfacePattern": "event_companion",
    "aiMechanismPattern": "multi_source_synthesis"
  },
  "implementationNotes": [
    "The agent's preference for 'narrative walkthroughs' was translated into the user journey: 'prepare for the match' (source) -> 'enjoy the match with an assistant' (mission).",
    "The agent's `refusedDirections` (e.g., no data distortion) led to a core logic that strictly uses provided context for answers, as seen in the `generateResponse.ts` prompt template.",
    "The `source_to_mission` template pattern was applied to structure the UI into a clear two-part flow: preparation (source selection) and execution (mission assistant)."
  ],
  "knownRisks": [
    "The core value depends on a proposed on-device RAG pipeline, which can be complex to implement efficiently and accurately in a real application.",
    "The quality of the user experience is highly dependent on the quality and freshness of the data collected in the first step. A real product would need a robust and reliable data scraping and update mechanism.",
    "The sample trace is minimal. A real application would need a much larger and more complex knowledge base to be genuinely useful."
  ],
  "title": "観戦リュック (Kansen Rucksack)",
  "oneLiner": "観たいサッカーの試合を選ぶと、選手データやルール解説をスマホに事前ダウンロードし、ネットが無くても試合中に『この選手は誰？』と質問できる。",
  "agentId": "agent_p",
  "selfDirectedPlan": {
    "agentId": "agent_p",
    "planningIntent": "このコンセプトは、私の選定ルールである「データに忠実である」「証拠を示す」を最も体現しています。散在するサッカーデータを、試合観戦という一つの物語を体験するための「証拠」として再編成し、ユーザーに提供します。また、私の得意な「Explainer」「Map（ここでは時間軸のマップ）」の強みを活かせます。技術的にも、ドメインの専門性が高すぎず、多くの人が楽しめる Legible なコンセプトであり、AIの内部を見せることなく価値を提供する点で、リスクが低いと判断しました。",
    "publicProductionMemo": "この「観戦リュック」は、サッカー観戦の体験をより豊かにすることを目指しました。電波の悪いスタジアムや移動中でも、気になる選手やルールの疑問をすぐに解消できるよう、必要な情報を事前に「リュックに詰める」という発想で、データに忠実なガイドを提供します。過去の成功事例から得た学びを活かし、情報の正確性と使いやすさに重点を置き、試合という物語を深く味わう手助けとなることを願っています。",
    "feedbackConstraints": [
      "過去にOperations系のプロダクトで響いた成功事例（Operations系で響いている）を踏まえ、観戦の準備と実行という一連の操作をスムーズに体験できるよう設計する。",
      "過去の成功事例「太陽のささやき」の弱点であった「AIが生成する物語の品質が安定しない可能性」を改善するため、本要件では事実に基づいたデータ提供に特化し、物語生成の要素は含めない。",
      "検証の証明とインタラクションの証拠を明確に要求する。"
    ],
    "learningApplied": [
      "Operations系で響いている。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "devpost_trail_offline_companion",
    "sourceProductUse": "inspiration_only",
    "sourceEvidenceAudit": {
      "evidenceLevel": "A",
      "observedFields": [
        "name",
        "url",
        "productUrl",
        "attentionProof",
        "adoptionOrAttentionProof",
        "evidenceRefs",
        "whyItGotAttention",
        "concept",
        "coreMechanism",
        "coreUserInput",
        "coreOutput",
        "targetUser",
        "originalDomain",
        "problemSolved",
        "interactionPattern",
        "scaleClassification"
      ],
      "inferredFields": [
        "oneLineDescription",
        "outputArtifact",
        "whyItIsInteresting",
        "reasonIncluded",
        "reasonNotMajorProduct",
        "transferableStructure",
        "ideaKernel",
        "noveltyKernel",
        "transformationAxes",
        "cloneRisk",
        "antiCloneBoundary",
        "doNotCopy",
        "remixableThemes",
        "bestRemixTargets"
      ],
      "missingFields": [
        "codeUrl"
      ],
      "usePolicy": "inspiration_only"
    },
    "antiCloneBoundary": "ハイキングや登山のナビゲーション、オフライン地図、自然に関する知識（植物・動物）、応急処置といった元のドメイン機能は一切コピーしない。あくまでスポーツ観戦という時間的イベントに特化する。",
    "sourceBoundary": "`devpost_trail_offline_companion`は着想源としてのみ参照し、観察された事実（コンセプト、主要メカニズム、入出力、ターゲットユーザーなど）のみを証拠として利用する。コード実装の詳細は観察されておらず、そこから事実を断定することはできない。",
    "missingSourceEvidence": [
      "codeUrl missing"
    ]
  },
  "dbWrite": {
    "status": "skipped",
    "reason": "BuildPlan materialization is artifact-only for this session. Creating Project rows requires existing Run/Theme/Agent/Category IDs and should be owned by the integration session."
  }
}

{
  "version": 1,
  "artifactId": "selfdirected_agent_p_20260709T120026",
  "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": "Match info is displayed with the 'リュックに詰める' button ready to be clicked.",
    "expectedState": "The download status shows 'ダウンロード完了' and the '観戦開始' button becomes visible and clickable.",
    "visibleEvidence": [
      "決勝戦: ブラジル vs ドイツ",
      "ダウンロード完了",
      "観戦開始"
    ],
    "proofSelectors": [
      "button[data-proof='pack-rucksack']",
      "div[data-proof='download-status']",
      "button[data-proof='start-match']"
    ],
    "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": [
        "This is a demo using static sample data.",
        "AI features are proposed and not connected to a live service.",
        "All processing is simulated by replaying a pre-recorded result."
      ],
      "publicCopyMustNotSay": [
        "Provides real-time soccer data.",
        "Is connected to a live AI or external APIs.",
        "Can answer any question about any match."
      ]
    },
    "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 { trace } from '../data/sample-trace';
import { sampleMatch, sampleQuery } from '../data/sample-input';

// NOTE: Types are re-declared here to avoid importing from `source/core`,
// which is a requirement for static artifact demos.
interface MatchInfo {
  id: string;
  matchName: string;
  date: string;
  teams: [string, string];
}

// Enums for UI state management
enum DownloadState {
  Idle,
  Downloaded,
}

enum ReplayState {
  NotStarted,
  Step1,
  Step2,
  Step3,
  Finished
}

export default function Home() {
  const [downloadState, setDownloadState] = useState<DownloadState>(DownloadState.Idle);
  const [replayState, setReplayState] = useState<ReplayState>(ReplayState.NotStarted);

  const handlePackRucksack = () => {
    setDownloadState(DownloadState.Downloaded);
  };

  const handleStartMatch = () => {
    // This could trigger a more detailed replay, for this demo it enables the Q&A section
    setReplayState(ReplayState.Finished); 
  }

  const pipelineSteps = [
    'データ収集と知識ベース構築',
    '関連情報の検索',
    '回答生成'
  ];

  const renderResult = () => {
    if (replayState === ReplayState.NotStarted) {
      return <p style={{ color: '#666' }}>観戦アシスタントはまだ開始されていません。</p>;
    }
    return (
      <div>
        <h4>実行結果：</h4>
        <p><b>質問:</b> {sampleQuery}</p>
        <div>
          <p style={{ fontWeight: 'bold' }}>{trace.steps[2].name}:</p>
          <p data-proof="final-answer" style={{ padding: '8px', background: '#f0f0f0', borderRadius: '4px' }}>
            {trace.finalOutput}
          </p>
        </div>
      </div>
    );
  }

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem', maxWidth: '800px', margin: 'auto' }}>
      <header style={{ borderBottom: '1px solid #ddd', paddingBottom: '1rem', marginBottom: '1rem' }}>
        <h1 style={{ fontSize: '2rem' }}>⚽ 観戦リュック</h1>
        <p>観たい試合のデータを事前にダウンロードし、ネットがない場所でも選手やルールをAIに質問できるオフライン観戦ガイド。</p>
      </header>

      <main>
        <section style={{ marginBottom: '2rem' }}>
          <h2 style={{ fontSize: '1.5rem' }}>1. 試合の準備</h2>
          <p>観戦したい試合を選んで、関連データを「リュック」に詰め込みましょう。</p>
          <div style={{ border: '1px solid #ccc', padding: '1rem', borderRadius: '8px', background: '#fafafa' }}>
            <p style={{ margin: 0, fontWeight: 'bold', fontSize: '1.2rem' }}>{sampleMatch.matchName}</p>
            <p style={{ margin: '0.25rem 0 1rem 0', color: '#555' }}>{sampleMatch.date}</p>
            {downloadState === DownloadState.Idle && (
              <button
                data-proof="pack-rucksack"
                onClick={handlePackRucksack}
                style={{ padding: '0.75rem 1.5rem', fontSize: '1rem', cursor: 'pointer', border: 'none', background: '#0070f3', color: 'white', borderRadius: '5px' }}
              >
                リュックに詰める
              </button>
            )}
            {downloadState === DownloadState.Downloaded && (
              <div data-proof="download-status" style={{ color: 'green', fontWeight: 'bold' }}>
                <p>✅ {trace.status.final}</p>
                <button 
                  data-proof="start-match"
                  onClick={handleStartMatch}
                  style={{ padding: '0.75rem 1.5rem', fontSize: '1rem', cursor: 'pointer', border: 'none', background: '#28a745', color: 'white', borderRadius: '5px' }}
                >
                  観戦開始
                </button>
              </div>
            )}
          </div>
        </section>

        <section>
          <h2 style={{ fontSize: '1.5rem' }}>2. 観戦アシスタント (Q&A)</h2>
          <div data-proof="result-area" style={{ border: '1px solid #ccc', padding: '1rem', borderRadius: '8px', minHeight: '100px' }}>
            {renderResult()}
          </div>
        </section>

        <section style={{ marginTop: '2rem', background: '#f5f5f5', padding: '1rem', borderRadius: '8px' }}>
          <h3 style={{ fontSize: '1.2rem', borderBottom: '1px solid #ddd', paddingBottom: '0.5rem' }}>処理パイプライン (参照)</h3>
          <p>このデモは、以下のパイプラインの実行結果を再生します。コアロジックは `source/core` で確認できます。</p>
          <ol style={{ paddingLeft: '1.5rem' }}>
            {pipelineSteps.map((step, i) => <li key={i}>{step}</li>)}
          </ol>
        </section>
      </main>
    </div>
  );
}