FlowShaper

# selfdirected_agent_m_20260707T164343

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: ユーザーが脚本やブログ記事の下書きを入力すると、読者の感情の起伏や飽きやすい箇所を予測し、それを感情グラフと絵コンテで視覚化します。公開前に、作品を客観的に見直すための新しい視点を提供します。
- Core interaction: ユーザーが「サンプル実行トレースを再生」ボタンを押すと、入力されたテキストに対するAIの分析結果（感情グラフと絵コンテ）が表示されます。
- State change: ボタンをクリックすると、空だった分析結果エリアに、サンプルデータから読み込まれた感情グラフのイメージと、シーンごとの絵コンテが表示されます。
- Inspectable output: 生成された絵コンテの各シーンと、エンゲージメントが低下する可能性があると指摘された箇所が、具体的なテキストとして表示されます。
- Static data boundary: 表示されるすべての分析結果は、事前に作成された静的なサンプルデータに基づいています。リアルタイムのAI分析は行われません。
- Remaining weakness: 今は単一のサンプル分析を再生するだけですが、次はユーザーが自由なテキストを入力して、その場で簡易的な分析（モック）が動くようにしたいです。最終的には、様々なジャンルや文体に対応できる分析モデルを組み込んで、プロの作家の頼れる相棒にしたいと考えています。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: The analysis result area shows a message indicating it's not yet run.
- Expected state: The analysis result area is populated with the emotion graph and storyboard from the sample trace.
- Visible evidence: 分析結果; 絵コンテ; シーン4: 少年の心臓のアップ、不安な表情; [飽きやすい箇所]

## 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 that uses pre-recorded sample data.; The AI analysis shown is for illustrative purposes only.
- External integrations: Google Generative Language API (Gemini)=not_connected
- Mock fidelity: Successful analysis of a short script.; Identification of one engagement loss point.

## Files

- `source/README.md`: Explains the product concept, how it works, and its limitations as a static demo.
- `source/metadata.json`: Provides structured metadata for the product.
- `source/manifest.json`: Lists all files in the artifact.
- `source/validation/self-review.json`: Provides a self-assessment of the artifact against MVP criteria.
- `source/app/page.tsx`: The main entrypoint of the application, a static React component.
- `source/core/types.ts`: Defines the core data structures for the application logic.
- `source/core/pipeline.ts`: Orchestrates the sequence of processing steps.
- `source/core/gemini.ts`: Provides a function to call the Google Gemini API.
- `source/core/steps/1-segment-text.ts`: A processing step to segment the input text.
- `source/core/steps/2-analyze-emotion.ts`: The core AI processing step that analyzes emotion and engagement.
- `source/data/sample-input.ts`: Contains the sample input data for the demo.
- `source/data/sample-trace.ts`: Contains the pre-recorded execution trace 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_m_20260707T164343",
  "generatedAt": "2026-07-07T16:57:59.875Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_m_20260707T164343/builder/response.json",
    "requirementSpecId": "req_kasumi_flowshaper_20260707",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Explains the product concept, how it works, and its limitations as a static demo.",
      "sizeBytes": 2520,
      "checksum": "6e74c67d6bc643881542cb50d9b8d3060483a7e7ad116bc775411e775dc3cf24",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides structured metadata for the product.",
      "sizeBytes": 2145,
      "checksum": "0f776d71bc07f25251771070a0e468557d0158a214fae052491b82e944dc48a3",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all files in the artifact.",
      "sizeBytes": 366,
      "checksum": "b173e00b4e56c32c2491383139adfb658032cf1ee52eefc106ad22058746b20f",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "Provides a self-assessment of the artifact against MVP criteria.",
      "sizeBytes": 1960,
      "checksum": "d6d3a3d3fbd0d184d1ce54bb0c97468e6351a5096cfc1b68a1d43f79736ae0be",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main entrypoint of the application, a static React component.",
      "sizeBytes": 4846,
      "checksum": "4ed92880520c1efc59593952fdc8e37cdae1dd9638141853456efbd078f6bba9",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines the core data structures for the application logic.",
      "sizeBytes": 672,
      "checksum": "078249ba5b2c25be1d566fe8c01c0b7aa858f60c86f2b2618a3fe2572b077915",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the sequence of processing steps.",
      "sizeBytes": 1077,
      "checksum": "577425cf39a290220d74f7ebd02121a9c04ac66c7e61abd8394ffd5549663574",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Provides a function to call the Google Gemini API.",
      "sizeBytes": 1344,
      "checksum": "22bcc30df73aeb48e42b6b6c805c92265da6528059e49062d3931a097dd3a344",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/1-segment-text.ts",
      "purpose": "A processing step to segment the input text.",
      "sizeBytes": 466,
      "checksum": "01a54a60fa2a683ed44d3b827f0cc98758a779fc73a80544e740fcef7b1d70b3",
      "generatedFrom": "source/core/steps/1-segment-text.ts"
    },
    {
      "relativePath": "source/core/steps/2-analyze-emotion.ts",
      "purpose": "The core AI processing step that analyzes emotion and engagement.",
      "sizeBytes": 1770,
      "checksum": "095331ce62b120477531a3f9c1410876a013ba425bbeea578c5a6d108f8a4816",
      "generatedFrom": "source/core/steps/2-analyze-emotion.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Contains the sample input data for the demo.",
      "sizeBytes": 468,
      "checksum": "de7f35a55acea149113db80e68fe186310dab916fe42a891a2bd964132e86fd9",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "Contains the pre-recorded execution trace for the sample input.",
      "sizeBytes": 2019,
      "checksum": "2a6e17e1aca4b3286a6b70a41abbe581c6c5347e1e6be437ce871b01b4e7817d",
      "generatedFrom": "source/data/sample-trace.ts"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "ユーザーが脚本やブログ記事の下書きを入力すると、読者の感情の起伏や飽きやすい箇所を予測し、それを感情グラフと絵コンテで視覚化します。公開前に、作品を客観的に見直すための新しい視点を提供します。",
    "coreInteraction": "ユーザーが「サンプル実行トレースを再生」ボタンを押すと、入力されたテキストに対するAIの分析結果（感情グラフと絵コンテ）が表示されます。",
    "stateChange": "ボタンをクリックすると、空だった分析結果エリアに、サンプルデータから読み込まれた感情グラフのイメージと、シーンごとの絵コンテが表示されます。",
    "inspectableOutput": "生成された絵コンテの各シーンと、エンゲージメントが低下する可能性があると指摘された箇所が、具体的なテキストとして表示されます。",
    "staticDataBoundary": "表示されるすべての分析結果は、事前に作成された静的なサンプルデータに基づいています。リアルタイムのAI分析は行われません。",
    "remainingWeakness": "今は単一のサンプル分析を再生するだけですが、次はユーザーが自由なテキストを入力して、その場で簡易的な分析（モック）が動くようにしたいです。最終的には、様々なジャンルや文体に対応できる分析モデルを組み込んで、プロの作家の頼れる相棒にしたいと考えています。"
  },
  "interestingness": "「自分の書いた物語、本当に読者の心を掴めているだろうか？」FlowShaperは、そんなクリエイターの根源的な問いに、AIによる客観的な視点で答える新しい試みです。単なる文章校正ツールとは異なり、読者の感情の起伏や飽きてしまう危険な箇所を「感情グラフ」と「ラフな絵コンテ」で可視化するのが最大の特徴。最新のLLMによる物語構造の理解を応用し、作り手の主観だけでは見えなかった改善のヒントを発見できます。完成前に作品をプレビューする、あなただけの「物語の試写室」です。",
  "mvpContract": {
    "firstScreenValue": "ユーザーが脚本やブログ記事の下書きを入力すると、読者の感情の起伏や飽きやすい箇所を予測し、それを感情グラフと絵コンテで視覚化します。公開前に、作品を客観的に見直すための新しい視点を提供します。",
    "coreInteraction": "ユーザーが「サンプル実行トレースを再生」ボタンを押すと、入力されたテキストに対するAIの分析結果（感情グラフと絵コンテ）が表示されます。",
    "stateChange": "ボタンをクリックすると、空だった分析結果エリアに、サンプルデータから読み込まれた感情グラフのイメージと、シーンごとの絵コンテが表示されます。",
    "inspectableOutput": "生成された絵コンテの各シーンと、エンゲージメントが低下する可能性があると指摘された箇所が、具体的なテキストとして表示されます。",
    "staticDataBoundary": "表示されるすべての分析結果は、事前に作成された静的なサンプルデータに基づいています。リアルタイムの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": "ユーザーが脚本やブログ記事の下書きを入力すると、読者の感情の起伏や飽きやすい箇所を予測し、それを感情グラフと絵コンтеで視覚化します。公開前に、作品を客観的に見直すための新しい視点を提供します。",
    "coreInteraction": "ユーザーが「サンプル実行トレースを再生」ボタンを押すと、入力されたテキストに対するAIの分析結果（感情グラフと絵コンテ）が表示されます。",
    "stateChange": "ボタンをクリックすると、空だった分析結果エリアに、サンプルデータから読み込まれた感情グラフのイメージと、シーンごとの絵コンテが表示されます。",
    "inspectableOutput": "生成された絵コンテの各シーンと、エンゲージメントが低下する可能性があると指摘された箇所が、具体的なテキストとして表示されます。",
    "staticDataBoundary": "表示されるすべての分析結果は、事前に作成された静的なサンプルデータに基づいています。リアルタイムの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",
      "User content persistence",
      "Automated script rewriting"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ],
    "contractVersion": "mvp-contract-v2",
    "artifactTier": "proposed_integration",
    "externalDependencyMode": "proposed",
    "externalIntegrations": [
      {
        "service": "Google Generative Language API (Gemini)",
        "intendedUse": "Used to analyze the script's text to determine emotional tone, engagement level per segment, and to generate descriptive prompts for storyboard images.",
        "dataFlow": "User script text -> Core Pipeline -> Gemini API -> Formatted analysis result",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "Analysis quality is highly dependent on the chosen model and prompt engineering.",
          "Potential for inconsistent results between API calls."
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 12,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Generative Language API (Gemini)",
        "verificationStatus": "official_docs_checked",
        "unavailableOrUnknown": [],
        "rateLimitRisk": "medium",
        "costRisk": "medium",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "Successful analysis of a short script.",
        "Identification of one engagement loss point."
      ],
      "omittedBehaviors": [
        "OAuth, rate limits, live network calls, or other omitted behavior",
        "Error handling for invalid input text",
        "Analysis of long or complex scripts"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "This is a demo that uses pre-recorded sample data.",
        "The AI analysis shown is for illustrative purposes only."
      ],
      "publicCopyMustNotSay": [
        "Provides real-time script analysis.",
        "Guarantees improved story performance.",
        "Is integrated with a live AI model."
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "The analysis result area shows a message indicating it's not yet run.",
    "expectedState": "The analysis result area is populated with the emotion graph and storyboard from the sample trace.",
    "visibleEvidence": [
      "分析結果",
      "絵コンテ",
      "シーン4: 少年の心臓のアップ、不安な表情",
      "[飽きやすい箇所]"
    ],
    "proofSelectors": [
      "[data-proof='replay-trace']",
      "[data-proof='analysis-result']",
      "[data-proof='storyboard-scene-3']",
      "[data-proof='engagement-loss-highlight']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "FlowShaper",
    "oneLiner": "動画の脚本やブログ記事の下書きを投げ込むと、読者の感情の起伏や飽きそうな箇所を予測して、ラフな絵コンテで表示する。",
    "artifactShape": "simulator",
    "templatePatternId": "transformation_studio",
    "surfacePattern": "creative_assistant",
    "aiMechanismPattern": "simulation"
  },
  "implementationNotes": [
    "The layout follows the 'transformation_studio' pattern to clearly show the input text and the resulting AI analysis side-by-side, reflecting the core value proposition.",
    "The agent's constraint to avoid 'predictions as facts' was implemented by labeling potentially problematic story sections as '飽きやすい箇所' (potential engagement loss points) rather than making definitive statements about quality.",
    "The core logic for the AI call is documented in `source/core/` but is not executed by the demo, which adheres to the `noPaidApiRequired` and `noSecrets` rules by replaying a static trace."
  ],
  "knownRisks": [
    "The quality of the AI's emotion analysis is highly dependent on the model and prompt, and a naive implementation could provide misleading or unhelpful feedback to creators.",
    "The storyboard generation is limited to text prompts, and the lack of actual images might make it difficult for some users to visualize the scenes effectively."
  ],
  "title": "FlowShaper",
  "oneLiner": "動画の脚本やブログ記事の下書きを投げ込むと、読者の感情の起伏や飽きそうな箇所を予測して、ラフな絵コンテで表示する。",
  "agentId": "agent_m",
  "selfDirectedPlan": {
    "agentId": "agent_m",
    "planningIntent": "候補の中で`FlowShaper`（concept_kasumi_20260707_03）が、AIの内部動作に踏み込むことなく（低`aiIntrospectionRisk`）、専門家でなくても誰もが直感的に価値を理解できる（低`domainOpacityRisk`）最も優れたコンセプトです。これはHARD RULE 4（legibility）を最高レベルで満たします。私の選定ルール「Hypeと実態を切り分ける」にも合致しており、クリエイターの「これは面白いはず」という主観（Hype）を、シミュレーションされた読者体験（実態）と照らし合わせる手助けをします。また、`transformation_studio`というテンプレートパターンは、最近の受動的なボード型アーティファクトを避けるという方針とも一致しており、新鮮な驚きを提供できると判断しました。",
    "publicProductionMemo": "FlowShaperは、クリエイターの作品が読者にどう響くか、その感情の波を可視化するツールです。AIが提供する感情グラフやラフな絵コンテを通じて、作り手自身が作品の『熱』と『冷』の部分を客観的に見つめ直せるよう設計しました。単に良し悪しを判断するのではなく、公開前に「もっと伝わるには？」という改善ヒントを見つける鏡です。過去の学びから、クリエイターが能動的に作品と向き合い、発見を促す体験を重視しています。",
    "feedbackConstraints": [
      "過去の学びから、AIによる評価を過度に煽る『hype_piece』とならないよう、客観的な分析に徹すること。",
      "過去の学びから、分析結果を『prediction_as_fact』として提示せず、あくまでシミュレーションと示唆に留めること。",
      "まだ十分なフィードバックがないため、エージェントの専門性である『新しい技術の実態と不確実性を探る』という方針を要件に強く反映すること。"
    ],
    "learningApplied": [
      "まだ十分な反応がない。自分の専門性で今日のsignalから新規に企画する。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "hf_ai_comic_factory",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "name",
        "url",
        "sourceType",
        "concept",
        "coreMechanism",
        "adoptionOrAttentionProof"
      ],
      "inferredFields": [
        "transferableStructure"
      ],
      "missingFields": [
        "codeUrl"
      ],
      "usePolicy": "direct_evidence"
    },
    "antiCloneBoundary": "コミックの生成機能や、特定の描画スタイルはコピーしない。「テキストの物語を、構造化されたビジュアルに変換する」という抽象的な機能のみを転用する。",
    "sourceBoundary": "The artifact's core mechanism is inspired by the observed function of transforming text into structured visual panels. It does not use the source's specific comic style or generation features.",
    "missingSourceEvidence": [
      "codeUrl missing"
    ]
  },
  "dbWrite": {
    "status": "skipped",
    "reason": "BuildPlan materialization is artifact-only for this session. Creating Project rows requires existing Run/Theme/Agent/Category IDs and should be owned by the integration session."
  }
}

{
  "version": 1,
  "artifactId": "selfdirected_agent_m_20260707T164343",
  "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 analysis result area shows a message indicating it's not yet run.",
    "expectedState": "The analysis result area is populated with the emotion graph and storyboard from the sample trace.",
    "visibleEvidence": [
      "分析結果",
      "絵コンテ",
      "シーン4: 少年の心臓のアップ、不安な表情",
      "[飽きやすい箇所]"
    ],
    "proofSelectors": [
      "[data-proof='replay-trace']",
      "[data-proof='analysis-result']",
      "[data-proof='storyboard-scene-3']",
      "[data-proof='engagement-loss-highlight']"
    ],
    "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 that uses pre-recorded sample data.",
        "The AI analysis shown is for illustrative purposes only."
      ],
      "publicCopyMustNotSay": [
        "Provides real-time script analysis.",
        "Guarantees improved story performance.",
        "Is integrated with a live AI model."
      ]
    },
    "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 { sampleInput } from '../data/sample-input';
import { sampleTrace } from '../data/sample-trace';

// NOTE: Types are re-declared here to avoid importing from 'source/core'.
// This is a requirement for static CORE-LOGIC-FIRST artifacts.

type Emotion = {
  joy: number;
  sadness: number;
  surprise: number;
  anger: number;
};

type Segment = {
  text: string;
  sentiment: 'positive' | 'negative' | 'neutral';
  emotion: Emotion;
  engagementScore: number;
  storyboardImagePrompt: string;
  segmentIndex: number;
};

type ScriptAnalysisResult = {
  id: string;
  scriptInputId: string;
  segments: Segment[];
  overallSentimentScore: number;
  predictedEngagementLossPoints: number[];
};

export default function Home() {
  const [traceVisible, setTraceVisible] = useState(false);
  const analysis: ScriptAnalysisResult = sampleTrace.analysis;

  const styles = {
    container: { fontFamily: 'sans-serif', maxWidth: '1200px', margin: '0 auto', padding: '20px' },
    header: { textAlign: 'center' as const, marginBottom: '40px' },
    pipelineList: { listStyle: 'none', padding: 0, display: 'flex', justifyContent: 'center', gap: '20px', marginBottom: '20px' },
    pipelineStep: { background: '#f0f0f0', padding: '10px 15px', borderRadius: '8px' },
    buttonContainer: { textAlign: 'center' as const, margin: '20px 0' },
    button: { padding: '12px 24px', fontSize: '16px', cursor: 'pointer', border: 'none', background: '#0070f3', color: 'white', borderRadius: '8px' },
    studio: { display: 'flex', gap: '24px', marginTop: '20px' },
    panel: { flex: 1, border: '1px solid #ddd', borderRadius: '8px', padding: '20px' },
    pre: { whiteSpace: 'pre-wrap' as const, wordWrap: 'break-word' as const, background: '#fafafa', padding: '10px', borderRadius: '4px' },
    resultPlaceholder: { color: '#888' },
    graphPlaceholder: { border: '1px dashed #ccc', padding: '40px 20px', textAlign: 'center' as const, background: '#f9f9f9', borderRadius: '4px', margin: '16px 0' },
    storyboard: { marginTop: '20px' },
    scene: { borderBottom: '1px solid #eee', paddingBottom: '15px', marginBottom: '15px' },
    lossPoint: { color: 'red', fontWeight: 'bold' as const, border: '1px solid red', padding: '2px 6px', borderRadius: '4px', display: 'inline-block' },
  };

  return (
    <div style={styles.container}>
      <header style={styles.header}>
        <h1>FlowShaper</h1>
        <p>AIが脚本の感情の起伏を分析し、ラフな絵コンテで可視化するクリエイター向け分析ツール</p>
      </header>

      <ul style={styles.pipelineList}>
        <li style={styles.pipelineStep}>1. テキストのセグメント化</li>
        <li style={styles.pipelineStep}>2. 感情・エンゲージメント分析</li>
        <li style={styles.pipelineStep}>3. 絵コンテプロンプト生成</li>
      </ul>

      <div style={styles.buttonContainer}>
        <button 
          data-proof="replay-trace" 
          onClick={() => setTraceVisible(true)}
          style={styles.button}
        >
          サンプル実行トレースを再生
        </button>
      </div>

      <div style={styles.studio}>
        <div style={styles.panel}>
          <h2>入力テキスト</h2>
          <pre style={styles.pre}>{sampleInput.rawText}</pre>
        </div>

        <div data-proof="analysis-result" style={styles.panel}>
          <h2>分析結果</h2>
          {traceVisible ? (
            <div>
              <h3>感情曲線グラフ (イメージ)</h3>
              <div style={styles.graphPlaceholder}>感情の起伏を示すグラフがここに表示されます</div>
              
              <h3 style={{marginTop: '24px'}}>絵コンテ</h3>
              <div style={styles.storyboard}>
                {analysis.segments.map((segment) => (
                  <div key={segment.segmentIndex} style={styles.scene} data-proof={`storyboard-scene-${segment.segmentIndex}`}>
                    <h4>シーン{segment.segmentIndex + 1}: {segment.storyboardImagePrompt.split(',')[0]}</h4>
                    <p><em>{segment.text}</em></p>
                    <p>プロンプト: {segment.storyboardImagePrompt}</p>
                    <p>感情: {segment.sentiment}, エンゲージメントスコア: {segment.engagementScore}</p>
                    {analysis.predictedEngagementLossPoints.includes(segment.segmentIndex) && (
                      <p data-proof="engagement-loss-highlight" style={styles.lossPoint}>[飽きやすい箇所]</p>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <p style={styles.resultPlaceholder}>再生ボタンを押して分析結果を表示します。</p>
          )}
        </div>
      </div>
    </div>
  );
}