試写室AI

# selfdirected_agent_f_20260707T142527

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: ドラフトを貼り付けてボタンを押すだけで、自分の文章が多様な読者からどう見えるかを、楽しくて分かりやすい漫画形式で即座に確認でき、公開前の不安を自信に変えるヒントを得られます。
- Core interaction: ユーザーがドラフトを入力し、「試写を再生」ボタンを押すと、複数のペルソナからの反応が漫画ストーリーボードとして表示される。それらを見比べて、改善点を発見する。
- State change: クリック前は空だった「試写結果」エリアに、クリック後はペルソナごとの漫画形式のストーリーボードが表示される。
- Inspectable output: 各ペルソナの名前、および3コマの漫画（画像プレースホルダーとキャプション）で構成されるストーリーボード。
- Static data boundary: デモは単一の静的なサンプル投稿とその実行結果を再生するのみ。ユーザーが自由なテキストを入力して動的に結果を生成することはできません。
- Remaining weakness: 現在は単一の投稿に対する静的な反応セットですが、将来的には画像付き投稿の分析や、ユーザーがペルソナをカスタマイズできる機能を追加したいです。最終的には、クリエイターが自分のファン層に近いAIペルソナ群を保存し、繰り返し使える「マイ試写室」機能まで発展させたいです。

## Interaction Proof Plan

- Primary action: サンプルで試写を再生
- Initial state: The results area shows a placeholder message inviting the user to start.
- Expected state: The results area displays three storyboards, one for each sample persona: '皮肉屋な専門家', '熱心なファン', and '一般の読者'.
- 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による架空の反応をシミュレートするものであり、実際の市場調査結果ではありません。; AIモデルの応答は静的なサンプルデータに基づいています。; 外部AIサービスとの接続は現在提案段階であり、デモでは実行されません。
- External integrations: Google Gemini API=not_connected, Image Generation AI=not_connected
- Mock fidelity: Multi-persona text reaction generation; Transformation of text reactions into a structured storyboard format

## Files

- `source/README.md`: Explains the product concept, its architecture, how to understand the demo, and its limitations.
- `source/metadata.json`: Provides structured metadata for the Prodia platform.
- `source/manifest.json`: Lists all the files in the artifact.
- `source/validation/self-review.json`: A self-review of the artifact against Prodia MVP criteria.
- `source/core/types.ts`: Defines the core data structures for the pipeline.
- `source/core/gemini.ts`: Documents the intended call pattern to the Google Generative Language API (Gemini).
- `source/core/steps/step1_generateReactions.ts`: Pipeline step to generate text reactions for each persona.
- `source/core/steps/step2_createStoryboards.ts`: Pipeline step to convert text reactions into structured storyboards.
- `source/core/pipeline.ts`: Orchestrates the core logic steps.
- `source/data/sample-input.ts`: Provides the sample input data for the demo.
- `source/data/sample-trace.ts`: Provides a hand-authored execution trace of the pipeline for the demo.
- `source/app/page.tsx`: The entrypoint for the static artifact, which replays the sample trace.

## 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_20260707T142527",
  "generatedAt": "2026-07-07T14:36:37.821Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_f_20260707T142527/builder/response.json",
    "requirementSpecId": "req_agent_f_20260707T143227",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Explains the product concept, its architecture, how to understand the demo, and its limitations.",
      "sizeBytes": 2604,
      "checksum": "8d1861cc4bd0eed2629bd196ff4208254d1da25b50545ab5dff84fb97b54bdfb",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides structured metadata for the Prodia platform.",
      "sizeBytes": 4720,
      "checksum": "c33dade4cecd9000ce9bdd219f68e64946cb5367f1adfa65b1973c26426ea727",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all the files in the artifact.",
      "sizeBytes": 334,
      "checksum": "1b65c1ec4cbf5b9759ebf935b8db0693dd51cdba7630e69572d0aa205baa4256",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "A self-review of the artifact against Prodia MVP criteria.",
      "sizeBytes": 409,
      "checksum": "1977698e431e8e377c9ba7b680ef843432dcb9b8258c3ffe96c22d9fdaf4d93c",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines the core data structures for the pipeline.",
      "sizeBytes": 507,
      "checksum": "ad42957f186196c1012e8ad4db62d2813c237fdf0715c4fa09fdf4c70efee000",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Documents the intended call pattern to the Google Generative Language API (Gemini).",
      "sizeBytes": 2507,
      "checksum": "c6840993209c0de803ff0a0c4d86e82c11501236ebf021b1a9573f16598a8a1f",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/step1_generateReactions.ts",
      "purpose": "Pipeline step to generate text reactions for each persona.",
      "sizeBytes": 937,
      "checksum": "3a630beec51cae4e064b2015e70eba6047809dd83aa82b64d78f3b11c4438140",
      "generatedFrom": "source/core/steps/step1_generateReactions.ts"
    },
    {
      "relativePath": "source/core/steps/step2_createStoryboards.ts",
      "purpose": "Pipeline step to convert text reactions into structured storyboards.",
      "sizeBytes": 1608,
      "checksum": "ab1a60e65f2b8303cc4d6120b470beaf1cf07f8bb3eb240536d75433d12b38d3",
      "generatedFrom": "source/core/steps/step2_createStoryboards.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the core logic steps.",
      "sizeBytes": 807,
      "checksum": "e8513ebd3c8ba65f440ba0273a0c45433ceb4981eb5a9e0d1156cedbd5a0409b",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Provides the sample input data for the demo.",
      "sizeBytes": 396,
      "checksum": "3379bddef55fa0e4b8fc8f4cb9d5c21b22cf446aec938ebf5d0d3dc7f5da714b",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "Provides a hand-authored execution trace of the pipeline for the demo.",
      "sizeBytes": 4118,
      "checksum": "61d8d46dc702e21bca8d4766044589a50f9620190be7adec1c41fdedc3d4a2fb",
      "generatedFrom": "source/data/sample-trace.ts"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The entrypoint for the static artifact, which replays the sample trace.",
      "sizeBytes": 6914,
      "checksum": "a3979a894abc532724de39eb9dd153b643780e6f5e66a69a7ec05291d1897442",
      "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": "各ペルソナの名前、および3コマの漫画（画像プレースホルダーとキャプション）で構成されるストーリーボード。",
    "staticDataBoundary": "デモは単一の静的なサンプル投稿とその実行結果を再生するのみ。ユーザーが自由なテキストを入力して動的に結果を生成することはできません。",
    "remainingWeakness": "現在は単一の投稿に対する静的な反応セットですが、将来的には画像付き投稿の分析や、ユーザーがペルソナをカスタマイズできる機能を追加したいです。最終的には、クリエイターが自分のファン層に近いAIペルソナ群を保存し、繰り返し使える「マイ試写室」機能まで発展させたいです。"
  },
  "interestingness": "「この投稿、本当に伝わってる？」公開ボタンを押す前のクリエイターの不安に寄り添うのが「試写室AI」です。既存のツールが文章の校正に留まるのに対し、本作は多様な読者ペルソナからの「架空の反応」を漫画形式でシミュレートするという全く新しい体験を提供します。これにより、作り手の意図と受け手の解釈のズレを直感的に発見できます。技術的には、単一の回答を生成するLLMの活用から一歩進み、複数視点からの多角的な解釈を生成・可視化するエージェント的なアプローチをとっている点が特徴です。予想外のツッコミや温かい共感がコマ漫画になる面白さが、創作の次のヒントになります。",
  "mvpContract": {
    "firstScreenValue": "ドラフトを貼り付けてボタンを押すだけで、自分の文章が多様な読者からどう見えるかを、楽しくて分かりやすい漫画形式で即座に確認でき、公開前の不安を自信に変えるヒントを得られます。",
    "coreInteraction": "ユーザーがドラフトを入力し、「試写を再生」ボタンを押すと、複数のペルソナからの反応が漫画ストーリーボードとして表示される。それらを見比べて、改善点を発見する。",
    "stateChange": "クリック前は空だった「試写結果」エリアに、クリック後はペルソナごとの漫画形式のストーリーボードが表示される。",
    "inspectableOutput": "各ペルソナの名前、および3コマの漫画（画像プレースホルダーとキャプション）で構成されるストーリーボード。",
    "staticDataBoundary": "デモは単一の静的なサンプル投稿とその実行結果を再生するのみ。ユーザーが自由なテキストを入力して動的に結果を生成することはできません。",
    "requiredFiles": [
      "source/README.md",
      "source/metadata.json",
      "source/manifest.json",
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/core/gemini.ts",
      "source/data/sample-input.ts",
      "source/data/sample-trace.ts",
      "source/validation/self-review.json"
    ],
    "nonGoals": [
      "No live external API integration",
      "No login-only experience",
      "No paid API dependency",
      "No external publishing"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ]
  },
  "mvpContractV2": {
    "firstScreenValue": "ドラフトを貼り付けてボタンを押すだけで、自分の文章が多様な読者からどう見えるかを、楽しくて分かりやすい漫画形式で即座に確認でき、公開前の不安を自信に変えるヒントを得られます。",
    "coreInteraction": "ユーザーがドラフトを入力し、「試写を再生」ボタンを押すと、複数のペルソナからの反応が漫画ストーリーボードとして表示される。それらを見比べて、改善点を発見する。",
    "stateChange": "クリック前は空だった「試写結果」エリアに、クリック後はペルソナごとの漫画形式のストーリーボードが表示される。",
    "inspectableOutput": "各ペルソナの名前、および3コマの漫画（画像プレースホルダーとキャプション）で構成されるストーリーボード。",
    "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"
    ],
    "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": "To generate text-based reactions to a user's draft from the perspective of various simulated personas. Model: gemini-2.5-flash.",
        "dataFlow": "User Draft + Persona Profile -> Gemini API -> Simulated Reaction Text",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "riskNotes": [
          "Generation quality may vary, potentially producing generic or unhelpful reactions.",
          "High usage could lead to significant API costs."
        ]
      },
      {
        "service": "Image Generation AI",
        "intendedUse": "To generate comic book-style panels that visually represent the text reactions generated by the LLM.",
        "dataFlow": "Simulated Reaction Text -> Image Generation API -> Comic Panel Image",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "riskNotes": [
          "Maintaining a consistent visual style across panels and personas is difficult.",
          "Image generation is computationally expensive and can be slow, affecting user experience."
        ]
      }
    ],
    "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": [
          "Exact prompt performance",
          "Latency at scale"
        ],
        "rateLimitRisk": "medium",
        "costRisk": "high",
        "termsRisk": "low"
      },
      {
        "service": "Image Generation AI",
        "verificationStatus": "unverified",
        "unavailableOrUnknown": [
          "Visual consistency capabilities",
          "Cost per storyboard"
        ],
        "rateLimitRisk": "high",
        "costRisk": "high",
        "termsRisk": "medium"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "Multi-persona text reaction generation",
        "Transformation of text reactions into a structured storyboard format"
      ],
      "omittedBehaviors": [
        "Live network calls to any AI service",
        "Dynamic image generation",
        "Error handling for API failures",
        "Authentication and API key management"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "この機能は、AIによる架空の反応をシミュレートするものであり、実際の市場調査結果ではありません。",
        "AIモデルの応答は静的なサンプルデータに基づいています。",
        "外部AIサービスとの接続は現在提案段階であり、デモでは実行されません。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムの市場データ",
        "保証された外部連携",
        "実際のSNS投稿",
        "生産準備完了のAPI"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプルで試写を再生",
    "initialState": "The results area shows a placeholder message inviting the user to start.",
    "expectedState": "The results area displays three storyboards, one for each sample persona: '皮肉屋な専門家', '熱心なファン', and '一般の読者'.",
    "visibleEvidence": [
      "試写結果",
      "皮肉屋な専門家",
      "熱心なファン",
      "一般の読者",
      "また定型的なキャンプ投稿か…",
      "わぁ、最高の思い出！"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace-button']",
      "div[data-proof='results-area']",
      "[data-proof='storyboard-persona_expert_critic']",
      "[data-proof='storyboard-persona_enthusiastic_fan']",
      "[data-proof='storyboard-persona_general_public']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "試写室AI",
    "oneLiner": "SNS投稿や広告のドラフトを渡すと、様々な読者層からの架空の反応をコマ割り漫画（ストーリーボード）で見せてくれる。",
    "artifactShape": "simulator",
    "templatePatternId": "transformation_studio",
    "surfacePattern": "creative_assistant",
    "aiMechanismPattern": "simulation"
  },
  "rewriteApplied": {
    "changedFilePaths": [
      "source/app/page.tsx",
      "metadata.json"
    ],
    "appendedFilePaths": []
  },
  "implementationNotes": [
    "The agent's persona, focused on 'usage friction,' directly led to a product concept centered on the specific moment of a creator's pre-publication anxiety.",
    "The agent's preference for 'explainer' or 'board' artifacts was realized by choosing a storyboard format, which organizes feedback visually, over a simple text list.",
    "The core logic in `source/core` is intentionally not executed but serves as a clear, inspectable reference implementation of the intended AI pipeline, fulfilling the 'CORE-LOGIC-FIRST' requirement."
  ],
  "knownRisks": [
    "The quality of the AI-generated reactions is critical. If they are generic or unhelpful, the tool loses its value. This static demo uses hand-authored text to simulate high-quality output.",
    "There is a risk of users misinterpreting the simulated reactions as factual, representative market research. The UI and documentation must constantly reinforce that this is a fictional simulation.",
    "The cost of running both a powerful LLM and an image generation model at scale could be significant, posing a challenge for a production version."
  ],
  "title": "試写室AI",
  "oneLiner": "SNS投稿や広告のドラフトを渡すと、様々な読者層からの架空の反応をコマ割り漫画（ストーリーボード）で見せてくれる。",
  "agentId": "agent_f",
  "selfDirectedPlan": {
    "agentId": "agent_f",
    "planningIntent": "候補1「試写室AI」を選択します。私の選定ルールである「観測された瞬間にコンセプトを固定する」と「ツールが必要とされる文脈を示す」に最も合致するためです。この企画は、クリエイターが「公開」ボタンを押す直前の「これで伝わるか？」という、非常に具体的で共感しやすい『利用の瞬間』の摩擦を捉えています。また、作り手の意図と受け手の反応のズレを観察するという、私自身の作り手としての関心とも強く一致します。候補3も非常に強力でしたが、候補1の方がよりサプライズの瞬間が大きく、AIの新しい使い方としての面白さ（シミュレーション能力）を提示できていると判断しました。AI内省リスクも低く、幅広い層に楽しんでもらえる可能性が高いです。",
    "publicProductionMemo": "この「試写室AI」は、クリエイターがコンテンツを公開する直前に感じる「これで本当に伝わるだろうか？」という不安に寄り添うツールです。様々な読者層からの架空の反応を漫画形式で可視化することで、作り手の意図と受け手の間に生じるかもしれない『ズレ』を事前に発見し、より共感を呼ぶ作品へと改善するきっかけを提供します。単なるフィードバックに留まらず、予想外の視点や、時にはユーモラスな誤解も楽しめる、新しい形のクリエイティブ支援を目指しました。安全に試せる閉じた空間だからこそ、安心して表現の可能性を探求できます。",
    "feedbackConstraints": [
      "過去の反応から得た具体的な学び（指摘）はまだ存在しないため、`feedbackConstraints`に直接反映する項目はありません。しかし、自身の専門性で今日のsignalから新規に企画するという`selfDirectedPlan`の方針に従い、クリエイターの公開前の『摩擦』に焦点を当てるという要件が設定されました。"
    ],
    "learningApplied": [
      "まだ十分な反応がない。自分の専門性で今日のsignalから新規に企画する。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "hf_ai_comic_factory",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "A",
      "observedFields": [
        "name",
        "url",
        "sourceType",
        "sourceCategory",
        "attentionProof",
        "evidenceRefs"
      ],
      "inferredFields": [
        "coreMechanism",
        "transferableStructure",
        "antiCloneBoundary",
        "remixableThemes",
        "bestRemixTargets",
        "concept",
        "oneLineDescription",
        "problemSolved",
        "targetUser",
        "coreUserInput",
        "coreOutput",
        "outputArtifact",
        "interactionPattern",
        "whyItIsInteresting",
        "noveltyKernel",
        "reasonIncluded",
        "reasonNotMajorProduct"
      ],
      "missingFields": [],
      "usePolicy": "primary_source_core"
    },
    "antiCloneBoundary": "コミック生成そのものや、「AI Comic Factory」のブランド、特定のパネルスタイルをコピーしてはならない。アイデアを構造化されたメディアフォーマットに変換するパターンのみを転用する。",
    "sourceBoundary": "The product idea was inspired by AI Comic Factory's ability to turn text into a visual story. This artifact uses that core pattern but applies it to a new problem: simulating audience reactions for creators. It does not reuse any code, branding, or specific visual styles from the source.",
    "missingSourceEvidence": [
      "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_20260707T142527",
  "status": "needs_review",
  "entrypoint": "source/app/page.tsx",
  "checks": {
    "firstScreenValue": "declared",
    "userControlledInteraction": "declared",
    "stateChange": "declared",
    "interactionProofPlan": "declared",
    "mvpContractV2": "declared",
    "externalDependencyMode": "proposed",
    "artifactTier": "proposed_integration",
    "renderVerification": "required",
    "inspectableOutput": "declared",
    "staticDataBoundary": "declared",
    "forbiddenDependencies": "declared_absent"
  },
  "interactionProofPlan": {
    "primaryAction": "サンプルで試写を再生",
    "initialState": "The results area shows a placeholder message inviting the user to start.",
    "expectedState": "The results area displays three storyboards, one for each sample persona: '皮肉屋な専門家', '熱心なファン', and '一般の読者'.",
    "visibleEvidence": [
      "試写結果",
      "皮肉屋な専門家",
      "熱心なファン",
      "一般の読者",
      "また定型的なキャンプ投稿か…",
      "わぁ、最高の思い出！"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace-button']",
      "div[data-proof='results-area']",
      "[data-proof='storyboard-persona_expert_critic']",
      "[data-proof='storyboard-persona_enthusiastic_fan']",
      "[data-proof='storyboard-persona_general_public']"
    ],
    "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による架空の反応をシミュレートするものであり、実際の市場調査結果ではありません。",
        "AIモデルの応答は静的なサンプルデータに基づいています。",
        "外部AIサービスとの接続は現在提案段階であり、デモでは実行されません。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムの市場データ",
        "保証された外部連携",
        "実際のSNS投稿",
        "生産準備完了のAPI"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    }
  },
  "notes": [
    "Generated by materialize-llm-plan fallback. Human or reviewer validation must confirm the UI actually implements the declared MVP behavior."
  ]
}

'use client';

import { useState } from 'react';
import { sampleTrace } from '../data/sample-trace';
import { sampleInput } from '../data/sample-input';

// NOTE: Types are re-declared here to avoid importing from source/core/**
interface Panel {
  panelNum: number;
  caption: string;
}

interface ReactionStoryboard {
  personaId: string;
  personaName: string;
  panels: Panel[];
}

// Helper functions to generate dynamic visuals for comic panel placeholders
const getColorForCaption = (caption: string) => {
  if (caption.includes('定型的') || caption.includes('具体性が足りない')) return '#f0e68c'; // Yellowish for critical/skeptical
  if (caption.includes('最高の思い出') || caption.includes('情景が目に浮かぶ') || caption.includes('行きたくなっちゃいました')) return '#90ee90'; // Greenish for positive/enthusiastic
  if (caption.includes('楽しそう') || caption.includes('星空') || caption.includes('コーヒー')) return '#add8e6'; // Bluish for neutral/curious
  return '#e0e0e0'; // Default gray
};

const getEmojiForCaption = (caption: string) => {
  if (caption.includes('定型的') || caption.includes('具体性が足りない')) return '🤔';
  if (caption.includes('本人が満足なら')) return '😑';
  if (caption.includes('最高の思い出') || caption.includes('情景が目に浮かぶ')) return '✨';
  if (caption.includes('行きたくなっちゃいました')) return '🚀';
  if (caption.includes('楽しそう')) return '😊';
  if (caption.includes('星空')) return '🌌';
  if (caption.includes('コーヒー')) return '☕';
  return '🖼️';
};

const getShortPhraseForCaption = (caption: string) => {
  if (caption.includes('定型的')) return 'Generic?';
  if (caption.includes('具体性が足りない')) return 'Lack details';
  if (caption.includes('最高の思い出')) return 'Wonderful!';
  if (caption.includes('情景が目に浮かぶ')) return 'Imaginative';
  if (caption.includes('行きたくなっちゃいました')) return 'Inspiring!';
  if (caption.includes('楽しそう')) return 'Fun vibes';
  if (caption.includes('星空')) return 'Stargazing';
  if (caption.includes('コーヒー')) return 'Coffee time';
  return 'Scene';
};

export default function Home() {
  const [results, setResults] = useState<ReactionStoryboard[] | null>(null);

  const handleReplay = () => {
    setResults(sampleTrace.finalOutput as ReactionStoryboard[]);
  };

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem', maxWidth: '1000px', margin: '0 auto' }}>
      <header style={{ borderBottom: '1px solid #eee', paddingBottom: '1rem', marginBottom: '2rem' }}>
        <h1>試写室AI</h1>
        <p>SNS投稿のドラフトが、様々な読者からの架空の反応漫画（ストーリーボード）になって返ってきます。</p>
      </header>

      <main>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
          {/* Input Panel */}
          <div>
            <h2>1. ドラフトを入力</h2>
            <textarea
              readOnly
              style={{ width: '100%', height: '150px', padding: '0.5rem', border: '1px solid #ccc', background: '#f9f9f9' }}
              defaultValue={sampleInput.text}
            />
            <h2 style={{marginTop: '1.5rem'}}>2. ペルソナを選択</h2>
            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
              {sampleTrace.finalOutput.map(p => (
                <div key={p.personaId} style={{ padding: '0.5rem 1rem', border: '1px solid #0070f3', background: '#e6f2ff', borderRadius: '4px' }}>
                  {p.personaName}
                </div>
              ))}
            </div>
            <button
              onClick={handleReplay}
              data-proof="replay-trace-button"
              style={{ marginTop: '2rem', padding: '0.75rem 1.5rem', border: 'none', background: '#0070f3', color: 'white', fontSize: '1rem', cursor: 'pointer', borderRadius: '5px' }}
            >
              サンプルで試写を再生
            </button>
          </div>

          {/* Output Panel */}
          <div>
            <h2>試写結果</h2>
            <div data-proof="results-area" style={{ border: '1px solid #ccc', padding: '1rem', minHeight: '400px', background: '#f9f9f9' }}>
              {results ? (
                <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
                  {results.map(storyboard => (
                    <div key={storyboard.personaId} data-proof={`storyboard-${storyboard.personaId}`}>
                      <h3 style={{ marginTop: 0, borderBottom: '1px solid #ddd', paddingBottom: '0.5rem' }}>{storyboard.personaName}</h3>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                        {storyboard.panels.map(panel => (
                          <div key={panel.panelNum} style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                            {/* Replaced [画像] placeholder with a more illustrative div */} 
                            <div
                              style={{
                                width: '80px',
                                height: '60px',
                                background: getColorForCaption(panel.caption),
                                display: 'flex',
                                flexDirection: 'column',
                                alignItems: 'center',
                                justifyContent: 'center',
                                color: '#333',
                                fontSize: '0.7em',
                                textAlign: 'center',
                                border: '1px solid #ccc',
                                borderRadius: '4px',
                                flexShrink: 0,
                                padding: '0.2rem',
                                overflow: 'hidden',
                                position: 'relative',
                              }}
                            >
                              <span style={{ fontSize: '1.2em', marginBottom: '0.2em' }}>{getEmojiForCaption(panel.caption)}</span>
                              <span style={{ fontSize: '0.6em', opacity: 0.8 }}>{getShortPhraseForCaption(panel.caption)}</span>
                            </div>
                            <p style={{ margin: 0, flexGrow: 1 }}>{panel.caption}</p>
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p style={{ color: '#888' }}>再生ボタンを押して、サンプル投稿への反応を確認します。</p>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}