@reftrixmcp/mcp-server 0.1.7 → 0.2.0

package/src/tools/page/handlers/sync-processing.ts

@@ -8,108 +8,40 @@
  * MCP Tool handler（入力バリデーション・SSRF・async判定）は呼び出し元に残し、
  * ここでは同期モードの分析処理本体を担当する。
  *
+ * v0.2.0: sync-helpers.ts / sync-phase-handlers.ts に分割。
+ * このファイルはオーケストレーションのみを担当。
+ *
  * @module tools/page/handlers/sync-processing
  */
 
-import { v7 as uuidv7 } from "uuid";
 import { logger, isDevelopment } from "../../../utils/logger";
-import { normalizeUrlForStorage } from "../../../utils/url-normalizer";
-import { validateExternalUrl } from "../../../utils/url-validator";
 import { sanitizeHtml } from "../../../utils/html-sanitizer";
-import { isUrlAllowedByRobotsTxt } from "@reftrixmcp/core";
-import {
-  pageIngestAdapter,
-  type IngestResult,
-  type ComputedStyleInfo,
-} from "../../../services/page-ingest-adapter";
 import { extractCssUrls } from "../../../services/external-css-fetcher";
 
-// Responsive Analysis Services
-import {
-  responsiveAnalysisService,
-  responsivePersistenceService,
-  type ResponsiveAnalysisResult,
-} from "../../../services/responsive";
-
-// Embedding統合用インポート
-import {
-  generateSectionEmbeddings,
-  generateMotionEmbeddings,
-  type SectionDataForEmbedding,
-  type MotionPatternForEmbedding,
-} from "./embedding-handler";
-
-// DB保存ロジック
-import {
-  saveToDatabase,
-  type SectionForSave,
-  type MotionPatternForSave,
-  type BackgroundDesignForSave,
-} from "./db-handler";
-
 // Layout Handler (Phase2)
 import { defaultAnalyzeLayout } from "./layout-handler";
 
-// Result Builder (Phase3)
-import {
-  determineErrorCode,
-  buildLayoutResult,
-  buildMotionResult,
-  buildQualityResult,
-  buildNarrativeResult,
-  buildBackgroundDesignsSummary,
-  extractWarning,
-} from "./result-builder";
-
-// Narrative Handler (v0.1.0)
-import { handleNarrativeAnalysis } from "./narrative-handler";
-import type { NarrativeHandlerInput, NarrativeHandlerResult } from "./types";
+// Result Builder
+import { determineErrorCode } from "./result-builder";
 
 // Motion Handler (Phase4)
 import { defaultDetectMotion } from "./motion-handler";
 
-// JS Animation Handler（DB保存用 + Embedding生成）
-import {
-  mapJSAnimationResultToPatterns,
-  saveJSAnimationPatternsWithEmbeddings,
-} from "./js-animation-handler";
-
 // Quality Handler (Phase4)
 import { defaultEvaluateQuality } from "./quality-handler";
 
-// Types Handler（共通型定義）
-import type {
-  LayoutServiceResult,
-  MotionServiceResult,
-  QualityServiceResult,
-  IPageAnalyzeService,
-  IPageAnalyzePrismaClient,
-} from "./types";
-
-// VideoMode DB保存用ヘルパー（同期/非同期モード共有）
-import { saveFrameAnalysisToDb } from "../../../services/motion/frame-analysis-save.helper";
-
-import type {
-  PageAnalyzeInput,
-  PageAnalyzeOutput,
-  PageAnalyzeData,
-  LayoutResult,
-  MotionResult,
-  QualityResult,
-  NarrativeResult,
-  PageMetadata,
-  AnalysisWarning,
-} from "../schemas";
+// Types Handler
+import type { LayoutServiceResult, MotionServiceResult, QualityServiceResult } from "./types";
+
+import type { PageAnalyzeInput, PageAnalyzeOutput, AnalysisWarning } from "../schemas";
 
 import { PAGE_ANALYZE_ERROR_CODES } from "../schemas";
 
 // タイムアウトユーティリティ
 import {
-  withTimeout,
-  PhaseTimeoutError,
+  withTimeoutAndTracking,
   distributeTimeout,
   ExecutionStatusTracker,
-  withTimeoutAndTracking,
   calculateEffectiveTimeout,
   HardwareType,
   type HardwareInfoForTimeout,
@@ -125,227 +57,36 @@ import {
   type LegacyWebGLDetectionResult,
 } from "./webgl-detector";
 
-// WebGL事前推定
-import { preDetectWebGL, detectSiteTier } from "./webgl-pre-detector";
-
-// Pre-flight Probe Service
-import { preflightProbeService, type ProbeResult } from "@reftrixmcp/webdesign-core";
-
-// リトライ戦略
-import {
-  getRetryStrategy,
-  shouldRetry,
-  isNetworkError,
-  calculateMaxTotalTime,
-} from "./retry-strategy";
-
 // Vision CPU完走保証 Phase 4: MCP進捗報告統合
 import type { ProgressContext } from "../../../router";
 
 // =====================================================
-// DI依存を受け取るインターフェース
-// =====================================================
-
-/**
- * executeSyncProcessing に必要なDI依存
- */
-export interface SyncProcessingDeps {
-  /** IPageAnalyzeService ファクトリ（DI） */
-  getService: () => Partial<IPageAnalyzeService>;
-  /** PrismaClient 取得関数（DI） */
-  getPrismaClient: () => IPageAnalyzePrismaClient | null;
-}
-
-// =====================================================
-// デフォルトサービス実装
+// ヘルパー・フェーズハンドラーからインポート
 // =====================================================
 
-/**
- * デフォルトのHTML取得（PageIngestAdapter実装）
- * React/Vue/Next.js等のJS駆動サイトに対応するため、DOM安定化待機を使用
- */
-async function defaultFetchHtml(
-  url: string,
-  options: {
-    timeout?: number | undefined;
-    waitUntil?: "load" | "domcontentloaded" | "networkidle" | undefined;
-    viewport?: { width: number; height: number } | undefined;
-    includeComputedStyles?: boolean | undefined;
-    skipScreenshot?: boolean | undefined;
-  }
-): Promise<{
-  html: string;
-  title?: string | undefined;
-  description?: string | undefined;
-  screenshot?: string | undefined;
-  computedStyles?: ComputedStyleInfo[] | undefined;
-}> {
-  if (isDevelopment()) {
-    logger.debug("[page.analyze] defaultFetchHtml called", {
-      url,
-      timeout: options.timeout,
-      waitUntil: options.waitUntil,
-      hasViewport: !!options.viewport,
-    });
-  }
-
-  // PageIngestAdapterを使用（DOM安定化待機、ローディング要素待機対応）
-  // exactOptionalPropertyTypes対応: undefinedの可能性がある値は条件付きで含める
-  const ingestOptions: Parameters<typeof pageIngestAdapter.ingest>[0] = {
-    url,
-    fullPage: true,
-    // React/Vue/Next.js対応: DOM安定化待機（デフォルト有効）
-    waitForDomStable: true,
-    domStableTimeout: 1000, // 1秒間DOMが安定するまで待機
-    // ローディングアニメーション対応: 一般的なローディング要素を待機
-    waitForSelectorHidden: '.loading, .loader, .loadingElement, [data-loading], [aria-busy="true"]',
-    // コンテンツ要素の可視性待機: 実際のコンテンツ（見出し、セクション）が表示されるまで待機
-    waitForContentVisible:
-      "h1:not(.sr-only), h2:not(.sr-only), section:not(.sr-only), [data-section], article",
-    // ユーザーインタラクション模倣: マウス移動でローディング解除するサイト対応
-    simulateUserInteraction: true,
-    // 追加の固定待機（アニメーション完了用）
-    waitForTimeout: 3000, // 3秒に増加
-    // Computed Styles取得（htmlSnippetにインラインスタイル適用用）
-    includeComputedStyles: options.includeComputedStyles ?? true,
-    // WebGL/3Dサイト対応: 適応的待機戦略（デフォルト有効）
-    // Canvas/WebGL検出、Three.js等3Dライブラリ検出、フレームレート安定化待機
-    adaptiveWebGLWait: true,
-  };
-
-  // オプショナルなプロパティを条件付きで追加
-  if (options.timeout !== undefined) {
-    ingestOptions.timeout = options.timeout;
-  }
-  if (options.waitUntil !== undefined) {
-    ingestOptions.waitUntil = options.waitUntil;
-  }
-  if (options.viewport !== undefined) {
-    ingestOptions.viewport = options.viewport;
-  }
-  // スクリーンショットをスキップ（WebGL/3Dサイトでのタイムアウト防止）
-  if (options.skipScreenshot) {
-    ingestOptions.skipScreenshot = true;
-  }
-
-  // グローバルタイムアウトを計算（ユーザー指定 or デフォルト30秒）
-  // 内部操作にはバッファを持たせるため、フェッチタイムアウトは指定値の1.5倍を使用
-  const fetchTimeout = (options.timeout ?? 30000) * 1.5;
-
-  if (isDevelopment()) {
-    logger.debug("[page.analyze] defaultFetchHtml starting with timeout", {
-      url,
-      userTimeout: options.timeout,
-      fetchTimeout,
-    });
-  }
-
-  // グローバルタイムアウトラッパーで囲む
-  // WebGLサイトでChromiumがハングした場合でもタイムアウトを強制する
-  const result: IngestResult = await withTimeout(
-    pageIngestAdapter.ingest(ingestOptions),
-    fetchTimeout,
-    `page.analyze fetchHtml for ${url}`
-  );
-
-  if (!result.success) {
-    throw new Error(result.error || "Failed to fetch page");
-  }
-
-  if (isDevelopment()) {
-    logger.debug("[page.analyze] defaultFetchHtml completed", {
-      url,
-      htmlLength: result.html.length,
-      hasTitle: !!result.metadata.title,
-      hasDescription: !!result.metadata.description,
-      hasScreenshot: !!result.screenshots?.length,
-      hasComputedStyles: !!result.computedStyles?.length,
-      computedStylesCount: result.computedStyles?.length ?? 0,
-    });
-  }
-
-  // 戻り値を構築（exactOptionalPropertyTypes対応）
-  const returnValue: {
-    html: string;
-    title?: string | undefined;
-    description?: string | undefined;
-    screenshot?: string | undefined;
-    computedStyles?: ComputedStyleInfo[] | undefined;
-  } = {
-    html: result.html,
-    title: result.metadata.title || undefined,
-    description: result.metadata.description || undefined,
-    screenshot: result.screenshots?.[0]?.data,
-  };
-
-  // computedStylesがある場合のみ含める
-  if (result.computedStyles && result.computedStyles.length > 0) {
-    returnValue.computedStyles = result.computedStyles;
-  }
-
-  return returnValue;
-}
-
-/**
- * HTMLからメタデータを抽出
- */
-function extractMetadata(
-  html: string,
-  fetchedTitle?: string,
-  fetchedDescription?: string
-): PageMetadata {
-  const metadata: PageMetadata = {};
-
-  // タイトル
-  if (fetchedTitle) {
-    metadata.title = fetchedTitle;
-  } else {
-    const titleMatch = html.match(/<title[^>]*>([^<]*)<\/title>/i);
-    if (titleMatch && titleMatch[1]) {
-      metadata.title = titleMatch[1].trim();
-    }
-  }
-
-  // description
-  if (fetchedDescription) {
-    metadata.description = fetchedDescription;
-  } else {
-    const descMatch = html.match(
-      /<meta[^>]*name=["']description["'][^>]*content=["']([^"']*)["']/i
-    );
-    if (descMatch && descMatch[1]) {
-      metadata.description = descMatch[1].trim();
-    }
-  }
-
-  // OG image
-  const ogImageMatch = html.match(
-    /<meta[^>]*property=["']og:image["'][^>]*content=["']([^"']*)["']/i
-  );
-  if (ogImageMatch && ogImageMatch[1]) {
-    try {
-      new URL(ogImageMatch[1]);
-      metadata.ogImage = ogImageMatch[1];
-    } catch {
-      // 無効なURLは無視
-    }
-  }
-
-  // Favicon
-  const faviconMatch = html.match(
-    /<link[^>]*rel=["'](?:shortcut )?icon["'][^>]*href=["']([^"']*)["']/i
-  );
-  if (faviconMatch && faviconMatch[1]) {
-    try {
-      new URL(faviconMatch[1]);
-      metadata.favicon = faviconMatch[1];
-    } catch {
-      // 相対パスや無効なURLは無視
-    }
-  }
-
-  return metadata;
-}
+// sync-helpers.ts
+import {
+  type SyncProcessingDeps,
+  type FetchHtmlFunction,
+  defaultFetchHtml,
+  extractMetadata,
+  computePreFetchConfig,
+  fetchHtmlWithRetries,
+} from "./sync-helpers";
+
+// sync-phase-handlers.ts
+import {
+  handleDatabasePersistence,
+  handleEmbeddingGeneration,
+  handleMotionPersistenceExtras,
+  handleNarrativePhase,
+  handleResponsivePhase,
+  buildPageAnalyzeResponse,
+  integrateAnalysisResults,
+} from "./sync-phase-handlers";
+
+// Re-export SyncProcessingDeps for backward compatibility
+export type { SyncProcessingDeps } from "./sync-helpers";
 
 // =====================================================
 // メイン同期処理関数
@@ -372,311 +113,69 @@ export async function executeSyncProcessing(
 ): Promise<PageAnalyzeOutput> {
   // サービス取得
   const service = deps.getService();
-  const fetchHtml = service.fetchHtml ?? defaultFetchHtml;
+  // FetchHtmlFunction型に統一（defaultFetchHtmlはskipScreenshotを含む）
+  const fetchHtml: FetchHtmlFunction =
+    (service.fetchHtml as FetchHtmlFunction | undefined) ?? defaultFetchHtml;
   const analyzeLayout = service.analyzeLayout ?? defaultAnalyzeLayout;
   const detectMotion = service.detectMotion ?? defaultDetectMotion;
   const evaluateQuality = service.evaluateQuality ?? defaultEvaluateQuality;
 
-  // HTML取得結果（リトライループで設定される）
-  // attemptSucceeded=true の場合のみ有効な値が入る
-  let html = ""; // TypeScript definite assignment のため初期化
-  let fetchedTitle: string | undefined;
-  let fetchedDescription: string | undefined;
-  let fetchedScreenshot: string | undefined;
-  let fetchedComputedStyles: ComputedStyleInfo[] | undefined;
-
   // =====================================================
-  // 事前WebGL推定とタイムアウト先制設定（v0.1.0）
+  // 事前WebGL推定とPre-flight Probe（sync-helpers.ts）
   // =====================================================
-  // HTML取得前にURLパターンからWebGLサイトかを推定し、
-  // タイムアウトを先制的に延長することで、WebGLサイトでの
-  // HTML取得タイムアウトを防止する
-
-  const preDetection = preDetectWebGL(validated.url);
-  const preAdjustedTimeout = preDetection.isLikelyWebGL
-    ? Math.min(
-        (validated.timeout ?? 120000) * preDetection.timeoutMultiplier,
-        600000 // 最大10分
-      )
-    : (validated.timeout ?? 120000);
-
-  if (isDevelopment() && preDetection.isLikelyWebGL) {
-    logger.info("[page.analyze] WebGL pre-detection triggered", {
-      url: validated.url,
-      confidence: preDetection.confidence,
-      matchedDomain: preDetection.matchedDomain,
-      matchedPattern: preDetection.matchedPattern,
-      originalTimeout: validated.timeout,
-      preAdjustedTimeout,
-      timeoutMultiplier: preDetection.timeoutMultiplier,
-    });
-  }
-
-  // =====================================================
-  // Pre-flight Probe による自動タイムアウト調整（v0.1.0）
-  // =====================================================
-  // auto_timeout=true の場合、URLの複雑度を事前分析して最適なタイムアウトを計算
-  // WebGL、SPA、重いフレームワークを検出し、タイムアウトを動的に調整
-
-  let probeResult: ProbeResult | null = null;
-  let probeCalculatedTimeout = preAdjustedTimeout;
-
-  if (validated.auto_timeout === true) {
-    try {
-      if (isDevelopment()) {
-        logger.info("[page.analyze] Pre-flight probe started", { url: validated.url });
-      }
-
-      probeResult = await preflightProbeService.probe(validated.url);
-
-      // プローブ結果からタイムアウトを決定
-      // ユーザー指定がある場合はそれを上限として使用
-      const userTimeout = validated.timeout ?? 120000;
-      probeCalculatedTimeout = Math.min(
-        Math.max(probeResult.calculatedTimeoutMs, 30000), // 最低30秒
-        Math.max(userTimeout, 600000) // ユーザー指定または最大10分のどちらか大きい方
-      );
-
-      if (isDevelopment()) {
-        logger.info("[page.analyze] Pre-flight probe completed", {
-          url: validated.url,
-          calculatedTimeoutMs: probeResult.calculatedTimeoutMs,
-          complexityScore: probeResult.complexityScore,
-          hasWebGL: probeResult.hasWebGL,
-          hasSPA: probeResult.hasSPA,
-          hasHeavyFramework: probeResult.hasHeavyFramework,
-          probeCalculatedTimeout,
-          userTimeout,
-          responseTimeMs: probeResult.responseTimeMs,
-        });
-      }
-    } catch (probeError) {
-      // プローブ失敗時はフォールバック（preAdjustedTimeoutを使用）
-      logger.warn("[page.analyze] Pre-flight probe failed, using fallback timeout", {
-        url: validated.url,
-        error: probeError instanceof Error ? probeError.message : String(probeError),
-        fallbackTimeout: preAdjustedTimeout,
-      });
-      // probeResultはnullのまま、probeCalculatedTimeoutはpreAdjustedTimeoutのまま
-    }
-  }
-
-  // auto_timeout=falseまたはプローブ失敗時はpreAdjustedTimeoutを使用
-  const finalBaseTimeout =
-    validated.auto_timeout === true && probeResult ? probeCalculatedTimeout : preAdjustedTimeout;
+  const preFetchConfig = await computePreFetchConfig(
+    validated.url,
+    validated.timeout,
+    validated.auto_timeout
+  );
+  const { preDetection, probeResult, finalBaseTimeout } = preFetchConfig;
 
   // =====================================================
-  // HTML取得（自動リトライ対応 v0.1.0）
+  // HTML取得（自動リトライ対応 — sync-helpers.ts）
   // =====================================================
-  // サイト種別（SiteTier）に基づくリトライ戦略を適用
-  // - ultra-heavy/heavy: タイムアウト累積なし、ネットワークエラーのみリトライ
-  // - webgl: 軽い累積（1.2倍）、全エラーでリトライ
-  // - normal: 従来動作（1.5倍累積）
-
-  const viewport = validated.layoutOptions?.viewport;
-  // useVision=true の場合はスクリーンショットが必要（visualFeatures抽出のため）
-  // Phase 4-2: Decision 019bd65f-29c5-795e-9c81-cea829b3d9fe
-  const useVision = validated.layoutOptions?.useVision === true;
-  // narrativeOptions.includeVision=true の場合もスクリーンショットが必要（世界観分析用）
-  const useNarrativeVision = validated.narrativeOptions?.includeVision === true;
-  const skipScreenshot =
-    useVision || useNarrativeVision
-      ? false // useVision または narrativeOptions.includeVision 時は常にスクリーンショット取得
-      : validated.layoutOptions?.includeScreenshot !== true;
-
-  // サイト種別を検出してリトライ戦略を取得
-  const siteTier = detectSiteTier(validated.url, preDetection);
-  const retryStrategy = getRetryStrategy(siteTier);
-
-  // ユーザー指定がある場合はそちらを優先
-  const effectiveRetryStrategy = {
-    ...retryStrategy,
-    autoRetry: validated.auto_retry ?? retryStrategy.autoRetry,
-    maxRetries: validated.max_retries ?? retryStrategy.maxRetries,
-  };
-
-  // MCP 600秒上限チェック（警告ログ）
-  const maxTotalTime = calculateMaxTotalTime(finalBaseTimeout, effectiveRetryStrategy);
-  if (isDevelopment() && maxTotalTime > 600000) {
-    logger.warn("[page.analyze] Max total time may exceed MCP 600s limit", {
-      siteTier,
-      baseTimeout: finalBaseTimeout,
-      maxTotalTime,
-      maxRetries: effectiveRetryStrategy.maxRetries,
-      timeoutMultiplier: effectiveRetryStrategy.timeoutMultiplier,
-      autoTimeout: validated.auto_timeout,
-      probeUsed: probeResult !== null,
-    });
-  }
-
-  /**
-   * リトライ設定を取得
-   * @param attempt 試行回数（0-indexed）
-   */
-  const getRetryConfig = (
-    attempt: number
-  ): {
-    timeout: number;
-    waitUntil: "load" | "domcontentloaded" | "networkidle" | undefined;
-  } => {
-    // 1回目: 元の設定（auto_timeout時はprobeで計算されたタイムアウト）
-    if (attempt === 0) {
-      return {
-        timeout: finalBaseTimeout,
-        waitUntil: validated.waitUntil !== "load" ? validated.waitUntil : undefined,
-      };
-    }
-
-    // リトライ時: 乗数を累積適用（MCP 600秒上限を考慮）
-    // timeoutMultiplier=1.0の場合は累積なし
-    const multiplier = Math.pow(effectiveRetryStrategy.timeoutMultiplier, attempt);
-    const newTimeout = Math.min(
-      Math.round(finalBaseTimeout * multiplier),
-      600000 // MCP 600秒上限
-    );
-
-    return {
-      timeout: newTimeout,
-      waitUntil: "domcontentloaded" as const,
-    };
-  };
-
-  let lastError: Error | null = null;
-  const attemptCount = effectiveRetryStrategy.autoRetry ? effectiveRetryStrategy.maxRetries + 1 : 1;
-  let attemptSucceeded = false;
-
-  if (isDevelopment()) {
-    logger.info("[page.analyze] Retry strategy determined", {
-      url: validated.url,
-      siteTier,
-      autoRetry: effectiveRetryStrategy.autoRetry,
-      maxRetries: effectiveRetryStrategy.maxRetries,
-      timeoutMultiplier: effectiveRetryStrategy.timeoutMultiplier,
-      retryOnlyOnNetworkError: effectiveRetryStrategy.retryOnlyOnNetworkError,
-      baseTimeout: finalBaseTimeout,
-      maxTotalTime,
-      autoTimeout: validated.auto_timeout,
-      probeUsed: probeResult !== null,
-    });
-  }
-
-  for (let attempt = 0; attempt < attemptCount; attempt++) {
-    const retryConfig = getRetryConfig(attempt);
-
-    if (isDevelopment() && attempt > 0) {
-      logger.info("[page.analyze] Retrying HTML fetch", {
-        attempt: attempt + 1,
-        maxAttempts: attemptCount,
-        timeout: retryConfig.timeout,
-        waitUntil: retryConfig.waitUntil ?? "load",
-        previousError: lastError?.message,
-        isNetworkError: lastError ? isNetworkError(lastError) : false,
-      });
-    }
-
-    try {
-      const fetchResult = await fetchHtml(validated.url, {
-        timeout: retryConfig.timeout,
-        ...(retryConfig.waitUntil && { waitUntil: retryConfig.waitUntil }),
-        ...(viewport && { viewport }),
-        includeComputedStyles: true,
-        skipScreenshot,
-      });
-
-      html = fetchResult.html;
-      fetchedTitle = fetchResult.title;
-      fetchedDescription = fetchResult.description;
-      fetchedScreenshot = fetchResult.screenshot;
-      fetchedComputedStyles = fetchResult.computedStyles;
-      attemptSucceeded = true;
-
-      if (isDevelopment() && attempt > 0) {
-        logger.info("[page.analyze] Retry succeeded", {
-          attempt: attempt + 1,
-          timeout: retryConfig.timeout,
-          waitUntil: retryConfig.waitUntil ?? "load",
-        });
-      }
-
-      break; // 成功したらループを抜ける
-    } catch (error) {
-      lastError = error instanceof Error ? error : new Error(String(error));
-
-      logger.warn("[page.analyze] Fetch attempt failed", {
-        attempt: attempt + 1,
-        maxAttempts: attemptCount,
-        error: lastError.message,
-        url: validated.url,
-        isNetworkError: isNetworkError(lastError),
-      });
-
-      // shouldRetry で次の試行を判定
-      if (shouldRetry(lastError, attempt, effectiveRetryStrategy)) {
-        // 待機時間を挟む
-        await new Promise((resolve) =>
-          setTimeout(resolve, effectiveRetryStrategy.waitBetweenRetriesMs)
-        );
-        continue;
-      }
-
-      // リトライしない場合はループを抜ける
-      break;
-    }
-  }
-
-  // 全試行失敗
-  if (!attemptSucceeded) {
-    if (isDevelopment()) {
-      logger.error("[MCP Tool] page.analyze fetch error (all retries failed)", {
-        error: lastError,
-        url: validated.url,
-        attempts: attemptCount,
-      });
-    }
-
-    const errorMessage = lastError?.message ?? "Failed to fetch page";
+  const fetchResult = await fetchHtmlWithRetries({
+    url: validated.url,
+    finalBaseTimeout,
+    preDetection,
+    validated,
+    fetchHtml,
+    probeResult,
+  });
 
+  if (!fetchResult.success) {
     return {
       success: false,
       error: {
-        code: determineErrorCode(errorMessage),
-        message: `${errorMessage} (after ${attemptCount} attempt${attemptCount > 1 ? "s" : ""})`,
+        code: determineErrorCode(fetchResult.errorMessage),
+        message: `${fetchResult.errorMessage} (after ${fetchResult.attemptCount} attempt${fetchResult.attemptCount > 1 ? "s" : ""})`,
       },
     };
   }
 
+  const { html, fetchedTitle, fetchedDescription, fetchedScreenshot, fetchedComputedStyles } =
+    fetchResult.result;
+
   // 外部CSS URLを抽出（サニタイズ前のHTMLから）
-  // DOMPurifyで<link>タグが除去される問題の回避策
   const preExtractedCssUrls = extractCssUrls(html, normalizedUrl).map((u) => u.url);
 
   if (isDevelopment()) {
     logger.debug("[page.analyze] Pre-extracted external CSS URLs", {
       count: preExtractedCssUrls.length,
-      urls: preExtractedCssUrls.slice(0, 5), // 最初の5件のみログ
+      urls: preExtractedCssUrls.slice(0, 5),
     });
   }
 
   // HTMLサニタイズ（XSS対策）
-  // preserveDocumentStructure: true でドキュメント構造を保持
-  // - <html lang>: aXe html-has-lang ルール（WCAG 2.1 AA）
-  // - <title>: aXe document-title ルール
-  // - 安全な<meta>: description, viewport, charset
   const sanitizedHtml = sanitizeHtml(html, { preserveDocumentStructure: true });
 
   // メタデータ抽出（サニタイズ前のHTMLからメタデータを取得）
   const metadata = extractMetadata(html, fetchedTitle, fetchedDescription);
 
   // =====================================================
-  // WebGL検出とタイムアウト調整（v0.1.0）
+  // WebGL検出とタイムアウト調整
   // =====================================================
-
-  // WebGL/3Dコンテンツを早期検出
   const webglResult: LegacyWebGLDetectionResult = detectWebGL(html);
-
-  // 元のタイムアウト値
   const originalTimeout = validated.timeout ?? 60000;
-
-  // WebGL検出に基づいてタイムアウトを調整
   const timeoutAdjustment = adjustTimeoutForWebGL(originalTimeout, webglResult);
   const effectiveTimeout = timeoutAdjustment.effectiveTimeout;
 
@@ -691,14 +190,13 @@ export async function executeSyncProcessing(
   }
 
   // =====================================================
-  // Vision CPU完走保証 Phase 4: 早期ハードウェア検出とタイムアウト拡張
-  // CPU環境でVision分析を使用する場合、全体タイムアウトを自動延長
-  // useVisionは既に上で定義済み
+  // Vision CPU完走保証: 早期ハードウェア検出とタイムアウト拡張
   // =====================================================
+  const useVision = validated.layoutOptions?.useVision === true;
   let cpuTimeoutExtended = false;
   let cpuEffectiveTimeout = effectiveTimeout;
   let hardwareInfoForTimeout: HardwareInfoForTimeout | undefined;
-  let detectedHardwareType: HardwareType = HardwareType.GPU; // デフォルトはGPU（高速）
+  let detectedHardwareType: HardwareType = HardwareType.GPU;
 
   if (useVision) {
     try {
@@ -715,12 +213,10 @@ export async function executeSyncProcessing(
         });
       }
 
-      // CPU環境かつVision有効時はタイムアウト拡張を計算
       const screenshotSizeBytes = fetchedScreenshot
         ? Buffer.from(fetchedScreenshot, "base64").length
         : undefined;
 
-      // HardwareInfoForTimeout: imageSizeBytesはオプショナル
       hardwareInfoForTimeout =
         screenshotSizeBytes !== undefined
           ? {
@@ -733,11 +229,10 @@ export async function executeSyncProcessing(
               isVisionEnabled: true,
             };
 
-      // CalculateEffectiveTimeoutOptions: imageSizeBytesはオプショナル
       const cpuTimeoutResult =
         screenshotSizeBytes !== undefined
           ? calculateEffectiveTimeout({
-              originalTimeout: effectiveTimeout, // WebGL調整後のタイムアウトをベースに
+              originalTimeout: effectiveTimeout,
               hardwareType: hardwareInfo.type,
               isVisionEnabled: true,
               imageSizeBytes: screenshotSizeBytes,
@@ -762,14 +257,12 @@ export async function executeSyncProcessing(
         }
       }
     } catch (hwError) {
-      // ハードウェア検出失敗時はCPUと仮定（安全側）
       detectedHardwareType = HardwareType.CPU;
 
       logger.warn("[page.analyze] Early hardware detection failed, assuming CPU", {
         error: hwError instanceof Error ? hwError.message : "Unknown error",
       });
 
-      // CPU仮定でタイムアウト拡張
       hardwareInfoForTimeout = {
         type: HardwareType.CPU,
         isVisionEnabled: true,
@@ -788,11 +281,8 @@ export async function executeSyncProcessing(
     }
   }
 
-  // Vision CPU完走保証を考慮した最終的な有効タイムアウト
-  // MCP 600秒ハードリミット対策: フェーズタイムアウト配分の元になる値を570秒に制限
-  // これにより distributeTimeout() が各フェーズに過大なタイムアウトを割り当てることを防止
-  // CPU Vision延長で600秒以上に膨らんでも、フェーズ配分は570秒ベースで計算される
-  const MCP_HARD_LIMIT_MS = 570000; // MCP 600秒 - 30秒安全マージン
+  // MCP 600秒ハードリミット対策
+  const MCP_HARD_LIMIT_MS = 570000;
   const rawFinalEffectiveTimeout = cpuTimeoutExtended ? cpuEffectiveTimeout : effectiveTimeout;
   const finalEffectiveTimeout = Math.min(rawFinalEffectiveTimeout, MCP_HARD_LIMIT_MS);
 
@@ -805,14 +295,11 @@ export async function executeSyncProcessing(
   }
 
   // =====================================================
-  // ExecutionStatusTracker初期化（v0.1.0）
-  // Vision CPU完走保証 Phase 4: cpuModeExtended, hardwareInfoを追加
+  // ExecutionStatusTracker初期化
   // =====================================================
-
   const timeoutStrategy = validated.timeout_strategy ?? "progressive";
   const partialResultsEnabled = validated.partial_results ?? true;
 
-  // Vision CPU完走保証 Phase 4: hardwareInfoを条件付きで設定
   const executionTracker = hardwareInfoForTimeout
     ? new ExecutionStatusTracker({
         originalTimeoutMs: originalTimeout,
@@ -824,7 +311,7 @@ export async function executeSyncProcessing(
         cpuModeExtended: cpuTimeoutExtended,
         hardwareInfo: {
           type: detectedHardwareType,
-          vramBytes: 0, // 詳細情報はlayout-handler内で取得
+          vramBytes: 0,
           isGpuAvailable: detectedHardwareType === HardwareType.GPU,
         },
       })
@@ -838,27 +325,20 @@ export async function executeSyncProcessing(
         cpuModeExtended: cpuTimeoutExtended,
       });
 
-  // HTML取得成功を記録
   executionTracker.markCompleted("html");
-
-  // スクリーンショット取得成功を記録（取得できた場合）
   if (fetchedScreenshot) {
     executionTracker.markCompleted("screenshot");
   }
 
-  // 並列分析処理
+  // =====================================================
+  // フェーズタイムアウト配分
+  // =====================================================
   const features = validated.features ?? { layout: true, motion: true, quality: true };
   const warnings: AnalysisWarning[] = [];
 
-  // タイムアウト配分を計算（調整後のタイムアウトを使用）
-  // 注意: enable_frame_capture はデフォルトで false
-  // detect_js_animations / detect_webgl_animations はデフォルトで true (v0.1.0)
-  // タイムアウト分配もこのデフォルト値を反映する必要がある
-  const hasFrameCapture = validated.motionOptions?.enable_frame_capture === true; // デフォルト false
-  const hasJsAnimation = validated.motionOptions?.detect_js_animations !== false; // デフォルト true (v0.1.0)
+  const hasFrameCapture = validated.motionOptions?.enable_frame_capture === true;
+  const hasJsAnimation = validated.motionOptions?.detect_js_animations !== false;
 
-  // WebGL乗数を計算（adjustTimeoutForWebGLと同じロジック）
-  // v0.1.0: JSアニメーション検出有効時にモーション検出タイムアウトも延長
   const webglMultiplier = webglResult.detected
     ? webglResult.confidence >= 0.9
       ? 2.5
@@ -867,27 +347,22 @@ export async function executeSyncProcessing(
         : 1.5
     : 1.0;
 
-  // 事前推定（preDetection）とHTML解析（webglResult）の両方を考慮して最大乗数を使用
   const effectiveWebglMultiplier = preDetection.isLikelyWebGL
     ? Math.max(webglMultiplier, preDetection.timeoutMultiplier)
     : webglMultiplier;
 
-  // Vision CPU完走保証 Phase 4: finalEffectiveTimeoutとhardwareInfoForTimeoutを使用
   const phaseTimeouts = distributeTimeout(
-    finalEffectiveTimeout, // WebGL + CPU Vision拡張後のタイムアウト
+    finalEffectiveTimeout,
     hasFrameCapture,
     hasJsAnimation,
     {
       detected: webglResult.detected || preDetection.isLikelyWebGL,
       multiplier: effectiveWebglMultiplier,
     },
-    hardwareInfoForTimeout // Vision CPU完走保証 Phase 4: ハードウェア情報を渡す
+    hardwareInfoForTimeout
   );
 
-  // =====================================================
-  // Per-Phase Timeout Override (v0.1.0)
-  // ユーザー指定の個別タイムアウトで計算値をオーバーライド
-  // =====================================================
+  // Per-Phase Timeout Override
   if (validated.layoutTimeout !== undefined) {
     phaseTimeouts.layoutAnalysis = validated.layoutTimeout;
   }
@@ -898,7 +373,6 @@ export async function executeSyncProcessing(
     phaseTimeouts.qualityEvaluation = validated.qualityTimeout;
   }
 
-  // ExecutionStatusTrackerにフェーズタイムアウト設定を反映（v0.1.0）
   executionTracker.setPhaseTimeouts({
     layout: phaseTimeouts.layoutAnalysis,
     motion: phaseTimeouts.motionDetection,
@@ -909,7 +383,7 @@ export async function executeSyncProcessing(
     logger.debug("[page.analyze] Phase timeouts calculated", {
       originalTimeout,
       effectiveTimeout,
-      finalEffectiveTimeout, // Vision CPU完走保証 Phase 4
+      finalEffectiveTimeout,
       hasFrameCapture,
       hasJsAnimation,
       phaseTimeouts,
@@ -920,7 +394,6 @@ export async function executeSyncProcessing(
         motionTimeout: validated.motionTimeout,
         qualityTimeout: validated.qualityTimeout,
       },
-      // Vision CPU完走保証 Phase 4
       cpuVisionExtension: {
         useVision,
         cpuTimeoutExtended,
@@ -929,15 +402,14 @@ export async function executeSyncProcessing(
     });
   }
 
-  // 並列分析用の結果格納変数
+  // =====================================================
+  // 並列分析実行
+  // =====================================================
   let layoutServiceResult: LayoutServiceResult | null = null;
   let motionServiceResult: MotionServiceResult | null = null;
   let qualityServiceResult: QualityServiceResult | null = null;
 
-  // =====================================================
-  // layout_first モード判定（v0.1.0）
-  // WebGLサイトでレイアウト抽出を最優先し、モーション検出を軽量化
-  // =====================================================
+  // layout_first モード判定
   const layoutFirstMode = validated.layout_first ?? "auto";
   const useLayoutFirst =
     layoutFirstMode === "always" ||
@@ -952,17 +424,10 @@ export async function executeSyncProcessing(
     });
   }
 
-  // =====================================================
-  // layout_first モード時のタイムアウト再分配（v0.1.0）
-  // モーション検出が軽量化されるため、その分をレイアウト分析に回す
-  // =====================================================
+  // layout_first モード時のタイムアウト再分配
   let effectivePhaseTimeouts = phaseTimeouts;
   if (useLayoutFirst) {
-    // layout_first モードでは:
-    // - モーション検出: ライブラリ検出 + CSS静的解析（45秒必要）
-    // - レイアウト分析: 余った時間を追加
-    // v0.1.0: 15秒→45秒に増加（CSS解析に時間がかかるWebGLサイト対応）
-    const LAYOUT_FIRST_MOTION_TIMEOUT = 45000; // 45秒（CSS解析 + ライブラリ検出）
+    const LAYOUT_FIRST_MOTION_TIMEOUT = 45000;
     const savedTime = phaseTimeouts.motionDetection - LAYOUT_FIRST_MOTION_TIMEOUT;
     const bonusLayoutTime = Math.max(0, savedTime);
 
@@ -987,15 +452,10 @@ export async function executeSyncProcessing(
   const analysisPromises: Promise<void>[] = [];
 
   if (features.layout !== false) {
-    // Vision解析用スクリーンショートを準備（useVision=true時のみ必要）
     const screenshotForVision = fetchedScreenshot
       ? { base64: fetchedScreenshot, mimeType: "image/png" }
       : undefined;
 
-    // Computed StylesをhtmlSnippetにインラインスタイルとして適用するために渡す
-    // preExtractedCssUrlsはサニタイズ前のHTMLから抽出した外部CSS URL
-    // Vision CPU完走保証 Phase 3: visionOptionsを渡す
-    // Vision CPU完走保証 Phase 4: progressContextを渡す
     const layoutPromise = analyzeLayout(
       sanitizedHtml,
       validated.layoutOptions,
@@ -1007,7 +467,6 @@ export async function executeSyncProcessing(
       progressContext
     );
 
-    // withTimeoutAndTracking で Layout 分析にタイムアウトを適用（ExecutionStatusTracker統合）
     analysisPromises.push(
       withTimeoutAndTracking(
         layoutPromise,
@@ -1023,36 +482,23 @@ export async function executeSyncProcessing(
   }
 
   if (features.motion !== false) {
-    // preExtractedCssUrlsをモーション検出にも渡す（サニタイズ前のHTMLから抽出済み）
-    // DOMPurifyで<link>タグが除去される問題の回避策
-
-    // =====================================================
-    // layout_first モード時のモーション検出軽量化（v0.1.0）
-    // WebGLサイトでは library_only モードで高速検出
-    // =====================================================
     let effectiveMotionOptions = validated.motionOptions;
     if (useLayoutFirst) {
-      // ユーザーが明示的にfetchExternalCss: trueを指定した場合は尊重（v0.1.0）
-      // これにより、デザインデータ抽出目的での外部CSS取得が可能
       const userExplicitFetchExternalCss = validated.motionOptions?.fetchExternalCss;
       const effectiveFetchExternalCss = userExplicitFetchExternalCss === true ? true : false;
 
       effectiveMotionOptions = {
         ...validated.motionOptions,
-        // library_only モードでライブラリ検出のみ実行（CDP/WebAnimations無効）
-        // これにより 264秒 → 5-15秒 に短縮
         detect_js_animations: true,
         js_animation_options: {
           ...validated.motionOptions?.js_animation_options,
-          enableCDP: false, // CDP無効（高速化）
-          enableWebAnimations: false, // Web Animations API無効（高速化）
-          enableLibraryDetection: true, // ライブラリ検出のみ有効
-          waitTime: 500, // 短縮待機
+          enableCDP: false,
+          enableWebAnimations: false,
+          enableLibraryDetection: true,
+          waitTime: 500,
         },
-        // CSS解析は維持（高速）
-        // v0.1.0: ユーザーが明示的に指定した場合は尊重、それ以外はデフォルトfalse（タイムアウト防止）
         fetchExternalCss: effectiveFetchExternalCss,
-        maxPatterns: 50, // パターン数制限（メモリ節約）
+        maxPatterns: 50,
       };
 
       if (isDevelopment()) {
@@ -1072,19 +518,17 @@ export async function executeSyncProcessing(
       }
     }
 
-    // extendedContextにlayout_firstモード情報を含める
     const motionExtendedContext = useLayoutFirst ? { layoutFirstModeEnabled: true } : undefined;
 
     const motionPromise = detectMotion(
       sanitizedHtml,
       validated.url,
       effectiveMotionOptions,
-      undefined, // dbContext
-      motionExtendedContext, // extendedContext（layout_firstモード情報を含む）
-      preExtractedCssUrls // サニタイズ前に抽出した外部CSS URL
+      undefined,
+      motionExtendedContext,
+      preExtractedCssUrls
     );
 
-    // withTimeoutAndTracking で Motion 検出にタイムアウトを適用（ExecutionStatusTracker統合）
     analysisPromises.push(
       withTimeoutAndTracking(
         motionPromise,
@@ -1102,7 +546,6 @@ export async function executeSyncProcessing(
   if (features.quality !== false) {
     const qualityPromise = evaluateQuality(sanitizedHtml, validated.qualityOptions);
 
-    // withTimeoutAndTracking で Quality 評価にタイムアウトを適用（ExecutionStatusTracker統合）
     analysisPromises.push(
       withTimeoutAndTracking(
         qualityPromise,
@@ -1117,12 +560,10 @@ export async function executeSyncProcessing(
     );
   }
 
-  // 並列分析を実行（withTimeoutAndTrackingで個別にハンドリング済み）
-  // Strict戦略でエラーがスローされた場合はここでcatchされる
+  // 並列分析を実行
   try {
     await Promise.all(analysisPromises);
   } catch (error) {
-    // Strict戦略でタイムアウトまたはエラーが発生した場合
     if (timeoutStrategy === "strict") {
       const errorMessage = error instanceof Error ? error.message : "Analysis failed";
       logger.error("[page.analyze] Strict strategy: analysis failed", {
@@ -1137,298 +578,55 @@ export async function executeSyncProcessing(
         },
       };
     }
-    // Progressive戦略では例外は発生しないはずだが、念のため無視して継続
-  }
-
-  // 結果を統合
-  let layoutResult: LayoutResult | undefined;
-  let motionResult: MotionResult | undefined;
-  let qualityResult: QualityResult | undefined;
-  let narrativeResult: NarrativeResult | undefined;
-  let layoutServiceResultForSave: LayoutServiceResult | undefined;
-  let motionServiceResultForSave: MotionServiceResult | undefined;
-  let qualityServiceResultForSave: QualityServiceResult | undefined;
-  let narrativeHandlerResult: NarrativeHandlerResult | undefined;
-  const isSummary = validated.summary ?? true;
-
-  // Layout結果の処理
-  if (layoutServiceResult) {
-    layoutServiceResultForSave = layoutServiceResult;
-    layoutResult = buildLayoutResult(layoutServiceResult, isSummary, validated.layoutOptions);
-    const warning = extractWarning("layout", layoutServiceResult);
-    if (warning) warnings.push(warning);
   }
 
-  // Motion結果の処理
-  // Note: TypeScript control flow analysis doesn't track Promise.then() assignments,
-  // so we use explicit type assertion after the truthy check
-  if (motionServiceResult !== null) {
-    const motion = motionServiceResult as MotionServiceResult;
-    motionServiceResultForSave = motion;
-    motionResult = buildMotionResult(motion, isSummary);
-    const warning = extractWarning("motion", motion);
-    if (warning) warnings.push(warning);
-
-    // WebGL/Canvas検出警告（patternCount=0件 かつ detect_js_animations=false の場合）
-    const detectJsAnimations = validated.motionOptions?.detect_js_animations ?? true; // v0.1.0: デフォルトtrue
-    if (motion.patternCount === 0 && detectJsAnimations === false) {
-      warnings.push({
-        feature: "motion",
-        code: "WEBGL_DETECTION_DISABLED",
-        message:
-          "WebGL/Canvas animations may not be detected with current settings. Enable motionOptions.detect_js_animations: true for Three.js, GSAP, Lottie detection.",
-      });
-      if (isDevelopment()) {
-        logger.info("[MCP Tool] page.analyze WebGL detection warning added", {
-          patternCount: motion.patternCount,
-          detectJsAnimations,
-        });
-      }
-    }
-  }
+  // =====================================================
+  // 結果統合（sync-phase-handlers.ts）
+  // =====================================================
+  const integrated = integrateAnalysisResults({
+    layoutServiceResult,
+    motionServiceResult,
+    qualityServiceResult,
+    validated,
+    warnings,
+  });
 
-  // Quality結果の処理
-  if (qualityServiceResult) {
-    qualityServiceResultForSave = qualityServiceResult;
-    qualityResult = buildQualityResult(qualityServiceResult, isSummary, validated.qualityOptions);
-    const warning = extractWarning("quality", qualityServiceResult);
-    if (warning) warnings.push(warning);
-  }
+  const {
+    layoutResult,
+    motionResult,
+    qualityResult,
+    layoutServiceResultForSave,
+    motionServiceResultForSave,
+    qualityServiceResultForSave,
+  } = integrated;
 
   // =====================================================
-  // DB保存処理（saveToDb=true の場合、デフォルトでtrue）
+  // DB保存処理（sync-phase-handlers.ts）
   // =====================================================
   const layoutSaveToDb = validated.layoutOptions?.saveToDb !== false;
   const motionSaveToDb = validated.motionOptions?.saveToDb !== false;
-  let savedWebPageId: string | undefined;
-  // sectionIdMapping: 元のセクションID（section-0等）→ DB保存後のUUIDv7のマッピング
-  let savedSectionIdMapping: Map<string, string> | undefined;
-  // motionPatternIdMapping: 元のモーションパターンID（motion-0等）→ DB保存後のUUIDv7のマッピング
-  let savedMotionPatternIdMapping: Map<string, string> | undefined;
-  // backgroundDesignCount: DB保存された背景デザインの件数
-  let savedBackgroundDesignCount = 0;
-
-  if (layoutSaveToDb || motionSaveToDb) {
-    const prisma = deps.getPrismaClient();
-
-    if (prisma) {
-      // Vision分析結果を取得（全セクションで共有）
-      const visionFeaturesFromLayout = layoutServiceResultForSave?.visionFeatures;
-      // ページ全体のCSSスニペットを取得（全セクションで共有）
-      const pageCssSnippet = layoutServiceResultForSave?.cssSnippet;
-      // ページ全体の外部CSSコンテンツを取得（全セクションで共有）
-      const pageExternalCssContent = layoutServiceResultForSave?.externalCssContent;
-      // ページ全体の外部CSSメタ情報を取得（全セクションで共有）
-      const pageExternalCssMeta = layoutServiceResultForSave?.externalCssMeta;
-      // ページ全体のCSSフレームワーク検出結果を取得（全セクションで共有）
-      const pageCssFramework = layoutServiceResultForSave?.cssFramework;
-
-      if (isDevelopment()) {
-        logger.debug("[page.analyze] CSS info from layout analysis", {
-          hasCssSnippet: !!pageCssSnippet,
-          cssSnippetLength: pageCssSnippet?.length ?? 0,
-          hasExternalCssContent: !!pageExternalCssContent,
-          externalCssContentLength: pageExternalCssContent?.length ?? 0,
-          cssFramework: pageCssFramework?.framework,
-          cssFrameworkConfidence: pageCssFramework?.confidence,
-        });
-      }
-
-      // sectionsをDB保存用に変換（Vision分析結果 + CSSスニペット + CSSフレームワークを含む）
-      if (isDevelopment()) {
-        logger.debug("[page.analyze] sectionsForSave preparation", {
-          hasSections: !!layoutServiceResultForSave?.sections,
-          sectionCount: layoutServiceResultForSave?.sections?.length ?? 0,
-          pageCssFrameworkDetails: pageCssFramework
-            ? {
-                framework: pageCssFramework.framework,
-                confidence: pageCssFramework.confidence,
-                evidenceCount: pageCssFramework.evidence?.length ?? 0,
-              }
-            : null,
-        });
-      }
-      const sectionsForSave: SectionForSave[] =
-        layoutServiceResultForSave?.sections?.map((section) => {
-          const sectionForSave: SectionForSave = {
-            id: section.id,
-            type: section.type,
-            positionIndex: section.positionIndex,
-            heading: section.heading,
-            confidence: section.confidence,
-            // htmlSnippetはLayoutServiceResult経由でSectionDetectorから取得
-            htmlSnippet: section.htmlSnippet,
-          };
-
-          // ページ全体のCSSスニペットを各セクションに設定
-          // NOTE: CSS情報はページ全体から抽出されるため、各セクションに同じCSSを含める
-          if (pageCssSnippet !== undefined && pageCssSnippet.length > 0) {
-            sectionForSave.cssSnippet = pageCssSnippet;
-          }
-
-          if (pageExternalCssContent !== undefined && pageExternalCssContent.length > 0) {
-            sectionForSave.externalCssContent = pageExternalCssContent;
-          }
-
-          if (pageExternalCssMeta !== undefined) {
-            sectionForSave.externalCssMeta = pageExternalCssMeta;
-          }
-
-          // ページ全体のCSSフレームワーク検出結果を各セクションに設定
-          // NOTE: CSSフレームワークはページ全体で検出されるため、各セクションに同じ値を含める
-          if (pageCssFramework !== undefined) {
-            sectionForSave.cssFramework = pageCssFramework.framework;
-            sectionForSave.cssFrameworkMeta = {
-              confidence: pageCssFramework.confidence,
-              evidence: pageCssFramework.evidence,
-            };
-          }
-
-          // Vision分析結果がある場合はセクションに含める
-          // NOTE: Vision分析はページ全体の解析結果のため、各セクションに同じ結果を含める
-          // 将来的にはセクションごとの分析結果を持つように拡張可能
-          if (visionFeaturesFromLayout && visionFeaturesFromLayout.success) {
-            const visionFeatures: SectionForSave["visionFeatures"] = {
-              success: visionFeaturesFromLayout.success,
-              features: visionFeaturesFromLayout.features,
-            };
-            // exactOptionalPropertyTypes対応: undefinedの場合はプロパティを含めない
-            if (layoutServiceResultForSave?.textRepresentation !== undefined) {
-              visionFeatures.textRepresentation = layoutServiceResultForSave.textRepresentation;
-            }
-            if (visionFeaturesFromLayout.processingTimeMs !== undefined) {
-              visionFeatures.processingTimeMs = visionFeaturesFromLayout.processingTimeMs;
-            }
-            if (visionFeaturesFromLayout.modelName !== undefined) {
-              visionFeatures.modelName = visionFeaturesFromLayout.modelName;
-            }
-            sectionForSave.visionFeatures = visionFeatures;
-          }
-
-          return sectionForSave;
-        }) ?? [];
-
-      // sectionsForSaveの内容を確認（cssFrameworkが設定されているか）
-      if (isDevelopment()) {
-        const sectionsWithCssFramework = sectionsForSave.filter(
-          (s) => s.cssFramework !== undefined
-        );
-        logger.debug("[page.analyze] sectionsForSave created", {
-          totalSections: sectionsForSave.length,
-          sectionsWithCssFramework: sectionsWithCssFramework.length,
-          firstSectionCssFramework: sectionsForSave[0]?.cssFramework ?? "not set",
-          firstSectionHasCssFrameworkMeta: !!sectionsForSave[0]?.cssFrameworkMeta,
-        });
-      }
-
-      // motionPatternsをDB保存用に変換
-      const motionPatternsForSave: MotionPatternForSave[] =
-        motionServiceResultForSave?.patterns?.map((pattern) => ({
-          id: pattern.id,
-          name: pattern.name,
-          type: pattern.type,
-          category: pattern.category,
-          trigger: pattern.trigger,
-          duration: pattern.duration,
-          easing: pattern.easing,
-          properties: pattern.properties,
-          propertiesDetailed: pattern.propertiesDetailed,
-          rawCss: undefined, // MotionServiceResultにはrawCssが含まれていない
-          performance: pattern.performance,
-          accessibility: pattern.accessibility,
-        })) ?? [];
-
-      // ページ全体のvisualFeatures（Phase 3-2追加）
-      // layoutServiceResultForSaveから取得し、各セクションのvisualFeaturesカラムに保存
-      const pageVisualFeatures = layoutServiceResultForSave?.visualFeatures;
-
-      if (isDevelopment() && pageVisualFeatures) {
-        logger.debug("[page.analyze] visualFeatures from layout analysis", {
-          hasColors: !!pageVisualFeatures.colors,
-          hasTheme: !!pageVisualFeatures.theme,
-          hasDensity: !!pageVisualFeatures.density,
-          hasGradient: !!pageVisualFeatures.gradient,
-          hasMood: !!pageVisualFeatures.mood,
-          hasBrandTone: !!pageVisualFeatures.brandTone,
-        });
-      }
 
-      // 背景デザイン検出結果をDB保存用に変換
-      const backgroundDesignsForSave: BackgroundDesignForSave[] | undefined =
-        layoutServiceResultForSave?.backgroundDesigns?.map((bg) => ({
-          name: bg.name,
-          designType: bg.designType,
-          cssValue: bg.cssValue,
-          selector: bg.selector,
-          positionIndex: bg.positionIndex,
-          colorInfo: bg.colorInfo as unknown as Record<string, unknown>,
-          gradientInfo: bg.gradientInfo as unknown as Record<string, unknown> | undefined,
-          visualProperties: bg.visualProperties as unknown as Record<string, unknown>,
-          animationInfo: bg.animationInfo as unknown as Record<string, unknown> | undefined,
-          cssImplementation: bg.cssImplementation,
-          performance: bg.performance as unknown as Record<string, unknown>,
-          confidence: bg.confidence,
-          sourceUrl: validated.url,
-          usageScope: validated.usageScope ?? "inspiration_only",
-        }));
-
-      const saveResult = await saveToDatabase(prisma, {
-        url: normalizeUrlForStorage(normalizedUrl),
-        title: metadata.title,
-        htmlContent: sanitizedHtml,
-        screenshot: fetchedScreenshot,
-        sourceType: validated.sourceType ?? "user_provided",
-        usageScope: validated.usageScope ?? "inspiration_only",
-        layoutSaveToDb,
-        motionSaveToDb,
-        sections: sectionsForSave,
-        motionPatterns: motionPatternsForSave,
-        qualityResult: qualityServiceResultForSave,
-        visualFeatures: pageVisualFeatures,
-        backgroundDesigns: backgroundDesignsForSave,
-      });
-
-      if (saveResult.success) {
-        savedWebPageId = saveResult.webPageId;
-        savedSectionIdMapping = saveResult.sectionIdMapping;
-        savedMotionPatternIdMapping = saveResult.motionPatternIdMapping;
-        savedBackgroundDesignCount = saveResult.backgroundDesignCount ?? 0;
+  const dbResult = await handleDatabasePersistence({
+    prisma: deps.getPrismaClient(),
+    normalizedUrl,
+    sanitizedHtml,
+    metadata,
+    fetchedScreenshot,
+    validated,
+    layoutSaveToDb,
+    motionSaveToDb,
+    layoutServiceResult: layoutServiceResultForSave,
+    motionServiceResult: motionServiceResultForSave,
+    qualityServiceResult: qualityServiceResultForSave,
+    warnings,
+  });
 
-        if (isDevelopment()) {
-          logger.info("[page.analyze] DB save completed", {
-            webPageId: saveResult.webPageId,
-            sectionPatternCount: saveResult.sectionPatternCount,
-            motionPatternCount: saveResult.motionPatternCount,
-            backgroundDesignCount: saveResult.backgroundDesignCount,
-            qualityEvaluationId: saveResult.qualityEvaluationId,
-            sectionIdMappingSize: savedSectionIdMapping?.size ?? 0,
-            motionPatternIdMappingSize: savedMotionPatternIdMapping?.size ?? 0,
-          });
-        }
-      } else {
-        // Graceful Degradation: 保存失敗を警告に記録
-        warnings.push({
-          feature: "layout", // DB保存はlayout機能の一部として扱う
-          code: PAGE_ANALYZE_ERROR_CODES.DB_SAVE_FAILED,
-          message: saveResult.error ?? "Failed to save to database",
-        });
-
-        if (isDevelopment()) {
-          logger.warn("[page.analyze] DB save failed (graceful degradation)", {
-            error: saveResult.error,
-          });
-        }
-      }
-    } else {
-      // PrismaClientが未設定の場合はスキップ（Graceful Degradation）
-      logger.warn("[page.analyze] DB save skipped: database connection not configured");
-      warnings.push({
-        feature: "layout",
-        code: PAGE_ANALYZE_ERROR_CODES.DB_NOT_CONFIGURED,
-        message: "DB save skipped: database connection not configured. Data will not be persisted.",
-      });
-    }
-  }
+  const {
+    savedWebPageId,
+    savedSectionIdMapping,
+    savedMotionPatternIdMapping,
+    savedBackgroundDesignCount,
+  } = dbResult;
 
   // layoutResultにpageIdを設定（保存成功時）
   if (savedWebPageId && layoutResult) {
@@ -1436,630 +634,82 @@ export async function executeSyncProcessing(
   }
 
   // =====================================================
-  // Embedding生成・保存（autoAnalyze / saveToDb オプション時）
+  // Embedding生成（sync-phase-handlers.ts）
   // =====================================================
-
-  // SectionEmbedding生成・保存（autoAnalyze=true（デフォルト） かつ saveToDb=true かつ IDマッピングがある場合）
-  // ロジックはembedding-handler.tsに分離
   const autoAnalyze = validated.layoutOptions?.autoAnalyze !== false;
 
-  if (
-    autoAnalyze &&
-    layoutSaveToDb &&
-    layoutServiceResultForSave?.success &&
-    layoutServiceResultForSave.sections &&
-    savedSectionIdMapping &&
-    savedSectionIdMapping.size > 0
-  ) {
-    // ページレベルのvisualFeaturesを取得（Phase 3-3: visualFeatures伝播）
-    const pageVisualFeaturesForEmbedding = layoutServiceResultForSave.visualFeatures;
-
-    // sectionsにvisualFeaturesを伝播してSectionDataForEmbedding[]を作成
-    // db-handler.tsと同様に、ページレベルのvisualFeaturesを各セクションに適用
-    const sectionsWithVisualFeatures: SectionDataForEmbedding[] =
-      layoutServiceResultForSave.sections.map((section) => {
-        // exactOptionalPropertyTypes対応: 明示的にオブジェクトを構築
-        const sectionForEmbedding: SectionDataForEmbedding = {
-          id: section.id,
-          type: section.type,
-          positionIndex: section.positionIndex,
-          confidence: section.confidence,
-        };
-
-        // オプショナルフィールドは存在する場合のみ設定
-        if (section.heading !== undefined) {
-          sectionForEmbedding.heading = section.heading;
-        }
-        if (section.htmlSnippet !== undefined) {
-          sectionForEmbedding.htmlSnippet = section.htmlSnippet;
-        }
-
-        // セクション固有のvisualFeaturesがある場合はそれを使用、なければページレベルを使用
-        // NOTE: 現在はセクション固有のvisualFeaturesはないため、常にページレベルを使用
-        if (pageVisualFeaturesForEmbedding !== undefined) {
-          sectionForEmbedding.visualFeatures = pageVisualFeaturesForEmbedding;
-        }
-
-        return sectionForEmbedding;
-      });
-
-    if (isDevelopment()) {
-      logger.debug("[page.analyze] Propagating visualFeatures to sections for embedding", {
-        sectionCount: sectionsWithVisualFeatures.length,
-        hasPageVisualFeatures: !!pageVisualFeaturesForEmbedding,
-        pageVisualFeaturesKeys: pageVisualFeaturesForEmbedding
-          ? Object.keys(pageVisualFeaturesForEmbedding)
-          : [],
-      });
-    }
-
-    // 分離されたハンドラーを呼び出し（visualFeatures伝播済みのセクションを渡す）
-    // MCP 600秒ガード: 残り時間が不足していればスキップ
-    const sectionEmbeddingRemaining = Math.max(0, 570000 - (Date.now() - overallStartTime));
-    if (sectionEmbeddingRemaining < 10000) {
-      warnings.push({
-        feature: "layout",
-        code: "EMBEDDING_SKIPPED",
-        message: `Section embedding generation skipped: insufficient time remaining (${sectionEmbeddingRemaining}ms)`,
-      });
-    } else {
-      try {
-        await withTimeout(
-          generateSectionEmbeddings(sectionsWithVisualFeatures, savedSectionIdMapping, {
-            webPageId: savedWebPageId,
-          }),
-          Math.min(60000, sectionEmbeddingRemaining),
-          "section-embedding-generation"
-        );
-      } catch (embeddingError) {
-        const msg =
-          embeddingError instanceof Error ? embeddingError.message : String(embeddingError);
-        warnings.push({
-          feature: "layout",
-          code: "EMBEDDING_TIMEOUT",
-          message: `Section embedding generation failed: ${msg}`,
-        });
-        logger.warn("[page.analyze] Section embedding generation failed", { error: msg });
-      }
-    }
-  }
-
-  // MotionEmbedding生成・保存（saveToDb=true かつ IDマッピングがある場合）
-  // ロジックはembedding-handler.tsに分離
-  // 注意: db-handler.tsでMotionPatternは既に保存済み。ここではEmbedding生成・保存のみ実行
-  if (
-    motionSaveToDb &&
-    motionServiceResultForSave?.success &&
-    motionServiceResultForSave.patterns &&
-    savedMotionPatternIdMapping &&
-    savedMotionPatternIdMapping.size > 0
-  ) {
-    const patterns = motionServiceResultForSave.patterns as MotionPatternForEmbedding[];
-
-    // 分離されたハンドラーを呼び出し（motionPatternIdMappingを渡してEmbedding生成のみ実行）
-    // MCP 600秒ガード: 残り時間が不足していればスキップ
-    const motionEmbeddingRemaining = Math.max(0, 570000 - (Date.now() - overallStartTime));
-    if (motionEmbeddingRemaining < 10000) {
-      warnings.push({
-        feature: "motion",
-        code: "EMBEDDING_SKIPPED",
-        message: `Motion embedding generation skipped: insufficient time remaining (${motionEmbeddingRemaining}ms)`,
-      });
-    } else {
-      try {
-        await withTimeout(
-          generateMotionEmbeddings(patterns, {
-            webPageId: savedWebPageId,
-            sourceUrl: validated.url,
-            motionPatternIdMapping: savedMotionPatternIdMapping,
-          }),
-          Math.min(60000, motionEmbeddingRemaining),
-          "motion-embedding-generation"
-        );
-      } catch (embeddingError) {
-        const msg =
-          embeddingError instanceof Error ? embeddingError.message : String(embeddingError);
-        warnings.push({
-          feature: "motion",
-          code: "EMBEDDING_TIMEOUT",
-          message: `Motion embedding generation failed: ${msg}`,
-        });
-        logger.warn("[page.analyze] Motion embedding generation failed", { error: msg });
-      }
-    }
-  }
+  await handleEmbeddingGeneration({
+    autoAnalyze,
+    layoutSaveToDb,
+    motionSaveToDb,
+    layoutServiceResult: layoutServiceResultForSave,
+    motionServiceResult: motionServiceResultForSave,
+    savedSectionIdMapping,
+    savedMotionPatternIdMapping,
+    savedWebPageId,
+    validated,
+    overallStartTime,
+    warnings,
+  });
 
   // =====================================================
-  // VideoMode DB保存処理（motionOptions.saveToDb=true かつ frame_analysis あり）
+  // VideoMode / JSアニメーション DB保存（sync-phase-handlers.ts）
   // =====================================================
-  // 共有ヘルパー関数でフレーム画像分析結果（AnimationZone, LayoutShift, MotionVector）を保存
-  // MotionDbService は Embedding を自動生成するため、明示的な生成は不要
-  if (motionSaveToDb && motionServiceResultForSave?.success) {
-    const frameAnalysis = motionServiceResultForSave.frame_analysis;
-    if (frameAnalysis && savedWebPageId) {
-      const frameAnalysisSaveResult = await saveFrameAnalysisToDb({
-        frameAnalysis,
-        frameCapture: motionServiceResultForSave.frame_capture,
-        webPageId: savedWebPageId,
-        sourceUrl: validated.url,
-      });
-
-      // 保存失敗時はwarningsに記録（Graceful Degradation）
-      if (!frameAnalysisSaveResult.saved) {
-        if (frameAnalysisSaveResult.error) {
-          warnings.push({
-            feature: "motion",
-            code: "FRAME_ANALYSIS_DB_SAVE_ERROR",
-            message: frameAnalysisSaveResult.error,
-          });
-        } else if (frameAnalysisSaveResult.skipped) {
-          if (isDevelopment()) {
-            logger.warn("[page.analyze] Frame analysis DB save skipped", {
-              reason: frameAnalysisSaveResult.skipped,
-            });
-          }
-        } else if (frameAnalysisSaveResult.batchResult?.reason) {
-          warnings.push({
-            feature: "motion",
-            code: "FRAME_ANALYSIS_DB_SAVE_FAILED",
-            message: frameAnalysisSaveResult.batchResult.reason,
-          });
-        }
-      }
-    }
-
-    // =====================================================
-    // JSアニメーションパターン DB保存処理（saveToDb=true かつ js_animations あり）
-    // =====================================================
-    // JSアニメーション検出結果をJSAnimationPatternテーブルに保存
-    const jsAnimations = motionServiceResultForSave?.js_animations;
-    const jsAnimationPrisma = deps.getPrismaClient();
-    if (jsAnimations && savedWebPageId && jsAnimationPrisma) {
-      try {
-        if (isDevelopment()) {
-          logger.info("[page.analyze] Starting JS animation patterns DB save", {
-            webPageId: savedWebPageId,
-            cdpAnimationCount: jsAnimations.cdpAnimations?.length ?? 0,
-            webAnimationCount: jsAnimations.webAnimations?.length ?? 0,
-            totalDetected: jsAnimations.totalDetected ?? 0,
-          });
-        }
-
-        // JSAnimationFullResultをJSAnimationPatternCreateDataの配列に変換
-        const jsAnimationPatterns = mapJSAnimationResultToPatterns(
-          jsAnimations,
-          savedWebPageId,
-          validated.url
-        );
-
-        // DBに保存（Embedding生成含む）
-        if (jsAnimationPatterns.length > 0) {
-          const saveResult = await saveJSAnimationPatternsWithEmbeddings(
-            jsAnimationPrisma,
-            jsAnimationPatterns,
-            savedWebPageId,
-            { generateEmbedding: true } // Embedding生成を有効化
-          );
-
-          if (isDevelopment()) {
-            logger.info("[page.analyze] JS animation patterns DB save completed", {
-              savedPatternCount: saveResult.savedPatternCount,
-              embeddingCount: saveResult.embeddingCount,
-              totalPatterns: jsAnimationPatterns.length,
-              webPageId: savedWebPageId,
-            });
-          }
-        }
-      } catch (jsAnimDbError) {
-        // JSアニメーションDB保存失敗（Graceful Degradation）
-        logger.warn("[page.analyze] JS animation patterns DB save failed (graceful degradation)", {
-          error: jsAnimDbError instanceof Error ? jsAnimDbError.message : "Unknown error",
-        });
-
-        warnings.push({
-          feature: "motion",
-          code: "JS_ANIMATION_DB_SAVE_ERROR",
-          message:
-            jsAnimDbError instanceof Error ? jsAnimDbError.message : "JS animation DB save failed",
-        });
-      }
-    }
-  }
+  await handleMotionPersistenceExtras({
+    motionSaveToDb,
+    motionServiceResult: motionServiceResultForSave,
+    savedWebPageId,
+    validated,
+    getPrismaClient: deps.getPrismaClient,
+    warnings,
+  });
 
   // =====================================================
-  // Narrative分析（v0.1.0: narrativeOptions.enabled=true の場合）
+  // Narrative分析（sync-phase-handlers.ts）
   // =====================================================
-  // NarrativeAnalysisServiceを使用してWebページの
-  // 「世界観・雰囲気（WorldView）」と「レイアウト構成（LayoutStructure）」を分析
-  // NOTE: DB保存後に実行することで、saveToDb=trueの場合にwebPageIdを利用可能
-  // NOTE: narrativeOptions.enabledはデフォルトでtrue（Zodスキーマで設定）
-  // v0.1.0: ?.演算子ではなく !== false でチェック（undefined/true の両方で有効化）
-  const narrativeEnabled = validated.narrativeOptions?.enabled !== false;
-  if (narrativeEnabled) {
-    if (isDevelopment()) {
-      logger.info("[page.analyze] Starting narrative analysis", {
-        saveToDb: validated.narrativeOptions.saveToDb,
-        includeVision: validated.narrativeOptions.includeVision,
-        visionTimeoutMs: validated.narrativeOptions.visionTimeoutMs,
-        generateEmbedding: validated.narrativeOptions.generateEmbedding,
-        webPageId: savedWebPageId,
-      });
-    }
-
-    // Narrative分析用の入力を準備
-    const narrativeInput: NarrativeHandlerInput = {
-      html,
-      narrativeOptions: validated.narrativeOptions,
-    };
-
-    // exactOptionalPropertyTypes対応: undefinedのプロパティは含めない
-    if (fetchedScreenshot !== undefined) {
-      narrativeInput.screenshot = fetchedScreenshot;
-    }
-
-    // webPageIdがある場合は渡す（saveToDb=trueの場合に必要）
-    if (savedWebPageId !== undefined) {
-      narrativeInput.webPageId = savedWebPageId;
-    }
-
-    // 既存の分析結果を渡す（Narrative分析の精度向上のため）
-    // NOTE: layoutServiceResultForSaveを使用（DB保存用に保持された結果）
-    if (layoutServiceResultForSave || motionServiceResultForSave) {
-      narrativeInput.existingAnalysis = {};
-      if (layoutServiceResultForSave?.cssVariables) {
-        narrativeInput.existingAnalysis.cssVariables = layoutServiceResultForSave.cssVariables;
-      }
-      if (motionServiceResultForSave) {
-        narrativeInput.existingAnalysis.motionPatterns = motionServiceResultForSave;
-      }
-      if (layoutServiceResultForSave?.sections) {
-        narrativeInput.existingAnalysis.sections = layoutServiceResultForSave.sections;
-      }
-      if (layoutServiceResultForSave?.visionFeatures) {
-        narrativeInput.existingAnalysis.visualFeatures = layoutServiceResultForSave.visionFeatures;
-      }
-    }
-
-    // 外部CSSがある場合は渡す
-    if (layoutServiceResultForSave?.externalCssContent) {
-      narrativeInput.externalCss = layoutServiceResultForSave.externalCssContent;
-    }
-
-    try {
-      // MCP 600秒ガード: Narrative分析のタイムアウトを残り時間に基づいて設定
-      const narrativeRemaining = Math.max(0, 570000 - (Date.now() - overallStartTime));
-      if (narrativeRemaining < 15000) {
-        // 残り時間が15秒未満ならNarrative分析をスキップ
-        warnings.push({
-          feature: "quality",
-          code: "NARRATIVE_SKIPPED",
-          message: `Narrative analysis skipped: insufficient time remaining (${narrativeRemaining}ms)`,
-        });
-        if (isDevelopment()) {
-          logger.warn("[page.analyze] Narrative analysis skipped due to insufficient time", {
-            remainingMs: narrativeRemaining,
-            elapsedMs: Date.now() - overallStartTime,
-          });
-        }
-      } else {
-        // Narrative分析のタイムアウト: 残り時間とvisionTimeoutMsの小さい方を使用
-        const narrativeTimeout = Math.min(
-          validated.narrativeOptions?.visionTimeoutMs ?? 300000,
-          narrativeRemaining
-        );
-        narrativeHandlerResult = await withTimeout(
-          handleNarrativeAnalysis(narrativeInput),
-          narrativeTimeout,
-          "narrative-analysis"
-        );
-      }
-
-      if (narrativeHandlerResult?.success && narrativeHandlerResult.narrative) {
-        narrativeResult = buildNarrativeResult(narrativeHandlerResult, isSummary);
-
-        if (isDevelopment() && narrativeResult) {
-          logger.info("[page.analyze] Narrative analysis completed", {
-            moodCategory: narrativeResult.worldView?.moodCategory,
-            confidence: narrativeResult.confidence,
-            processingTimeMs: narrativeHandlerResult.processingTimeMs,
-            savedId: narrativeHandlerResult.savedId,
-          });
-        }
-      } else if (narrativeHandlerResult?.skipped) {
-        if (isDevelopment()) {
-          logger.debug("[page.analyze] Narrative analysis skipped (enabled=false)");
-        }
-      } else if (narrativeHandlerResult?.error) {
-        // Narrative分析失敗は警告として記録し、他の分析結果は返す
-        // NOTE: narrativeはfeature enumに含まれていないため、コード + メッセージのみ記録
-        warnings.push({
-          feature: "quality", // narrativeはQuality系機能として分類
-          code: narrativeHandlerResult.error.code,
-          message: `Narrative analysis failed: ${narrativeHandlerResult.error.message}`,
-        });
-
-        if (isDevelopment()) {
-          logger.warn("[page.analyze] Narrative analysis failed", {
-            code: narrativeHandlerResult.error.code,
-            message: narrativeHandlerResult.error.message,
-          });
-        }
-      }
-    } catch (narrativeError) {
-      // タイムアウトまたは予期しないエラーは警告として記録
-      const isTimeout = narrativeError instanceof PhaseTimeoutError;
-      const errorMessage =
-        narrativeError instanceof Error ? narrativeError.message : String(narrativeError);
-      warnings.push({
-        feature: "quality", // narrativeはQuality系機能として分類
-        code: isTimeout ? "NARRATIVE_TIMEOUT" : "NARRATIVE_UNEXPECTED_ERROR",
-        message: isTimeout
-          ? `Narrative analysis timed out: ${errorMessage}`
-          : `Unexpected error in narrative analysis: ${errorMessage}`,
-      });
-
-      if (isDevelopment()) {
-        logger.error("[page.analyze] Unexpected narrative analysis error", {
-          error: errorMessage,
-        });
-      }
-    }
-  }
+  const isSummary = validated.summary ?? true;
+  const { narrativeResult } = await handleNarrativePhase({
+    validated,
+    html,
+    fetchedScreenshot,
+    savedWebPageId,
+    layoutServiceResult: layoutServiceResultForSave,
+    motionServiceResult: motionServiceResultForSave,
+    overallStartTime,
+    isSummary,
+    warnings,
+  });
 
   // =====================================================
-  // 注: ExecutionStatus更新はwithTimeoutAndTracking内で自動的に行われる
-  // markCompleted/markFailedがPromise完了/失敗時に呼び出される
+  // Responsive分析（sync-phase-handlers.ts）
   // =====================================================
+  const { responsiveAnalysisResult, responsiveAnalysisId } = await handleResponsivePhase({
+    validated,
+    savedWebPageId,
+    overallStartTime,
+    warnings,
+  });
 
   // =====================================================
-  // レスポンシブ分析（responsiveOptions.enabled=true の場合）
+  // レスポンス構築（sync-phase-handlers.ts）
   // =====================================================
-  let responsiveAnalysisResult: ResponsiveAnalysisResult | undefined;
-  let responsiveAnalysisId: string | undefined;
-
-  if (validated.responsiveOptions?.enabled === true) {
-    const responsiveRemaining = Math.max(0, 570000 - (Date.now() - overallStartTime));
-    if (responsiveRemaining < 15000) {
-      warnings.push({
-        feature: "layout",
-        code: "RESPONSIVE_SKIPPED",
-        message: `Responsive analysis skipped: insufficient time remaining (${responsiveRemaining}ms)`,
-      });
-    } else {
-      try {
-        // SSRF対策: URLを検証
-        const urlValidation = validateExternalUrl(validated.url);
-        if (!urlValidation.valid) {
-          warnings.push({
-            feature: "layout",
-            code: "RESPONSIVE_SSRF_BLOCKED",
-            message: `レスポンシブ分析スキップ: ${urlValidation.error}`,
-          });
-        } else {
-          // robots.txt チェック
-          const robotsResult = await isUrlAllowedByRobotsTxt(
-            validated.url,
-            validated.respect_robots_txt
-          );
-          if (!robotsResult.allowed) {
-            warnings.push({
-              feature: "layout",
-              code: "RESPONSIVE_ROBOTS_BLOCKED",
-              message: `レスポンシブ分析スキップ: robots.txtによりブロック (${robotsResult.reason})`,
-            });
-          } else {
-            if (isDevelopment()) {
-              logger.info("[page.analyze] Starting responsive analysis", {
-                url: validated.url,
-                viewports: validated.responsiveOptions.viewports?.map((v) => v.name) ?? [
-                  "desktop",
-                  "tablet",
-                  "mobile",
-                ],
-              });
-            }
-
-            // crawl-delay を取得（秒→ミリ秒変換、上限30秒）
-            const MAX_CRAWL_DELAY_MS = 30000;
-            const crawlDelayMs =
-              robotsResult.crawlDelay !== undefined
-                ? Math.min(robotsResult.crawlDelay * 1000, MAX_CRAWL_DELAY_MS)
-                : undefined;
-
-            // レスポンシブ分析オプションを構築
-            const responsiveOpts: {
-              enabled: boolean;
-              viewports?: Array<{ name: string; width: number; height: number }>;
-              include_screenshots?: boolean;
-              include_diff_images?: boolean;
-              diff_threshold?: number;
-              detect_navigation?: boolean;
-              detect_visibility?: boolean;
-              detect_layout?: boolean;
-              crawlDelayMs?: number;
-            } = { enabled: true };
-
-            if (validated.responsiveOptions.viewports !== undefined) {
-              responsiveOpts.viewports = validated.responsiveOptions.viewports;
-            }
-            if (validated.responsiveOptions.include_screenshots !== undefined) {
-              responsiveOpts.include_screenshots = validated.responsiveOptions.include_screenshots;
-            }
-            if (validated.responsiveOptions.include_diff_images !== undefined) {
-              responsiveOpts.include_diff_images = validated.responsiveOptions.include_diff_images;
-            }
-            if (validated.responsiveOptions.diff_threshold !== undefined) {
-              responsiveOpts.diff_threshold = validated.responsiveOptions.diff_threshold;
-            }
-            if (validated.responsiveOptions.detect_navigation !== undefined) {
-              responsiveOpts.detect_navigation = validated.responsiveOptions.detect_navigation;
-            }
-            if (validated.responsiveOptions.detect_visibility !== undefined) {
-              responsiveOpts.detect_visibility = validated.responsiveOptions.detect_visibility;
-            }
-            if (validated.responsiveOptions.detect_layout !== undefined) {
-              responsiveOpts.detect_layout = validated.responsiveOptions.detect_layout;
-            }
-            if (crawlDelayMs !== undefined) {
-              responsiveOpts.crawlDelayMs = crawlDelayMs;
-            }
-
-            responsiveAnalysisResult = await withTimeout(
-              responsiveAnalysisService.analyze(validated.url, responsiveOpts),
-              Math.min(responsiveRemaining, 120000), // 最大2分
-              "responsive-analysis"
-            );
-
-            if (isDevelopment()) {
-              logger.info("[page.analyze] Responsive analysis completed", {
-                viewportsAnalyzed: responsiveAnalysisResult.viewportsAnalyzed.length,
-                differencesFound: responsiveAnalysisResult.differences.length,
-                breakpointsDetected: responsiveAnalysisResult.breakpoints.length,
-                analysisTimeMs: responsiveAnalysisResult.analysisTimeMs,
-              });
-            }
-
-            // DB保存（save_to_db=true かつ webPageIdがある場合）
-            const responsiveSaveToDb = validated.responsiveOptions.save_to_db ?? true;
-            if (responsiveSaveToDb && savedWebPageId) {
-              try {
-                responsiveAnalysisId = await responsivePersistenceService.save(
-                  savedWebPageId,
-                  responsiveAnalysisResult
-                );
-
-                if (isDevelopment()) {
-                  logger.info("[page.analyze] Responsive analysis saved to DB", {
-                    responsiveAnalysisId,
-                    webPageId: savedWebPageId,
-                  });
-                }
-              } catch (responsiveDbError) {
-                logger.warn("[page.analyze] Responsive DB save failed (graceful degradation)", {
-                  error:
-                    responsiveDbError instanceof Error
-                      ? responsiveDbError.message
-                      : "Unknown error",
-                });
-                warnings.push({
-                  feature: "layout",
-                  code: "RESPONSIVE_DB_SAVE_FAILED",
-                  message:
-                    responsiveDbError instanceof Error
-                      ? responsiveDbError.message
-                      : "Responsive DB save failed",
-                });
-              }
-            }
-          }
-        }
-      } catch (responsiveError) {
-        const isTimeout = responsiveError instanceof PhaseTimeoutError;
-        const errorMessage =
-          responsiveError instanceof Error ? responsiveError.message : String(responsiveError);
-        warnings.push({
-          feature: "layout",
-          code: isTimeout ? "RESPONSIVE_TIMEOUT" : "RESPONSIVE_ERROR",
-          message: isTimeout
-            ? `Responsive analysis timed out: ${errorMessage}`
-            : `Responsive analysis failed: ${errorMessage}`,
-        });
-
-        if (isDevelopment()) {
-          logger.warn("[page.analyze] Responsive analysis failed (graceful degradation)", {
-            error: errorMessage,
-          });
-        }
-      }
-    }
-  }
-
-  // レスポンス構築
-  const data: PageAnalyzeData = {
-    id: uuidv7(),
-    url: validated.url,
+  const data = buildPageAnalyzeResponse({
+    validated,
     normalizedUrl,
     metadata,
-    source: {
-      type: validated.sourceType ?? "user_provided",
-      usageScope: validated.usageScope ?? "inspiration_only",
-    },
-    totalProcessingTimeMs: Date.now() - overallStartTime,
-    analyzedAt: new Date().toISOString(),
-    // v0.1.0: ExecutionStatusを追加
-    execution_status: executionTracker.toExecutionStatus(),
-  };
-
-  if (layoutResult) {
-    data.layout = layoutResult;
-  }
-
-  if (motionResult) {
-    data.motion = motionResult;
-  }
-
-  if (qualityResult) {
-    data.quality = qualityResult;
-  }
-
-  // v0.1.0: Narrative結果を追加
-  if (narrativeResult) {
-    data.narrative = narrativeResult;
-  }
-
-  // 背景デザイン検出サマリーを追加
-  const backgroundDesignsSummary = buildBackgroundDesignsSummary(
-    layoutServiceResultForSave?.backgroundDesigns,
-    savedBackgroundDesignCount
-  );
-  if (backgroundDesignsSummary) {
-    data.backgroundDesigns = backgroundDesignsSummary;
-  }
-
-  // レスポンシブ分析結果を追加（responsiveOptions.enabled=true時のみ）
-  if (responsiveAnalysisResult) {
-    // ResponsiveDifference[] → Zodスキーマ互換の型に変換（passthrough index signature対応）
-    const differences = responsiveAnalysisResult.differences.map((d) => ({
-      element: d.element,
-      description: d.description,
-      category: d.category,
-      ...(d.desktop !== undefined ? { desktop: d.desktop } : {}),
-      ...(d.tablet !== undefined ? { tablet: d.tablet } : {}),
-      ...(d.mobile !== undefined ? { mobile: d.mobile } : {}),
-    }));
-
-    const responsiveData: NonNullable<PageAnalyzeData["responsiveAnalysis"]> = {
-      viewportsAnalyzed: responsiveAnalysisResult.viewportsAnalyzed.map((v) => v.name),
-      differences,
-      breakpoints: responsiveAnalysisResult.breakpoints,
-      analysisTimeMs: responsiveAnalysisResult.analysisTimeMs,
-    };
-    if (responsiveAnalysisId) {
-      responsiveData.responsiveAnalysisId = responsiveAnalysisId;
-    }
-    data.responsiveAnalysis = responsiveData;
-  }
-
-  if (warnings.length > 0) {
-    data.warnings = warnings;
-  }
-
-  // v0.1.0: Pre-flight Probe結果を追加（auto_timeout=true時のみ）
-  if (probeResult) {
-    data.preflightProbe = {
-      calculatedTimeoutMs: probeResult.calculatedTimeoutMs,
-      complexityScore: probeResult.complexityScore,
-      hasWebGL: probeResult.hasWebGL,
-      hasSPA: probeResult.hasSPA,
-      hasHeavyFramework: probeResult.hasHeavyFramework,
-      probedAt: probeResult.probedAt,
-      probeVersion: probeResult.probeVersion,
-      htmlSizeBytes: probeResult.htmlSizeBytes,
-      scriptCount: probeResult.scriptCount,
-      externalResourceCount: probeResult.externalResourceCount,
-      responseTimeMs: probeResult.responseTimeMs,
-    };
-  }
+    overallStartTime,
+    executionTracker,
+    layoutResult,
+    motionResult,
+    qualityResult,
+    narrativeResult,
+    responsiveAnalysisResult,
+    responsiveAnalysisId,
+    layoutServiceResult: layoutServiceResultForSave,
+    savedBackgroundDesignCount,
+    probeResult,
+    warnings,
+  });
 
   if (isDevelopment()) {
     logger.info("[MCP Tool] page.analyze completed", {
@@ -2069,7 +719,7 @@ export async function executeSyncProcessing(
       hasQuality: !!qualityResult,
       hasNarrative: !!narrativeResult,
       hasResponsive: !!responsiveAnalysisResult,
-      backgroundDesignCount: backgroundDesignsSummary?.count ?? 0,
+      backgroundDesignCount: data.backgroundDesigns?.count ?? 0,
       warningCount: warnings.length,
       totalProcessingTimeMs: data.totalProcessingTimeMs,
       autoTimeout: validated.auto_timeout,