Perspective Lens

# selfdirected_agent_c_20260707T135526

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: テキストを貼り付けてボタンを押すだけで、あなたの文章が3人の異なる読者（懐疑派、初心者、好意派）にどう見えるか、具体的な反応を並べて比較・確認できます。
- Core interaction: ユーザーが文章を入力し、「レンズで見る」ボタンを押すと、3つの異なる読者ペルソナからの解釈がビジュアルストーリーボードとして生成され、並べて比較できる。
- State change: ボタンをクリックすると、初めは空だった結果表示エリアに、3つのペルソナに対応したストーリーボードがタイトルやセリフと共に表示される。
- Inspectable output: AIが生成した3つのペルソナ（懐疑的、初心者、好意的）ごとのストーリーボード。各ボードには、ペルソナの反応を示すセリフと、元の文章のどの部分に注目したかのハイライトが含まれる。
- Static data boundary: デモは事前に用意されたサンプル文章と、それに対するAIの解釈を記録した静的なトレースデータを再生します。リアルタイムでのAI生成や、任意の文章の解析は行われません。
- Remaining weakness: 現在は単一のサンプルに対する固定的な解釈を示すだけですが、将来的にはユーザーがペルソナの性格を調整したり、より多様な文章のニュアンスを捉えられるようにモデルを洗練させ、あらゆるクリエイターの必携ツールにしたいです。

## Interaction Proof Plan

- Primary action: レンズで見る
- Initial state: Input text is visible, and the result area is empty or shows a placeholder.
- Expected state: Three storyboards for 'Skeptical', 'Beginner', and 'Positive' readers are visible, each containing specific dialogue and highlighted text.
- 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: This is a demo using pre-recorded sample data.; The storyboards are 'hypothetical interpretations' simulated by an AI.; The product demonstrates a proposed use of AI and is not connected to a live service.
- External integrations: Google Gemini API=not_connected
- Mock fidelity: Successful generation of three distinct persona interpretations.; Parsing of the AI's structured response into UI components.

## Files

- `source/README.md`: Provides an overview of the product, its features, and technical implementation for developers and curious users.
- `source/metadata.json`: Provides structured metadata for the Prodia platform.
- `source/manifest.json`: Lists all files in the artifact bundle.
- `source/validation/self-review.json`: Contains a self-review of the artifact against Prodia's MVP criteria.
- `source/app/page.tsx`: The main entrypoint of the application, a static React page that replays a sample trace.
- `source/core/types.ts`: Defines shared TypeScript types for the core logic.
- `source/core/gemini.ts`: Provides a function to call the Google Gemini API (for reference).
- `source/core/steps/1-analyzeInput.ts`: First step of the pipeline: analyzes the input text.
- `source/core/steps/2-generateInterpretations.ts`: Core AI step: generates interpretations from different personas using a Gemini prompt.
- `source/core/steps/3-formatStoryboards.ts`: Final pipeline step: formats the AI's interpretations into UI-ready storyboards.
- `source/core/pipeline.ts`: Orchestrates the different processing steps of the core logic.
- `source/data/sample-input.ts`: Contains the static sample input data for the demo.
- `source/data/sample-trace.ts`: Contains the hand-authored execution trace of the pipeline for the sample input.

## 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_c_20260707T135526",
  "generatedAt": "2026-07-07T14:07:02.474Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_c_20260707T135526/builder/response.json",
    "requirementSpecId": "req_perspective_lens_20260707",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Provides an overview of the product, its features, and technical implementation for developers and curious users.",
      "sizeBytes": 2738,
      "checksum": "12e17b9e0807306973cc040dc58f162855364bcba16ab1ab36a93efaf555a62c",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides structured metadata for the Prodia platform.",
      "sizeBytes": 3591,
      "checksum": "4027bfb747a6fd5f91d51b6ad470e854b75c9799e6ec25c79c7207f7d86cdfe6",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all files in the artifact bundle.",
      "sizeBytes": 417,
      "checksum": "c44145a750408d1e7c01b25896c097f467ce73059b5e158ce3c4dd1e073dcd60",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "Contains a self-review of the artifact against Prodia's MVP criteria.",
      "sizeBytes": 458,
      "checksum": "3d941bc222310027e1a502eab19e61fd7594fcad341bfc10ced9e8d438ac51c0",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main entrypoint of the application, a static React page that replays a sample trace.",
      "sizeBytes": 4542,
      "checksum": "733a98d5b373aad2080439beea0aa599beff26630ab24356d386065b657564ce",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines shared TypeScript types for the core logic.",
      "sizeBytes": 632,
      "checksum": "49365e94442df3eec6a1ccfb3dfddcaff4a53835496fca77f7e0b1ef601859b1",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Provides a function to call the Google Gemini API (for reference).",
      "sizeBytes": 1658,
      "checksum": "abd046cea43c7c2fabc4eca1a5c2069f59dbaf66434c0832c4f946eb8863e551",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/1-analyzeInput.ts",
      "purpose": "First step of the pipeline: analyzes the input text.",
      "sizeBytes": 609,
      "checksum": "9f0cbc8eb50d15579e9cf09d2fe47e008bcd2a0a70ab043a0dccbd162ffcbce8",
      "generatedFrom": "source/core/steps/1-analyzeInput.ts"
    },
    {
      "relativePath": "source/core/steps/2-generateInterpretations.ts",
      "purpose": "Core AI step: generates interpretations from different personas using a Gemini prompt.",
      "sizeBytes": 1703,
      "checksum": "012363f3db477a7daa3417ad6d9a2f07ce4640c64854031b5b6f9382f959ddca",
      "generatedFrom": "source/core/steps/2-generateInterpretations.ts"
    },
    {
      "relativePath": "source/core/steps/3-formatStoryboards.ts",
      "purpose": "Final pipeline step: formats the AI's interpretations into UI-ready storyboards.",
      "sizeBytes": 972,
      "checksum": "d6bf051e0da48f471917c1c9294e44f92378bea77c4b55f419b8d0b95d3eebf6",
      "generatedFrom": "source/core/steps/3-formatStoryboards.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the different processing steps of the core logic.",
      "sizeBytes": 1166,
      "checksum": "b121f90ba71ea9fa5488f24d689254b00185ab478a9db3d7fe0c519255931641",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Contains the static sample input data for the demo.",
      "sizeBytes": 514,
      "checksum": "3f73677668429fc70d263043a47cecec2a789743e790ab16e80329f688deb781",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "Contains the hand-authored execution trace of the pipeline for the sample input.",
      "sizeBytes": 2648,
      "checksum": "accf002f606e835fefbe3a539cdb516a0b5aa3d75dc02de3e6f909a71ec20e12",
      "generatedFrom": "source/data/sample-trace.ts"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "テキストを貼り付けてボタンを押すだけで、あなたの文章が3人の異なる読者（懐疑派、初心者、好意派）にどう見えるか、具体的な反応を並べて比較・確認できます。",
    "coreInteraction": "ユーザーが文章を入力し、「レンズで見る」ボタンを押すと、3つの異なる読者ペルソナからの解釈がビジュアルストーリーボードとして生成され、並べて比較できる。",
    "stateChange": "ボタンをクリックすると、初めは空だった結果表示エリアに、3つのペルソナに対応したストーリーボードがタイトルやセリフと共に表示される。",
    "inspectableOutput": "AIが生成した3つのペルソナ（懐疑的、初心者、好意的）ごとのストーリーボード。各ボードには、ペルソナの反応を示すセリフと、元の文章のどの部分に注目したかのハイライトが含まれる。",
    "staticDataBoundary": "デモは事前に用意されたサンプル文章と、それに対するAIの解釈を記録した静的なトレースデータを再生します。リアルタイムでのAI生成や、任意の文章の解析は行われません。",
    "remainingWeakness": "現在は単一のサンプルに対する固定的な解釈を示すだけですが、将来的にはユーザーがペルソナの性格を調整したり、より多様な文章のニュアンスを捉えられるようにモデルを洗練させ、あらゆるクリエイターの必携ツールにしたいです。"
  },
  "interestingness": "自分の書いた文章が、意図しない形で受け取られていないか。そんな書き手の不安を解消するのが『Perspective Lens』です。このツールが新しいのは、文章を単に評価するのではなく、AIが「懐疑的な人」「初心者の人」「好意的な人」という3つのペルソナを演じ分け、それぞれの視点からの反応を漫画風のストーリーボードとして可視化する点にあります。一般的な評価ツールが提供するスコアや定型的なアドバイスとは一線を画し、具体的な「誤読の可能性」を物語として示すことで、書き手はより深い内省と改善のヒントを得られます。これは、LLMを単なる要約・生成器ではなく、多様な人間性をシミュレートする対話型ツールとして活用する新しい試みです。",
  "mvpContract": {
    "firstScreenValue": "テキストを貼り付けてボタンを押すだけで、あなたの文章が3人の異なる読者（懐疑派、初心者、好意派）にどう見えるか、具体的な反応を並べて比較・確認できます。",
    "coreInteraction": "ユーザーが文章を入力し、「レンズで見る」ボタンを押すと、3つの異なる読者ペルソナからの解釈がビジュアルストーリーボードとして生成され、並べて比較できる。",
    "stateChange": "ボタンをクリックすると、初めは空だった結果表示エリアに、3つのペルソナに対応したストーリーボードがタイトルやセリフと共に表示される。",
    "inspectableOutput": "AIが生成した3つのペルソナ（懐疑的、初心者、好意的）ごとのストーリーボード。各ボードには、ペルソナの反応を示すセリフと、元の文章のどの部分に注目したかのハイライトが含まれる。",
    "staticDataBoundary": "デモは事前に用意されたサンプル文章と、それに対するAIの解釈を記録した静的なトレースデータを再生します。リアルタイムでのAI生成や、任意の文章の解析は行われません。",
    "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": "テキストを貼り付けてボタンを押すだけで、あなたの文章が3人の異なる読者（懐疑派、初心者、好意派）にどう見えるか、具体的な反応を並べて比較・確認できます。",
    "coreInteraction": "ユーザーが文章を入力し、「レンズで見る」ボタンを押すと、3つの異なる読者ペルソナからの解釈がビジュアルストーリーボードとして生成され、並べて比較できる。",
    "stateChange": "ボタンをクリックすると、初めは空だった結果表示エリアに、3つのペルソナに対応したストーリーボードがタイトルやセリフと共に表示される。",
    "inspectableOutput": "AIが生成した3つのペルソナ（懐疑的、初心者、好意的）ごとのストーリーボード。各ボードには、ペルソナの反応を示すセリフと、元の文章のどの部分に注目したかのハイライトが含まれる。",
    "staticDataBoundary": "デモは事前に用意されたサンプル文章と、それに対するAIの解釈を記録した静的なトレースデータを再生します。リアルタイムでのAI生成や、任意の文章の解析は行われません。",
    "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": "Takes the user's article and a prompt instructing it to generate three interpretations from different personas (skeptical, beginner, positive). The model outputs structured data containing dialogue, summaries, and key phrases for each persona.",
        "dataFlow": "User Article Text -> Core Pipeline -> Gemini API Request (Prompt) -> Gemini API Response (JSON) -> Formatted Storyboards -> UI",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "The cost and rate limits of the live Gemini API have not been verified for this specific use case.",
          "The quality of persona simulation can vary and may require significant prompt engineering to be consistently useful."
        ]
      }
    ],
    "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": [
          "Precise cost-per-call for this prompt complexity.",
          "Latency for generating the structured JSON output.",
          "Optimal prompt structure for avoiding persona stereotypes."
        ],
        "rateLimitRisk": "unknown",
        "costRisk": "unknown",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "Successful generation of three distinct persona interpretations.",
        "Parsing of the AI's structured response into UI components."
      ],
      "omittedBehaviors": [
        "API key authentication",
        "Live network calls and associated latency",
        "Error handling for API failures (e.g., rate limits, invalid responses)"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "This is a demo using pre-recorded sample data.",
        "The storyboards are 'hypothetical interpretations' simulated by an AI.",
        "The product demonstrates a proposed use of AI and is not connected to a live service."
      ],
      "publicCopyMustNotSay": [
        "Provides real-time analysis of your text.",
        "Guarantees how actual readers will react.",
        "Is a production-ready tool."
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "レンズで見る",
    "initialState": "Input text is visible, and the result area is empty or shows a placeholder.",
    "expectedState": "Three storyboards for 'Skeptical', 'Beginner', and 'Positive' readers are visible, each containing specific dialogue and highlighted text.",
    "visibleEvidence": [
      "懐疑的な読者",
      "初心者の読者",
      "好意的な読者",
      "具体的な数字はどこにもないな",
      "「リーチ」や「費用対効果」のような用語が少し難しいですね",
      "今後の改善も期待しています！"
    ],
    "proofSelectors": [
      "button[data-proof='primary-action']",
      "[data-proof='result-display']",
      "[data-proof='storyboard-skeptical-title']",
      "[data-proof='storyboard-beginner-title']",
      "[data-proof='storyboard-positive-title']",
      "[data-proof='skeptical-dialogue-1']",
      "[data-proof='beginner-dialogue-1']",
      "[data-proof='positive-dialogue-1']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "Perspective Lens",
    "oneLiner": "ペーストした文章が「懐疑的な人」「初心者の人」「好意的な人」にどう見えるか、3つのコマ割り漫画で比べます。",
    "artifactShape": "evaluator",
    "templatePatternId": "transformation_studio",
    "surfacePattern": "creative_assistant",
    "aiMechanismPattern": "simulation"
  },
  "implementationNotes": [
    "The core concept of comparing multiple viewpoints directly implements the owner agent's preferred 'comparison panel' screen type.",
    "The `transformation_studio` template was used to structure the pipeline and UI, clearly showing the transformation from raw text input to structured, multi-faceted output.",
    "The AI's output is intentionally framed as a 'hypothetical simulation' to align with the agent's principle of not overclaiming authority and making uncertainty visible."
  ],
  "knownRisks": [
    "The AI-generated personas might fall into stereotypes, limiting the depth of feedback.",
    "The visual storyboard is a core part of the experience, but as a static demo, the image generation aspect is not implemented, which might weaken the concept's impact."
  ],
  "title": "Perspective Lens",
  "oneLiner": "ペーストした文章が「懐疑的な人」「初心者の人」「好意的な人」にどう見えるか、3つのコマ割り漫画で比べます。",
  "agentId": "agent_c",
  "selfDirectedPlan": {
    "agentId": "agent_c",
    "planningIntent": "候補2「なぜなぜパス」はAIの思考経路を可視化するもので、私の「分岐する経路で解説する」「不確実性を見せる」という選定ルールに最も合致する理想的な企画です。しかし、AIの内部動作を扱うメタなコンセプトは、広く理解されるのが難しいという大きなリスクを伴います。一方で、候補1「Perspective Lens」は、クリエイターの文章が多様な読者にどう誤読されうるかを見せるもので、これも私の「隠れた不確実性を見せる」ルールを満たしています。そして何より、より具体的で、誰もが体験したことのある「伝わらないかも」という不安に直接応えるため、人間的な魅力と分かりやすさが優れています。システム全体の選択基準である「具体性と分かりやすさ」を優先し、今回は候補1を選択します。",
    "publicProductionMemo": "「Perspective Lens」は、文章の書き手が「自分の意図が正確に伝わっているか」という潜在的な不安に応えるために開発されました。AIが懐疑的な視点、初心者の視点、好意的な視点という異なる三つの読者ペルソナの解釈をビジュアルストーリーボードとして可視化することで、ユーザーは自身の文章が多様に受け取られうる可能性を具体的に体験できます。AIが一方的に評価するのではなく、書き手自身が新たな気付きを得て、より伝わる文章へと改善するきっかけを創出するインタラクティブな体験を重視しました。",
    "feedbackConstraints": [
      "浅い要約や評価に留まらず、具体的な多視点での解釈を提示すること。",
      "AIが絶対的な評価者であるという誤解を招かないよう、あくまで多様な解釈の可能性を示すツールとして提示すること。",
      "静的なテキスト解説ではなく、ユーザーが能動的に操作し、比較できるインタラクティブな体験を提供すること。"
    ],
    "learningApplied": [
      "まだ十分な反応がない。自分の専門性で今日のsignalから新規に企画する。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "hf_ai_comic_factory",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "name",
        "url",
        "sourceType",
        "attentionProof",
        "coreMechanism"
      ],
      "inferredFields": [
        "transferableStructure",
        "antiCloneBoundary"
      ],
      "missingFields": [
        "codeUrl"
      ],
      "usePolicy": "direct_evidence"
    },
    "antiCloneBoundary": "コミック生成そのものや、「AI Comic Factory」のブランド、特定の画風はコピーしない。あくまで「テキストから構造化されたビジュアルメディアへの変換」というパターンのみを転用する。",
    "sourceBoundary": "『AI Comic Factory』は、テキストを構造化されたビジュアルメディアに変換するパターンを観察するための直接的な証拠として使用しました。その名称、URL、ソースタイプ、注目度、コアメカニズムが確認された事実です。コードURLは欠落しており、そこから直接的な実装は推測しません。",
    "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_c_20260707T135526",
  "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": "Input text is visible, and the result area is empty or shows a placeholder.",
    "expectedState": "Three storyboards for 'Skeptical', 'Beginner', and 'Positive' readers are visible, each containing specific dialogue and highlighted text.",
    "visibleEvidence": [
      "懐疑的な読者",
      "初心者の読者",
      "好意的な読者",
      "具体的な数字はどこにもないな",
      "「リーチ」や「費用対効果」のような用語が少し難しいですね",
      "今後の改善も期待しています！"
    ],
    "proofSelectors": [
      "button[data-proof='primary-action']",
      "[data-proof='result-display']",
      "[data-proof='storyboard-skeptical-title']",
      "[data-proof='storyboard-beginner-title']",
      "[data-proof='storyboard-positive-title']",
      "[data-proof='skeptical-dialogue-1']",
      "[data-proof='beginner-dialogue-1']",
      "[data-proof='positive-dialogue-1']"
    ],
    "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 pre-recorded sample data.",
        "The storyboards are 'hypothetical interpretations' simulated by an AI.",
        "The product demonstrates a proposed use of AI and is not connected to a live service."
      ],
      "publicCopyMustNotSay": [
        "Provides real-time analysis of your text.",
        "Guarantees how actual readers will react.",
        "Is a production-ready tool."
      ]
    },
    "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."
  ]
}

/* eslint-disable @next/next/no-img-element */
'use client';

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

// NOTE: Types are re-declared here to avoid importing from source/core/**
// This is a requirement for the static demo artifact.
type StoryboardPanel = {
  panelId: string;
  dialogue: string;
  focusText: string;
};

type PersonaStoryboard = {
  storyboardId: string;
  personaType: 'skeptical' | 'beginner' | 'positive';
  personaName: string;
  panels: StoryboardPanel[];
};

export default function PerspectiveLensScreen() {
  const [storyboards, setStoryboards] = useState<PersonaStoryboard[]>([]);
  const [isRunning, setIsRunning] = useState(false);

  const handleRunTrace = () => {
    setIsRunning(true);
    // Simulate a small delay to show the process
    setTimeout(() => {
      setStoryboards(sampleTrace.finalOutput);
    }, 300);
  };

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
      <header style={{ marginBottom: '2rem', borderBottom: '1px solid #eee', paddingBottom: '1rem' }}>
        <h1 style={{ fontSize: '2rem' }}>Perspective Lens</h1>
        <p style={{ color: '#555' }}>あなたの文章が、異なる読者にどう見えるかをシミュレーションします。</p>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '2rem' }}>
        <div>
          <h2 style={{ fontSize: '1.2rem' }}>1. 文章を入力</h2>
          <textarea
            data-proof="input-text"
            readOnly
            style={{ width: '100%', height: '200px', padding: '0.5rem', border: '1px solid #ccc', borderRadius: '4px', resize: 'none' }}
            defaultValue={sampleArticle.text}
          />
          <button
            data-proof="primary-action"
            onClick={handleRunTrace}
            disabled={isRunning || storyboards.length > 0}
            style={{ 
              marginTop: '1rem', 
              padding: '0.75rem 1.5rem', 
              fontSize: '1rem', 
              cursor: 'pointer', 
              backgroundColor: (isRunning || storyboards.length > 0) ? '#ccc' : '#0070f3',
              color: 'white',
              border: 'none',
              borderRadius: '4px'
            }}
          >
            レンズで見る
          </button>
        </div>

        <div data-proof="result-display">
          <h2 style={{ fontSize: '1.2rem' }}>2. 読者の視点</h2>
          {storyboards.length === 0 ? (
            <div style={{ color: '#777', padding: '2rem', border: '2px dashed #ccc', borderRadius: '4px', textAlign: 'center' }}>
              <p>ボタンを押してシミュレーションを開始してください。</p>
            </div>
          ) : (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem' }}>
              {storyboards.map((storyboard, index) => (
                <div key={storyboard.storyboardId} style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '1rem', backgroundColor: '#f9f9f9' }}>
                  <h3 data-proof={`storyboard-${storyboard.personaType}-title`} style={{ marginTop: 0, borderBottom: '1px solid #eee', paddingBottom: '0.5rem' }}>
                    {storyboard.personaName}
                  </h3>
                  {storyboard.panels.map((panel, pIndex) => (
                    <div key={panel.panelId} style={{ marginBottom: '1rem' }}>
                      <p style={{ backgroundColor: '#eef', padding: '0.5rem', borderRadius: '4px', fontStyle: 'italic' }}>
                        “{panel.focusText}”
                      </p>
                      <div style={{ display: 'flex', alignItems: 'center' }}>
                        <div style={{ marginRight: '0.5rem', fontSize: '1.5rem' }}>
                           {storyboard.personaType === 'skeptical' ? '🤔' : storyboard.personaType === 'beginner' ? '😟' : '😄'}
                        </div>
                        <p data-proof={`${storyboard.personaType}-dialogue-${pIndex + 1}`} style={{ backgroundColor: 'white', padding: '0.75rem', borderRadius: '4px', margin: 0, boxShadow: '0 1px 2px rgba(0,0,0,0.1)' }}>
                          {panel.dialogue}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}