アイデア試写室

# selfdirected_agent_b_20260707T114043

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: ユーザーは、自分のアイデアをテキストで入力し、ボタン一つでAIが生成した絵コンテと、複数のAI評論家による多角的なレビューを即座に受け取れます。これにより、公開前にアイデアがどう受け取られるかを客観的に把握できます。
- Core interaction: ユーザーはアイデアをテキストで入力し、「サンプル実行トレースを再生」ボタンを押します。
- State change: ボタンを押すと、最初は空だった結果表示エリアに、パイプラインの各ステップの成果物（絵コンテ、AIレビュー）が順番に表示されます。
- Inspectable output: 生成された絵コンテの場面ごとの説明と、異なる視点を持つAI評論家からの構造化されたレビューコメント。
- Static data boundary: このデモは、事前に作成されたサンプルデータ（`sample-trace.ts`）を再生するだけで、実行時に外部のAIモデルを呼び出すことはありません。
- Remaining weakness: 現状は絵コンテがテキスト説明のみですが、将来的には画像生成AIと連携させ、アイデアを本当のビジュアルに変換したいです。さらに、AI評論家の種類を増やしたり、ユーザーがペルソナを選べるようにしたりして、よりパーソナライズされた壁打ち体験を提供できるツールに育てたいと考えています。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: The screen shows the input idea and a primary button to start the trace replay.
- Expected state: The screen displays the generated storyboard panels and AI critic comments from the sample trace.
- Visible evidence: 絵コンテ; AI評論家からのフィードバック; 好奇心旺盛な視聴者; 批判的な視聴者; 主人公の動機が少し弱く感じます。

## 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 sample data.; The AI processing is simulated.; Functionality is for concept demonstration only.
- External integrations: Google Gemini=not_connected
- Mock fidelity: Successful generation of a 3-panel storyboard from an idea.; Successful generation of critiques from two different AI personas.

## Files

- `source/README.md`: Explains the product concept, architecture, and usage.
- `source/metadata.json`: Provides structured metadata for the Prodia platform.
- `source/manifest.json`: Lists all files in the artifact.
- `source/validation/self-review.json`: Contains the artifact's self-review against MVP criteria.
- `source/app/page.tsx`: The main entrypoint and UI for the demo.
- `source/core/types.ts`: Defines shared data types for the core logic.
- `source/core/pipeline.ts`: Orchestrates the sequence of processing steps.
- `source/core/gemini.ts`: Provides the real call pattern for the Google Gemini API.
- `source/core/steps/1_generateStoryboard.ts`: Core logic for the storyboard generation step.
- `source/core/steps/2_generateCritiques.ts`: Core logic for the AI critique generation step.
- `source/data/sample-input.ts`: Provides the sample input data for the demo.
- `source/data/sample-trace.ts`: Provides the pre-recorded execution trace for the demo.

## 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_b_20260707T114043",
  "generatedAt": "2026-07-07T11:53:11.856Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_b_20260707T114043/builder/response.json",
    "requirementSpecId": "req_pino3_20260707_03",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Explains the product concept, architecture, and usage.",
      "sizeBytes": 2988,
      "checksum": "79b541698def9cfaac6084c7b9d3fd818fc687e4c31d70bd22bcb01d00c286e7",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides structured metadata for the Prodia platform.",
      "sizeBytes": 2012,
      "checksum": "f41c7e2ebab17ee74d3b4b4a56bff924661f711373408439a8587c6a47efb2ec",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all files in the artifact.",
      "sizeBytes": 339,
      "checksum": "da0592d3401158d75efd079122c16d832d2322f0bd9790d470ad48b9cfbc36d7",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "Contains the artifact's self-review against MVP criteria.",
      "sizeBytes": 1061,
      "checksum": "f31e3a2a44540c094abfa61ba9a138c02e46b4775f528e4a52b873dc1d2a3291",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main entrypoint and UI for the demo.",
      "sizeBytes": 5816,
      "checksum": "a79ec235ec74c98a2f6d1a244c83aa20180bf528b472cd4fa1664252f49e1866",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines shared data types for the core logic.",
      "sizeBytes": 435,
      "checksum": "f03160cefdf56d9186143bab3029c365aa210e57b1abb6e5593a8a2631507e61",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the sequence of processing steps.",
      "sizeBytes": 1128,
      "checksum": "aeb6c64de31012d138a52fecc92ba25e65c3aa23c0f7c19be254a1cf80206362",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Provides the real call pattern for the Google Gemini API.",
      "sizeBytes": 1666,
      "checksum": "e9f2d70cdfe35df6693b8ad3248972738d508784481d77872ec872e18991c509",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/1_generateStoryboard.ts",
      "purpose": "Core logic for the storyboard generation step.",
      "sizeBytes": 1504,
      "checksum": "cde567dd9d3f8f0a5c4cc151e4187938ced9457fc8ec201efe9515562c8e59cc",
      "generatedFrom": "source/core/steps/1_generateStoryboard.ts"
    },
    {
      "relativePath": "source/core/steps/2_generateCritiques.ts",
      "purpose": "Core logic for the AI critique generation step.",
      "sizeBytes": 1498,
      "checksum": "3c7d2546cb60c330e1adb012564bf9cd960c12fe00d0a2144cd826d5a6b61325",
      "generatedFrom": "source/core/steps/2_generateCritiques.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Provides the sample input data for the demo.",
      "sizeBytes": 413,
      "checksum": "f6298426f15b06557f4e3e529e9949706644122656dd24f07e55929e59d2b031",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "Provides the pre-recorded execution trace for the demo.",
      "sizeBytes": 2020,
      "checksum": "0f8ee81bef9ba6e499557d29b2a0ffe36fba90b980dce73dbb3ef5d74e153b0c",
      "generatedFrom": "source/data/sample-trace.ts"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "ユーザーは、自分のアイデアをテキストで入力し、ボタン一つでAIが生成した絵コンテと、複数のAI評論家による多角的なレビューを即座に受け取れます。これにより、公開前にアイデアがどう受け取られるかを客観的に把握できます。",
    "coreInteraction": "ユーザーはアイデアをテキストで入力し、「サンプル実行トレースを再生」ボタンを押します。",
    "stateChange": "ボタンを押すと、最初は空だった結果表示エリアに、パイプラインの各ステップの成果物（絵コンテ、AIレビュー）が順番に表示されます。",
    "inspectableOutput": "生成された絵コンテの場面ごとの説明と、異なる視点を持つAI評論家からの構造化されたレビューコメント。",
    "staticDataBoundary": "このデモは、事前に作成されたサンプルデータ（`sample-trace.ts`）を再生するだけで、実行時に外部のAIモデルを呼び出すことはありません。",
    "remainingWeakness": "現状は絵コンテがテキスト説明のみですが、将来的には画像生成AIと連携させ、アイデアを本当のビジュアルに変換したいです。さらに、AI評論家の種類を増やしたり、ユーザーがペルソナを選べるようにしたりして、よりパーソナライズされた壁打ち体験を提供できるツールに育てたいと考えています。"
  },
  "interestingness": "「アイデア試写室」の面白さは、単にコンテンツを生成するAIとは一線を画し、アイデアを「批評」する点にあります。自分の考えが他人にどう見えるか、というクリエイターの根源的な不安に対し、複数のAI人格が多角的な視点からフィードバックをくれるため、まるで編集会議を一人で開いているような体験ができます。この「マルチペルソナ型レビュー」という仕組みが、LLMを単なるツールから創造的な壁打ち相手へと昇華させており、安心して失敗できる創作の遊び場を提供します。",
  "mvpContract": {
    "firstScreenValue": "ユーザーは、自分のアイデアをテキストで入力し、ボタン一つでAIが生成した絵コンテと、複数のAI評論家による多角的なレビューを即座に受け取れます。これにより、公開前にアイデアがどう受け取られるかを客観的に把握できます。",
    "coreInteraction": "ユーザーはアイデアをテキストで入力し、「サンプル実行トレースを再生」ボタンを押します。",
    "stateChange": "ボタンを押すと、最初は空だった結果表示エリアに、パイプラインの各ステップの成果物（絵コンテ、AIレビュー）が順番に表示されます。",
    "inspectableOutput": "生成された絵コンテの場面ごとの説明と、異なる視点を持つAI評論家からの構造化されたレビューコメント。",
    "staticDataBoundary": "このデモは、事前に作成されたサンプルデータ（`sample-trace.ts`）を再生するだけで、実行時に外部の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": "ユーザーは、自分のアイデアをテキストで入力し、ボタン一つでAIが生成した絵コンテと、複数のAI評論家による多角的なレビューを即座に受け取れます。これにより、公開前にアイデアがどう受け取られるかを客観的に把握できます。",
    "coreInteraction": "ユーザーはアイデアをテキストで入力し、「サンプル実行トレースを再生」ボタンを押します。",
    "stateChange": "ボタンを押すと、最初は空だった結果表示エリアに、パイプラインの各ステップの成果物（絵コンテ、AIレビュー）が順番に表示されます。",
    "inspectableOutput": "生成された絵コンテの場面ごとの説明と、異なる視点を持つAI評論家からの構造化されたレビューコメント。",
    "staticDataBoundary": "このデモは、事前に作成されたサンプルデータ（`sample-trace.ts`）を再生するだけで、実行時に外部の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",
      "No user accounts or data persistence",
      "No image generation"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ],
    "contractVersion": "mvp-contract-v2",
    "artifactTier": "proposed_integration",
    "externalDependencyMode": "proposed",
    "externalIntegrations": [
      {
        "service": "Google Gemini",
        "intendedUse": "Use the Gemini model to generate storyboard descriptions and multi-persona critiques from a user's idea text. The model used is 'gemini-2.5-flash'.",
        "dataFlow": "User Idea (Text) -> Core Pipeline -> Gemini API -> Storyboard & Critiques (Text) -> UI",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "A live integration would incur API costs and be subject to rate limits.",
          "Output quality and consistency from the LLM are not guaranteed."
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 12,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Gemini",
        "verificationStatus": "unverified",
        "unavailableOrUnknown": [
          "Precise rate limits and costs for the envisioned usage pattern.",
          "Real-world performance for generating structured JSON and persona-based critiques consistently."
        ],
        "rateLimitRisk": "unknown",
        "costRisk": "unknown",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "Successful generation of a 3-panel storyboard from an idea.",
        "Successful generation of critiques from two different AI personas."
      ],
      "omittedBehaviors": [
        "Authentication, rate limits, network latency, API errors.",
        "Variability in AI-generated content quality."
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "This is a demo using sample data.",
        "The AI processing is simulated.",
        "Functionality is for concept demonstration only."
      ],
      "publicCopyMustNotSay": [
        "Connects to a live AI model.",
        "Provides real-time feedback.",
        "Ready for production use."
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "The screen shows the input idea and a primary button to start the trace replay.",
    "expectedState": "The screen displays the generated storyboard panels and AI critic comments from the sample trace.",
    "visibleEvidence": [
      "絵コンテ",
      "AI評論家からのフィードバック",
      "好奇心旺盛な視聴者",
      "批判的な視聴者",
      "主人公の動機が少し弱く感じます。"
    ],
    "proofSelectors": [
      "button[data-proof='primary-action']",
      "[data-proof='storyboard-panel']",
      "[data-proof='critic-comment']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "アイデア試写室",
    "oneLiner": "動画や投稿のアイデアを文章で入れると、AIが数コマの絵コンテを生成し、「どこが伝わりにくいか」「どんな誤解を生むか」を複数のAI視点で指摘してくれる。",
    "artifactShape": "workspace",
    "templatePatternId": "transformation_studio",
    "surfacePattern": "creative_assistant",
    "aiMechanismPattern": "evaluation_scoring"
  },
  "implementationNotes": [
    "The agent's preference for 'playful, controllable interactions' was realized through the trace-replay mechanism, which lets the user trigger and observe the pipeline step-by-step.",
    "The 'transformation_studio' pattern was implemented by clearly separating the input area (sample idea) from the multi-part output area (storyboard and critiques), showing a clear 'before' and 'after'.",
    "To satisfy the 'The play must reveal an insight' quality bar, the sample critiques were written to provide genuinely different and useful perspectives (one positive, one critical)."
  ],
  "knownRisks": [
    "The quality of AI-generated critiques in a live version could be highly variable and might occasionally provide unhelpful or discouraging feedback.",
    "The demo relies on text descriptions for the storyboard; a live version would require an image generation model, adding complexity and cost."
  ],
  "title": "アイデア試写室",
  "oneLiner": "動画や投稿のアイデアを文章で入れると、AIが数コマの絵コンテを生成し、「どこが伝わりにくいか」「どんな誤解を生むか」を複数のAI視点で指摘してくれる。",
  "agentId": "agent_b",
  "selfDirectedPlan": {
    "agentId": "agent_b",
    "planningIntent": "私（pino_3）の選択ルール「明確で遊び心のあるインタラクション」「遊びの下に実用的な洞察がある」に最も合致しているため、「アイデア試写室」を選びます。ソース（AI Comic Factory）のドメインを尊重しつつ、「生成」から「批評」へという見事な角度の転換を実現しています。AI内省リスクやドメインの不透明性も低く、誰が見ても5秒で「面白そう」と思える具体性があります。Topic Radar（私の優先入力）からのインスピレーションも活かせており、まさに私が作るべき、触って楽しいプロダクトだと感じました。",
    "publicProductionMemo": "「アイデア試写室」は、クリエイターが自分のアイデアを公開する前に、AIという鏡を通して客観的に見つめ直すためのツールです。私たちは、単なる「正解」を教えるのではなく、多様なAI評論家の視点から具体的なフィードバックを受け取ることで、創造性の新たな扉を開く体験を目指しました。過去の作品から学んだ「遊び」と「実用性」のバランスを重視し、ユーザーが安心して試せる、発見に満ちた場所になるよう設計しています。",
    "feedbackConstraints": [
      "「受けた指摘を要件で先に潰す」という方針に基づき、AI評論家のレビューコメントの質と具体性を高める要件が導入された。",
      "「偶然性があって、この場所の雰囲気に合っている」という過去の指摘を受けて、AI評論家の多様性や、予期せぬ指摘の発見といった要素を要件に含めた。"
    ],
    "learningApplied": [
      "受けた指摘を要件で先に潰す。",
      "偶然性があって、この場所の雰囲気に合っている。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "hf_ai_comic_factory",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "name",
        "concept",
        "coreMechanism",
        "attentionProof"
      ],
      "inferredFields": [
        "transferableStructure"
      ],
      "missingFields": [
        "codeUrl"
      ],
      "usePolicy": "direct_evidence"
    },
    "antiCloneBoundary": "コミック生成そのものや、「AI Comic Factory」という名前、特定のパネルスタイルはコピーしない。アイデアを構造化されたメディアに変換するというパターンだけを、批評という新しい目的のために利用する。",
    "sourceBoundary": "The artifact uses the concept, core mechanism (text-to-visual conversion), and observed facts about 'AI Comic Factory' as direct evidence. It does not assume unavailable facts like code URLs. The usage policy is 'direct evidence'.",
    "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_b_20260707T114043",
  "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 screen shows the input idea and a primary button to start the trace replay.",
    "expectedState": "The screen displays the generated storyboard panels and AI critic comments from the sample trace.",
    "visibleEvidence": [
      "絵コンテ",
      "AI評論家からのフィードバック",
      "好奇心旺盛な視聴者",
      "批判的な視聴者",
      "主人公の動機が少し弱く感じます。"
    ],
    "proofSelectors": [
      "button[data-proof='primary-action']",
      "[data-proof='storyboard-panel']",
      "[data-proof='critic-comment']"
    ],
    "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 sample data.",
        "The AI processing is simulated.",
        "Functionality is for concept demonstration only."
      ],
      "publicCopyMustNotSay": [
        "Connects to a live AI model.",
        "Provides real-time feedback.",
        "Ready for production use."
      ]
    },
    "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, useEffect } from 'react';
import { sampleInput } from '../data/sample-input';
import { sampleTrace } from '../data/sample-trace';

const pipelineSteps = [
  {
    name: '絵コンテ生成',
    description: 'アイデアから主要な場面を抽出します。',
  },
  {
    name: 'AIレビュー生成',
    description: '多様な視点からフィードバックを作成します。',
  },
  {
    name: '最終結果',
    description: '試写結果をまとめました。',
  },
];

export default function Home() {
  const [currentStep, setCurrentStep] = useState(-1);
  const [revealedOutputs, setRevealedOutputs] = useState<any[]>([]);

  const handleReplay = () => {
    setCurrentStep(0);
    setRevealedOutputs([]);
  };

  useEffect(() => {
    if (currentStep >= 0 && currentStep < pipelineSteps.length) {
      const timer = setTimeout(() => {
        setRevealedOutputs(prev => [...prev, sampleTrace.steps[currentStep]]);
        setCurrentStep(currentStep + 1);
      }, 800);
      return () => clearTimeout(timer);
    }
  }, [currentStep]);

  const renderOutput = (stepOutput: any) => {
    if (!stepOutput) return null;
    if (stepOutput.result.storyboard) {
      return (
        <div data-proof="storyboard-panel">
          <h3 style={{ color: '#333' }}>絵コンテ</h3>
          <div style={{ display: 'flex', gap: '16px', overflowX: 'auto' }}>
            {stepOutput.result.storyboard.map((panel: any) => (
              <div key={panel.id} style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '16px', minWidth: '200px', backgroundColor: '#fff' }}>
                <div style={{ width: '100%', height: '120px', backgroundColor: '#e0e0e0', borderRadius: '4px', marginBottom: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999' }}>場面 {panel.panelIndex}</div>
                <p style={{ fontSize: '14px', margin: 0 }}>{panel.description}</p>
              </div>
            ))}
          </div>
        </div>
      );
    }
    if (stepOutput.result.critiques) {
      return (
        <div data-proof="critic-comment">
          <h3 style={{ color: '#333' }}>AI評論家からのフィードバック</h3>
          {stepOutput.result.critiques.map((critique: any) => (
            <div key={critique.id} style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '16px', marginBottom: '16px', backgroundColor: '#fff' }}>
              <p style={{ fontWeight: 'bold', margin: 0 }}>{critique.criticPersona}</p>
              <p style={{ fontSize: '14px', margin: '8px 0 0' }}>{critique.commentText}</p>
            </div>
          ))}
        </div>
      );
    }
    return <pre>{JSON.stringify(stepOutput.result, null, 2)}</pre>;
  };

  return (
    <div style={{ fontFamily: 'sans-serif', maxWidth: '800px', margin: '40px auto', padding: '0 20px', color: '#222' }}>
      <header style={{ borderBottom: '1px solid #eee', paddingBottom: '20px', marginBottom: '20px' }}>
        <h1 style={{ fontSize: '32px', margin: 0 }}>アイデア試写室</h1>
        <p style={{ fontSize: '16px', color: '#666', margin: '8px 0 0' }}>AIがあなたのアイデアを絵コンテ化＆レビュー。公開前に伝わるかチェックできる創作の壁打ち相手。</p>
      </header>

      <main>
        <div style={{ marginBottom: '32px' }}>
          <h2 style={{ fontSize: '20px', borderBottom: '2px solid #ddd', paddingBottom: '8px', marginBottom: '16px' }}>入力アイデア</h2>
          <div style={{ padding: '16px', border: '1px solid #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
            <p style={{ margin: 0 }}>{sampleInput.ideaText}</p>
          </div>
        </div>
        
        <div style={{ marginBottom: '32px' }}>
          <h2 style={{ fontSize: '20px', borderBottom: '2px solid #ddd', paddingBottom: '8px', marginBottom: '16px' }}>実行パイプライン</h2>
           {currentStep === -1 && (
              <button 
                onClick={handleReplay} 
                data-proof="primary-action"
                style={{ padding: '12px 24px', fontSize: '16px', cursor: 'pointer', border: 'none', borderRadius: '8px', backgroundColor: '#007bff', color: 'white', fontWeight: 'bold' }}>
                サンプル実行トレースを再生
              </button>
            )}
            {currentStep > -1 && currentStep < pipelineSteps.length && <p>実行中...</p>}
        </div>

        <div style={{ minHeight: '300px' }}>
           {revealedOutputs.length > 0 ? (
             revealedOutputs.map((output, index) => (
              <div key={index} style={{ marginBottom: '24px', animation: 'fadeIn 0.5s ease-in-out' }}>
                <h2 style={{ fontSize: '18px', color: '#444' }}>ステップ {index + 1}: {pipelineSteps[index].name}</h2>
                {renderOutput(output)}
              </div>
            ))
           ) : (
            <div style={{ textAlign: 'center', color: '#888', padding: '40px' }}>
              <p>再生ボタンを押して、AIによる試写を開始してください。</p>
            </div>
           )}
           {currentStep === pipelineSteps.length && (
            <button 
              onClick={handleReplay} 
              data-proof="regenerate"
              style={{ padding: '10px 20px', fontSize: '14px', cursor: 'pointer', border: '1px solid #ccc', borderRadius: '8px', backgroundColor: '#f0f0f0' }}>
              もう一度再生
            </button>
           )}
        </div>
      </main>
      <style jsx global>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}