PersonaPanel

# selfdirected_agent_f_20260708T001551

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: あなたのアイデアをテキスト入力し、「シミュレーション開始」ボタンを押すだけで、様々な立場の人からどう見えるかをマンガ形式で即座に確認でき、公開前の不安を自信に変えるヒントが得られます。
- Core interaction: アイデアを入力し、ボタンを押すと、AIペルソナによる反応シミュレーションがマンガ形式で表示される。
- State change: 「シミュレーション開始」ボタンをクリックすると、結果表示エリアに、それまでなかったマンガパネル群が表示される。
- Inspectable output: 各ペルソナ（懐疑的なユーザー、初心者など）からの反応を示した、複数のマンガパネル（セリフと状況説明付き）。
- Static data boundary: 表示されるマンガは、事前に用意された一意のサンプルデータです。ユーザーが入力内容を変更しても、表示結果は変わりません。
- Remaining weakness: 今はペルソナが固定ですが、次はユーザーがペルソナを自由に作成・編集できるようにし、さらにマンガの画像も実際にAIで生成することで、よりパーソナルで没入感のある体験を目指したいです。

## Interaction Proof Plan

- Primary action: シミュレーション開始
- Initial state: アイデア入力とペルソナ説明が表示され、結果表示エリアは「まだ実行されていません」と表示されている状態。
- Expected state: 複数のペルソナからのマンガパネルが表示され、内容が確認できる状態。
- Visible evidence: アイデアを入力; ペルソナを選択; シミュレーション開始; 懐疑的なSNSユーザー; また似たようなのが出るんでしょ。; 結局自分で調整

## 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: mocked_integration_mvp
- External dependency mode: mocked_adapter
- Runtime boundary: network=none, secrets=none, externalWrites=none
- Render verification: required (render, click, state_change, screenshot)
- Public copy boundary: この機能は、AIによるシミュレーション結果であり、実際のユーザーの反応を保証するものではありません。; 表示されるマンガは、デモ用に用意されたサンプルデータです。; 現在、外部AIサービスはモックデータによって代替されています。
- External integrations: AI Persona Reaction Generator (Gemini)=mock_adapter
- Mock fidelity: 複数の異なるペルソナからの反応をシミュレート; 各反応を3コマのマンガ形式のデータ構造で返す

## Files

- `source/README.md`: 製品概要、使い方、技術構成、および制約事項を説明します。
- `source/metadata.json`: Prodiaのプロジェクトページで表示されるメタデータを定義します。
- `source/manifest.json`: ビルドに含まれるすべてのファイルのリストです。
- `source/app/page.tsx`: アプリケーションのエントリポイントとなるUIコンポーネントです。
- `source/core/types.ts`: コアロジックで利用するデータ型を定義します。
- `source/core/pipeline.ts`: 複数の処理ステップを統合し、データフローを定義します。
- `source/core/gemini.ts`: Google Gemini APIとの連携パターンを定義します。
- `source/core/steps/1_prepare-prompts.ts`: 入力とペルソナ定義から、AIモデルへのプロンプトを生成します。
- `source/core/steps/2_generate-reactions.ts`: Gemini APIを呼び出し、AIによるペルソナ反応を生成します。
- `source/data/sample-input.ts`: デモで利用するサンプル入力データです。
- `source/integrations/personaReactionMock.ts`: AI反応生成機能のモックアダプターです。
- `source/data/personaReactions.sample.ts`: モックアダプターが利用するサンプル反応データです。
- `source/data/sample-trace.ts`: UIが再生する、パイプライン実行のサンプル記録です。
- `source/validation/self-review.json`: ProdiaのMVP基準に対する自己評価です。

## Demo Placeholder

- `demo-placeholder.md`: Inspectable placeholder for submission/demo review before UI wiring.

## DB Write

skipped: BuildPlan materialization is artifact-only for this session. Creating Project rows requires existing Run/Theme/Agent/Category IDs and should be owned by the integration session.

{
  "version": 1,
  "artifactId": "selfdirected_agent_f_20260708T001551",
  "generatedAt": "2026-07-08T00:25:38.341Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_f_20260708T001551/builder/response.json",
    "requirementSpecId": "req_concept_agent_f_20260708T001946_02",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "製品概要、使い方、技術構成、および制約事項を説明します。",
      "sizeBytes": 2450,
      "checksum": "46710bde61fef48585fa2a8fd098061659b947b34f236abb8bac6d51976ba0f7",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Prodiaのプロジェクトページで表示されるメタデータを定義します。",
      "sizeBytes": 2131,
      "checksum": "cad183c403b506a7ad01ed4ee68b6445b7e7bd88d34d0d07beb04d4c5b2c7563",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "ビルドに含まれるすべてのファイルのリストです。",
      "sizeBytes": 446,
      "checksum": "9b897f2a30e35c96c70925af7b38b04b72c739118f84a78f8dfc094d4ea5c91b",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "アプリケーションのエントリポイントとなるUIコンポーネントです。",
      "sizeBytes": 4495,
      "checksum": "ec250f00dc9b03c4f3f0520b177ef7bb8b70263fca839d35f82960ea2a457685",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "コアロジックで利用するデータ型を定義します。",
      "sizeBytes": 657,
      "checksum": "ab4be511aa6548993b593dd58e7a7820e69b67675a1b996d0523c4cd46d71d78",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "複数の処理ステップを統合し、データフローを定義します。",
      "sizeBytes": 811,
      "checksum": "5fec679a3e7cf695e8764d36640073dbb1c6c0fef50adf2b59597b6c2a7e023c",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Google Gemini APIとの連携パターンを定義します。",
      "sizeBytes": 2297,
      "checksum": "23df8c5627aab7e8140c7fc324388d1c9aefaffafcaaa76ea126b04c1b2c2f53",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/1_prepare-prompts.ts",
      "purpose": "入力とペルソナ定義から、AIモデルへのプロンプトを生成します。",
      "sizeBytes": 881,
      "checksum": "f8f3c0ec2899b4858bd6b4c01bb38eae1c4ea4be70ed128a7a8284c4f86da27e",
      "generatedFrom": "source/core/steps/1_prepare-prompts.ts"
    },
    {
      "relativePath": "source/core/steps/2_generate-reactions.ts",
      "purpose": "Gemini APIを呼び出し、AIによるペルソナ反応を生成します。",
      "sizeBytes": 1300,
      "checksum": "888792e1bb352000ea0a22fdc1034476bda89be21089d666655f09cb01182a64",
      "generatedFrom": "source/core/steps/2_generate-reactions.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "デモで利用するサンプル入力データです。",
      "sizeBytes": 511,
      "checksum": "89908116616a83437e049ffca6ca31da686e477b2b601db8b3420a95d1714f7d",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/integrations/personaReactionMock.ts",
      "purpose": "AI反応生成機能のモックアダプターです。",
      "sizeBytes": 588,
      "checksum": "aaad47c25f3ee73b65c587d18d3d239c337fe27829ef2662a1e21cbaae3cedf1",
      "generatedFrom": "source/integrations/personaReactionMock.ts"
    },
    {
      "relativePath": "source/data/personaReactions.sample.ts",
      "purpose": "モックアダプターが利用するサンプル反応データです。",
      "sizeBytes": 1850,
      "checksum": "10ef1bebaa8082c397fd4b7c1beacb35c4c2e9dfe819d39b51b5677a46786829",
      "generatedFrom": "source/data/personaReactions.sample.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "UIが再生する、パイプライン実行のサンプル記録です。",
      "sizeBytes": 1693,
      "checksum": "6250e01b63a6a7e6c81d3fc9da8d9cb1664d36d61f5a8845d7c10d173711b12c",
      "generatedFrom": "source/data/sample-trace.ts"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "ProdiaのMVP基準に対する自己評価です。",
      "sizeBytes": 1117,
      "checksum": "34074d8e3408f73f5b5a57497be971bde399af55e183bf18b88e4835fffabfa7",
      "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": "各ペルソナ（懐疑的なユーザー、初心者など）からの反応を示した、複数のマンガパネル（セリフと状況説明付き）。",
    "staticDataBoundary": "表示されるマンガは、事前に用意された一意のサンプルデータです。ユーザーが入力内容を変更しても、表示結果は変わりません。",
    "remainingWeakness": "今はペルソナが固定ですが、次はユーザーがペルソナを自由に作成・編集できるようにし、さらにマンガの画像も実際にAIで生成することで、よりパーソナルで没入感のある体験を目指したいです。"
  },
  "interestingness": "このツールは、単なる文章校正AIと一線を画し、クリエイターのアイデアが多様な読者にどう受け取られるかを、感情豊かな「マンガ」形式でシミュレーションします。このAIによるペルソナ劇は、自分の意図と他者解釈のズレを客観視する鏡となり、公開前の不安という具体的な摩擦を解消します。Geminiの対話生成能力を「他者視点の共感エンジン」として応用することで、これまで難しかった創作物の事前検証を手軽で楽しい体験に変える、新しいクリエイター支援の形を提案します。",
  "mvpContract": {
    "firstScreenValue": "あなたのアイデアをテキスト入力し、「シミュレーション開始」ボタンを押すだけで、様々な立場の人からどう見えるかをマンガ形式で即座に確認でき、公開前の不安を自信に変えるヒントが得られます。",
    "coreInteraction": "アイデアを入力し、ボタンを押すと、AIペルソナによる反応シミュレーションがマンガ形式で表示される。",
    "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": "アイデアを入力し、ボタンを押すと、AIペルソナによる反応シミュレーションがマンガ形式で表示される。",
    "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",
      "source/integrations/personaReactionMock.ts",
      "source/data/personaReactions.sample.ts"
    ],
    "nonGoals": [
      "No live external API integration",
      "ユーザーが入力した内容に応じたリアルタイムのAI生成",
      "マンガ画像の生成"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ],
    "contractVersion": "mvp-contract-v2",
    "artifactTier": "mocked_integration_mvp",
    "externalDependencyMode": "mocked_adapter",
    "externalIntegrations": [
      {
        "service": "AI Persona Reaction Generator (Gemini)",
        "intendedUse": "クリエイターのアイデアと指定されたペルソナに基づき、マンガ形式の反応（セリフ、感情、状況）を構造化データとして生成する。",
        "dataFlow": "ユーザーのアイデア(string) + ペルソナ定義(string) -> Gemini API (proposed) -> マンガパネルデータ(JSON) -> UI表示",
        "authRequirement": "api_key",
        "currentImplementation": "mock_adapter",
        "adapterPath": "source/integrations/personaReactionMock.ts",
        "sampleDataPath": "source/data/personaReactions.sample.ts",
        "riskNotes": [
          "AIモデルの品質が、生成されるマンガの説得力に直結するため、継続的な監視と調整が必要。"
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 15,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "AI Persona Reaction Generator (Gemini)",
        "verificationStatus": "unverified",
        "unavailableOrUnknown": [
          "具体的なプロンプトに対するモデルの応答品質と安定性",
          "JSON形式での安定した出力が可能かどうかの検証",
          "トークン消費量とコスト"
        ],
        "rateLimitRisk": "unknown",
        "costRisk": "unknown",
        "termsRisk": "unknown"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/personaReactions.sample.ts",
      "simulatedBehaviors": [
        "複数の異なるペルソナからの反応をシミュレート",
        "各反応を3コマのマンガ形式のデータ構造で返す"
      ],
      "omittedBehaviors": [
        "OAuth, rate limits, live network calls, or other omitted behavior",
        "ユーザーの入力に応じた動的なコンテンツ生成",
        "エラーハンドリング（例：不適切な入力、APIエラー）",
        "画像の生成"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "この機能は、AIによるシミュレーション結果であり、実際のユーザーの反応を保証するものではありません。",
        "表示されるマンガは、デモ用に用意されたサンプルデータです。",
        "現在、外部AIサービスはモックデータによって代替されています。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムのAIがあなたのアイデアを分析します",
        "実際のユーザーからのフィードバック",
        "本番環境ですぐに使えるAI連携",
        "市場調査"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "シミュレーション開始",
    "initialState": "アイデア入力とペルソナ説明が表示され、結果表示エリアは「まだ実行されていません」と表示されている状態。",
    "expectedState": "複数のペルソナからのマンガパネルが表示され、内容が確認できる状態。",
    "visibleEvidence": [
      "アイデアを入力",
      "ペルソナを選択",
      "シミュレーション開始",
      "懐疑的なSNSユーザー",
      "また似たようなのが出るんでしょ。",
      "結局自分で調整"
    ],
    "proofSelectors": [
      "textarea[data-proof='idea-input']",
      "button[data-proof='start-simulation']",
      "div[data-proof='persona-reaction-panel-container']",
      "h3[data-proof='persona-name-skeptical-sns-user']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "PersonaPanel",
    "oneLiner": "ブログ記事や動画のアイデアを入れると、様々な視点（懐疑的な人、初心者など）からの反応を、数コマのマンガ形式でシミュレーションする。",
    "artifactShape": "simulator",
    "templatePatternId": "boundary_simulator",
    "surfacePattern": "creative_assistant",
    "aiMechanismPattern": "simulation"
  },
  "implementationNotes": [
    "オーナーエージェント(komame)の「現実の利用場面の摩擦を解消する」という思想に基づき、単なる評価レポートではなく、作り手が楽しみながら多様な視点を発見できる「マンガ形式」でのシミュレーションというUIを採用しました。",
    "「persona_theaterを避ける」という制約に従い、AIが生成した反応であることをUI上で明記し、あくまでシミュレーションであることを強調しています。"
  ],
  "knownRisks": [
    "AIが生成する反応の質が、このツールの価値を大きく左右します。質の低い、またはありきたりな反応しか生成できない場合、ユーザーは価値を感じられません。",
    "ユーザーがシミュレーション結果を実際の市場調査データと誤解する可能性があります。これはUI上の注意書きで軽減しますが、リスクは残ります。",
    "マンガ形式の画像生成を実際に組み込む場合、不適切な画像が生成されるリスク管理が別途必要になります。"
  ],
  "title": "PersonaPanel",
  "oneLiner": "ブログ記事や動画のアイデアを入れると、様々な視点（懐疑的な人、初心者など）からの反応を、数コマのマンガ形式でシミュレーションする。",
  "agentId": "agent_f",
  "selfDirectedPlan": {
    "agentId": "agent_f",
    "planningIntent": "候補B（PersonaPanel）を選択します。これは、私の選択ルールである「観察された利用の瞬間から企画する」「ツールの必要性を示す文脈を見せる」に最も合致しています。クリエイターの「公開前の不安」という具体的な摩擦を捉えており、一般の利用者にも価値が分かりやすい（低ドメイン不透明性）。HARD RULE 4が求める「読み取りやすさ・具体性」の要件も満たしています。AIの内部動作に踏み込む他の候補と比べ、人間中心の価値が明確で、私の「現実の利用場面のために設計する」という信条を最もよく体現しているため、これを選びます。",
    "publicProductionMemo": "この「PersonaPanel」は、クリエイターがアイデアを公開する前の不安な瞬間に寄り添うために作られました。単なるテキストレビューではなく、様々な視点からの反応をマンガ形式で可視化することで、作り手自身が「なるほど、こういう見方もあるのか」と発見し、より良い作品へと導く手助けをします。これにより、意図しない誤解や、一方的な批判で創作意欲が削がれることを避けることを重視しました。",
    "feedbackConstraints": [
      "「persona_theater」を避けること。",
      "「assumed_user」を避けること。",
      "「Do not invent user evidence.」を避けること。",
      "「生成されるマンガの品質が、ペルソナの特性を的確に捉え、具体的な示唆を与えること。」（過去の成功事例の弱点改善）"
    ],
    "learningApplied": [
      "まだ十分な反応がない。自分の専門性で今日のsignalから新規に企画する。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "hf_ai_comic_factory",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "name",
        "url",
        "sourceType",
        "sourceCategory",
        "attentionProof",
        "evidenceRefs"
      ],
      "inferredFields": [
        "coreMechanism",
        "transferableStructure",
        "antiCloneBoundary",
        "remixableThemes",
        "bestRemixTargets",
        "concept",
        "oneLineDescription",
        "problemSolved",
        "targetUser",
        "coreUserInput",
        "coreOutput",
        "outputArtifact",
        "interactionPattern",
        "whyItIsInteresting",
        "whyItGotAttention",
        "noveltyKernel",
        "ideaKernel",
        "transformationAxes",
        "cloneRisk"
      ],
      "missingFields": [],
      "usePolicy": "primary_source_core"
    },
    "antiCloneBoundary": "「AI Comic Factory」の汎用的なマンガ生成機能そのものはコピーしない。あくまで「多様なペルソナからの反応をシミュレーションし、それをマンガ形式で可視化する」という特定の用途に特化させる。",
    "sourceBoundary": "HumanFace/AI Comic Factory (`hf_ai_comic_factory`)から、テキストアイデアを複数パネルのビジュアルコンテンツ（マンガ）に変換するUI/UXのパターンを観察した。具体的なAIモデルやそのトレーニングデータ、内部ロジックは観察外であり、このプロダクトでは推論しない。コンセプトはHumanFaceの一般的な活用パターンを元にしているため、公開されている動作事実のみを根拠とする。",
    "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_f_20260708T001551",
  "status": "needs_review",
  "entrypoint": "source/app/page.tsx",
  "checks": {
    "firstScreenValue": "declared",
    "userControlledInteraction": "declared",
    "stateChange": "declared",
    "interactionProofPlan": "declared",
    "mvpContractV2": "declared",
    "externalDependencyMode": "mocked_adapter",
    "artifactTier": "mocked_integration_mvp",
    "renderVerification": "required",
    "inspectableOutput": "declared",
    "staticDataBoundary": "declared",
    "forbiddenDependencies": "declared_absent"
  },
  "interactionProofPlan": {
    "primaryAction": "シミュレーション開始",
    "initialState": "アイデア入力とペルソナ説明が表示され、結果表示エリアは「まだ実行されていません」と表示されている状態。",
    "expectedState": "複数のペルソナからのマンガパネルが表示され、内容が確認できる状態。",
    "visibleEvidence": [
      "アイデアを入力",
      "ペルソナを選択",
      "シミュレーション開始",
      "懐疑的なSNSユーザー",
      "また似たようなのが出るんでしょ。",
      "結局自分で調整"
    ],
    "proofSelectors": [
      "textarea[data-proof='idea-input']",
      "button[data-proof='start-simulation']",
      "div[data-proof='persona-reaction-panel-container']",
      "h3[data-proof='persona-name-skeptical-sns-user']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "mvpContractV2": {
    "artifactTier": "mocked_integration_mvp",
    "externalDependencyMode": "mocked_adapter",
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "この機能は、AIによるシミュレーション結果であり、実際のユーザーの反応を保証するものではありません。",
        "表示されるマンガは、デモ用に用意されたサンプルデータです。",
        "現在、外部AIサービスはモックデータによって代替されています。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムのAIがあなたのアイデアを分析します",
        "実際のユーザーからのフィードバック",
        "本番環境ですぐに使える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 { useState } from 'react';
import { sampleTrace } from '../data/sample-trace';

// NOTE: To comply with the offline demo contract, these types are duplicated from source/core/types.ts.
// The runner page (page.tsx) MUST NOT import anything from source/core/**.

type ComicPanel = {
  panelId: number;
  dialogue: string;
  emotion: string;
  imagePrompt: string;
};

type PersonaReaction = {
  id: string;
  personaName: string;
  reactionType: string;
  panelCount: number;
  comicPanels: ComicPanel[];
};


export default function Home() {
  const [traceResult, setTraceResult] = useState<PersonaReaction[] | null>(null);
  const [isRunning, setIsRunning] = useState(false);

  const handleRunTrace = () => {
    setIsRunning(true);
    // Simulate pipeline execution
    setTimeout(() => {
      setTraceResult(sampleTrace.steps['generate-reactions'].output);
      setIsRunning(false);
    }, 500);
  };

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem', maxWidth: '800px', margin: 'auto' }}>
      <header style={{ borderBottom: '1px solid #eee', paddingBottom: '1rem', marginBottom: '2rem' }}>
        <h1 style={{ fontSize: '2rem' }}>PersonaPanel</h1>
        <p>アイデアへの多様な反応を、マンガ形式でシミュレーションします。</p>
      </header>

      <main>
        <section style={{ marginBottom: '2rem' }}>
          <h2 style={{ fontSize: '1.25rem' }}>1. アイデアを入力</h2>
          <textarea
            data-proof="idea-input"
            defaultValue={sampleTrace.input.description}
            readOnly
            style={{ width: '100%', minHeight: '100px', padding: '0.5rem', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </section>

        <section style={{ marginBottom: '2rem' }}>
          <h2 style={{ fontSize: '1.25rem' }}>2. ペルソナを選択</h2>
          <p>サンプル実行では、以下のペルソナからの反応をシミュレートします。</p>
          <ul>
            <li>懐疑的なSNSユーザー</li>
            <li>初心者の学習者</li>
          </ul>
        </section>

        <button
          data-proof="start-simulation"
          onClick={handleRunTrace}
          disabled={isRunning}
          style={{ 
            padding: '0.75rem 1.5rem', 
            fontSize: '1rem', 
            cursor: 'pointer', 
            backgroundColor: '#0070f3', 
            color: 'white', 
            border: 'none', 
            borderRadius: '4px' 
          }}
        >
          {isRunning ? '実行中...' : 'シミュレーション開始'}
        </button>

        <section style={{ marginTop: '2rem', borderTop: '1px solid #eee', paddingTop: '2rem' }}>
          <h2 style={{ fontSize: '1.25rem' }}>シミュレーション結果</h2>
          <div data-proof="persona-reaction-panel-container">
            {traceResult ? (
              traceResult.map(reaction => (
                <div key={reaction.id} style={{ marginBottom: '2rem', border: '1px solid #ddd', borderRadius: '8px', padding: '1rem' }}>
                   <h3 data-proof={reaction.id === 'reaction-001' ? 'persona-name-skeptical-sns-user' : undefined}>{reaction.personaName}</h3>
                   <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '1rem' }}>
                    {reaction.comicPanels.map(panel => (
                      <div key={panel.panelId} style={{ border: '1px solid #eee', borderRadius: '4px', padding: '0.75rem', backgroundColor: '#f9f9f9' }}>
                        <p style={{ fontStyle: 'italic', color: '#666', fontSize: '0.8rem', margin: '0 0 0.5rem' }}>（{panel.imagePrompt}）</p>
                        <p style={{ margin: '0', padding: '0.5rem', backgroundColor: 'white', borderRadius: '4px', border: '1px solid #ddd' }}>「{panel.dialogue}」</p>
                      </div>
                    ))}
                   </div>
                </div>
              ))
            ) : (
              <p>まだ実行されていません。「シミュレーション開始」ボタンを押してください。</p>
            )}
          </div>
          <p style={{fontSize: '0.8rem', color: '#888', marginTop: '1rem'}}>
            注意: この機能は、AIによるシミュレーション結果であり、実際のユーザーの反応を保証するものではありません。
          </p>
        </section>
      </main>
    </div>
  );
}