@reshotdev/screenshot 0.0.1-beta.2 → 0.0.1-beta.20

package/src/lib/ui-api.js

@@ -36,118 +36,20 @@ const {
   applyStyle,
   isStyleAvailable,
 } = require("./style-engine");
-
-/**
- * Get the platform URL from settings, falling back to localhost for development
- * @param {Object} settings - CLI settings object
- * @returns {string} Platform URL
- */
-function getPlatformUrl(settings) {
-  // Priority: settings.platformUrl > env var > localhost default
-  if (settings?.platformUrl) {
-    return settings.platformUrl;
-  }
-  const envUrl =
-    process.env.RESHOT_API_BASE_URL || process.env.DOCSYNC_API_BASE_URL;
-  if (envUrl) {
-    // Remove /api suffix if present to get platform URL
-    return envUrl.replace(/\/api\/?$/, "");
-  }
-  return "http://localhost:3000";
-}
-
-/**
- * Handle API errors and detect if re-auth is needed
- * @param {Error} error - The error from API call
- * @param {Object} res - Express response object
- * @returns {Object|null} Response if error was handled, null otherwise
- */
-function handleApiError(error, res) {
-  if (config.isAuthError(error)) {
-    const errorMsg =
-      error.response?.data?.error ||
-      error.message ||
-      "API key is invalid or expired";
-    return res.status(401).json(config.createAuthErrorResponse(errorMsg));
-  }
-  return null; // Error not handled, let caller handle it
-}
-
-/**
- * Generate all possible variant combinations from dimensions
- * @param {Object} dimensions - Variant dimensions config
- * @param {string[]} dimensionKeys - Which dimensions to include
- * @returns {Array<Object>} Array of variant objects
- */
-function generateVariantCombinations(dimensions, dimensionKeys = []) {
-  if (!dimensions || dimensionKeys.length === 0) {
-    return [];
-  }
-
-  // Get options for each dimension
-  const dimensionOptions = dimensionKeys
-    .map((key) => {
-      const dim = dimensions[key];
-      if (!dim?.options) return [];
-      return Object.keys(dim.options).map((optKey) => ({
-        dimension: key,
-        option: optKey,
-      }));
-    })
-    .filter((opts) => opts.length > 0);
-
-  if (dimensionOptions.length === 0) {
-    return [];
-  }
-
-  // Generate cartesian product of all dimension options
-  const cartesian = (...arrays) => {
-    return arrays.reduce(
-      (acc, arr) => acc.flatMap((combo) => arr.map((item) => [...combo, item])),
-      [[]],
-    );
-  };
-
-  const combinations = cartesian(...dimensionOptions);
-
-  // Convert to variant objects
-  return combinations.map((combo) => {
-    const variant = {};
-    for (const { dimension, option } of combo) {
-      variant[dimension] = option;
-    }
-    return variant;
-  });
-}
-
-/**
- * Validate a path segment to prevent directory traversal attacks
- * @param {string} segment - Path segment to validate
- * @returns {boolean} True if safe, false if potentially malicious
- */
-function isValidPathSegment(segment) {
-  if (!segment || typeof segment !== "string") return false;
-  // Reject empty, dots-only, or segments with path separators
-  if (segment === "." || segment === "..") return false;
-  if (segment.includes("/") || segment.includes("\\")) return false;
-  if (segment.includes("\0")) return false; // Null byte injection
-  return true;
-}
-
-/**
- * Validate that a resolved path stays within the expected base directory
- * @param {string} resolvedPath - Fully resolved path
- * @param {string} baseDir - Expected base directory
- * @returns {boolean} True if path is within base, false otherwise
- */
-function isPathWithinBase(resolvedPath, baseDir) {
-  const normalizedBase = path.resolve(baseDir);
-  const normalizedPath = path.resolve(resolvedPath);
-  return (
-    normalizedPath.startsWith(normalizedBase + path.sep) ||
-    normalizedPath === normalizedBase
-  );
-}
+const {
+  generateVariantCombinations,
+  getPlatformUrl,
+  handleApiError,
+  isPathWithinBase,
+  isValidPathSegment,
+} = require("./ui-api-helpers");
+const {
+  deleteAllOutputAssets,
+  deleteScenarioAssetDirectories,
+} = require("./ui-asset-cleanup");
+const { listScenarioVersions } = require("./ui-output-versions");
+const { addScenarioMetadata } = require("./ui-scenario-metadata");
+const { attachRecorderRoutes } = require("./ui-recorder-routes");
 
 /**
  * Attach all API routes to an Express app
@@ -219,134 +121,13 @@ function attachApiRoutes(app, context) {
         : { scenarios: [] };
       const scenarios = docSyncConfig?.scenarios || [];
       const outputBaseDir = path.join(process.cwd(), ".reshot", "output");
-
-      // Get all jobs to find last run times
+      const uiExecutor = require("./ui-executor");
       const allJobs = uiExecutor.getAllJobs(500);
-
-      // Build metadata for each scenario
-      const scenariosWithMetadata = scenarios.map((scenario) => {
-        let createdAt = null;
-        let lastRunAt = null;
-        let lastRunStatus = null;
-        let assetCount = 0;
-
-        // Try to find creation date from earliest output folder
-        const scenarioOutputDir = path.join(outputBaseDir, scenario.key);
-        if (fs.existsSync(scenarioOutputDir)) {
-          try {
-            const subFolders = fs
-              .readdirSync(scenarioOutputDir)
-              .filter((item) => {
-                const fullPath = path.join(scenarioOutputDir, item);
-                try {
-                  return (
-                    fs.statSync(fullPath).isDirectory() && item !== "latest"
-                  );
-                } catch {
-                  return false;
-                }
-              });
-
-            // Parse timestamps from folder names (format: YYYY-MM-DD_HH-MM-SS)
-            const timestamps = subFolders
-              .filter((f) => /^\d{4}-\d{2}-\d{2}_\d{2}-\d{2}-\d{2}$/.test(f))
-              .map((f) => {
-                const [date, time] = f.split("_");
-                const [year, month, day] = date.split("-");
-                const [hour, min, sec] = time.split("-");
-                return new Date(
-                  `${year}-${month}-${day}T${hour}:${min}:${sec}`,
-                );
-              })
-              .filter((d) => !isNaN(d.getTime()))
-              .sort((a, b) => a.getTime() - b.getTime());
-
-            if (timestamps.length > 0) {
-              createdAt = timestamps[0].toISOString();
-              lastRunAt = timestamps[timestamps.length - 1].toISOString();
-            }
-
-            // Count assets in latest folder
-            const latestDir = path.join(scenarioOutputDir, "latest");
-            if (fs.existsSync(latestDir)) {
-              try {
-                const files = fs.readdirSync(latestDir);
-                assetCount = files.filter(
-                  (f) =>
-                    f.endsWith(".png") ||
-                    f.endsWith(".jpg") ||
-                    f.endsWith(".mp4") ||
-                    f.endsWith(".webm"),
-                ).length;
-              } catch {}
-            }
-          } catch (err) {
-            // Ignore errors reading output directories
-          }
-        }
-
-        // Also check jobs for more accurate last run info
-        const scenarioJobs = allJobs.filter((job) => {
-          if (job.type !== "run") return false;
-          const keys = job.params?.scenarioKeys || [];
-          return keys.includes(scenario.key);
-        });
-
-        if (scenarioJobs.length > 0) {
-          // Sort by createdAt desc
-          scenarioJobs.sort(
-            (a, b) =>
-              new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-          );
-          const latestJob = scenarioJobs[0];
-
-          // Use job completion time if available
-          if (latestJob.completedAt) {
-            const jobTime = new Date(latestJob.completedAt).toISOString();
-            if (!lastRunAt || jobTime > lastRunAt) {
-              lastRunAt = jobTime;
-              lastRunStatus = latestJob.status;
-            }
-          } else if (latestJob.createdAt) {
-            const jobTime = new Date(latestJob.createdAt).toISOString();
-            if (!lastRunAt || jobTime > lastRunAt) {
-              lastRunAt = jobTime;
-              lastRunStatus = latestJob.status;
-            }
-          }
-
-          // Get earliest job for createdAt
-          const earliestJob = scenarioJobs[scenarioJobs.length - 1];
-          if (
-            earliestJob.createdAt &&
-            (!createdAt || earliestJob.createdAt < createdAt)
-          ) {
-            createdAt = earliestJob.createdAt;
-          }
-        }
-
-        return {
-          ...scenario,
-          _metadata: {
-            createdAt,
-            lastRunAt,
-            lastRunStatus,
-            assetCount,
-          },
-        };
-      });
-
-      // Sort by lastRunAt descending (most recent first), fallback to name
-      scenariosWithMetadata.sort((a, b) => {
-        const aTime = a._metadata?.lastRunAt
-          ? new Date(a._metadata.lastRunAt).getTime()
-          : 0;
-        const bTime = b._metadata?.lastRunAt
-          ? new Date(b._metadata.lastRunAt).getTime()
-          : 0;
-        if (aTime !== bTime) return bTime - aTime;
-        return a.name.localeCompare(b.name);
-      });
+      const scenariosWithMetadata = addScenarioMetadata(
+        scenarios,
+        allJobs,
+        outputBaseDir,
+      );
 
       res.json({ scenarios: scenariosWithMetadata });
     } catch (error) {
@@ -431,7 +212,7 @@ function attachApiRoutes(app, context) {
 
   /**
    * PUT /api/privacy
-   * Update privacy configuration in docsync.config.json
+   * Update privacy configuration in reshot.config.json
    */
   app.put("/api/privacy", async (req, res, next) => {
     try {
@@ -472,7 +253,7 @@ function attachApiRoutes(app, context) {
 
   /**
    * PUT /api/style
-   * Update style configuration in docsync.config.json
+   * Update style configuration in reshot.config.json
    */
   app.put("/api/style", async (req, res, next) => {
     try {
@@ -727,29 +508,7 @@ function attachApiRoutes(app, context) {
   app.delete("/api/assets", async (req, res, next) => {
     try {
       const outputDir = path.join(process.cwd(), ".reshot", "output");
-
-      if (!fs.existsSync(outputDir)) {
-        return res.json({ ok: true, deleted: 0 });
-      }
-
-      // Count files before deletion
-      let fileCount = 0;
-      function countFiles(dir) {
-        const items = fs.readdirSync(dir);
-        for (const item of items) {
-          const fullPath = path.join(dir, item);
-          const stat = fs.statSync(fullPath);
-          if (stat.isDirectory()) {
-            countFiles(fullPath);
-          } else {
-            fileCount++;
-          }
-        }
-      }
-      countFiles(outputDir);
-
-      // Remove all contents of output directory
-      fs.emptyDirSync(outputDir);
+      const fileCount = deleteAllOutputAssets(outputDir);
 
       res.json({ ok: true, deleted: fileCount });
     } catch (error) {
@@ -785,46 +544,11 @@ function attachApiRoutes(app, context) {
       }
 
       const outputDir = path.join(process.cwd(), ".reshot", "output");
-
-      if (!fs.existsSync(outputDir)) {
-        return res.json({ ok: true, deletedScenarios: 0, deletedFiles: 0 });
-      }
-
-      let deletedScenarios = 0;
-      let deletedFiles = 0;
-
-      for (const scenarioKey of scenarioKeys) {
-        const scenarioDir = path.join(outputDir, scenarioKey);
-
-        // Verify the path is within the output directory
-        if (!isPathWithinBase(scenarioDir, outputDir)) {
-          continue; // Skip paths that escape the output directory
-        }
-
-        if (fs.existsSync(scenarioDir)) {
-          // Count files in this scenario directory
-          function countFilesInDir(dir) {
-            let count = 0;
-            const items = fs.readdirSync(dir);
-            for (const item of items) {
-              const fullPath = path.join(dir, item);
-              const stat = fs.statSync(fullPath);
-              if (stat.isDirectory()) {
-                count += countFilesInDir(fullPath);
-              } else {
-                count++;
-              }
-            }
-            return count;
-          }
-
-          deletedFiles += countFilesInDir(scenarioDir);
-
-          // Remove the scenario directory
-          fs.removeSync(scenarioDir);
-          deletedScenarios++;
-        }
-      }
+      const { deletedScenarios, deletedFiles } = deleteScenarioAssetDirectories(
+        outputDir,
+        scenarioKeys,
+        isPathWithinBase,
+      );
 
       res.json({ ok: true, deletedScenarios, deletedFiles });
     } catch (error) {
@@ -1943,156 +1667,7 @@ function attachApiRoutes(app, context) {
         return res.json({ versions: [] });
       }
 
-      const isTimestamp = (name) =>
-        /^\d{4}-\d{2}-\d{2}_\d{2}-\d{2}-\d{2}$/.test(name);
-      const extensions = [".png", ".gif", ".mp4", ".jpg", ".jpeg", ".webm"];
-
-      // Helper to count assets in a directory
-      function countAssets(dir) {
-        let count = 0;
-        function walk(d) {
-          try {
-            const items = fs.readdirSync(d);
-            for (const item of items) {
-              const fullPath = path.join(d, item);
-              const stat = fs.statSync(fullPath);
-              if (stat.isDirectory()) {
-                walk(fullPath);
-              } else if (
-                extensions.includes(path.extname(item).toLowerCase())
-              ) {
-                count++;
-              }
-            }
-          } catch (e) {
-            /* ignore */
-          }
-        }
-        walk(dir);
-        return count;
-      }
-
-      // Helper to detect variant subfolders in a directory
-      function detectVariants(dir) {
-        try {
-          const items = fs.readdirSync(dir);
-          const variants = [];
-          for (const item of items) {
-            const fullPath = path.join(dir, item);
-            const stat = fs.statSync(fullPath);
-            if (stat.isDirectory()) {
-              // Check if this folder contains assets (is a variant folder)
-              const assetCount = countAssets(fullPath);
-              if (assetCount > 0) {
-                variants.push({
-                  name: item,
-                  assetCount,
-                  path: fullPath,
-                });
-              }
-            }
-          }
-          return variants;
-        } catch (e) {
-          return [];
-        }
-      }
-
-      const subFolders = fs.readdirSync(scenarioDir).filter((item) => {
-        const fullPath = path.join(scenarioDir, item);
-        try {
-          return fs.statSync(fullPath).isDirectory();
-        } catch {
-          return false;
-        }
-      });
-
-      // Get timestamp folders sorted newest first
-      const timestampFolders = subFolders
-        .filter((f) => isTimestamp(f))
-        .sort()
-        .reverse();
-
-      // Also include 'latest' and 'default' folders if they exist and have assets
-      const specialFolders = subFolders.filter(
-        (f) => f === "latest" || f === "default",
-      );
-
-      const versions = [];
-
-      // Add timestamp versions first (newest first)
-      timestampFolders.forEach((ts, index) => {
-        const tsPath = path.join(scenarioDir, ts);
-        const totalAssetCount = countAssets(tsPath);
-
-        // Detect variants in this timestamp folder
-        const variants = detectVariants(tsPath);
-
-        // Parse timestamp to human-readable format
-        const parts = ts.match(
-          /(\d{4})-(\d{2})-(\d{2})_(\d{2})-(\d{2})-(\d{2})/,
-        );
-        let label = ts;
-        let isoDate = ts;
-        if (parts) {
-          const date = new Date(
-            `${parts[1]}-${parts[2]}-${parts[3]}T${parts[4]}:${parts[5]}:${parts[6]}`,
-          );
-          // Validate the date is valid before using
-          if (!isNaN(date.getTime())) {
-            label = date.toLocaleString();
-            isoDate = date.toISOString();
-          }
-        }
-
-        // Read manifest for privacy/style metadata
-        let manifestMeta = {};
-        try {
-          const manifestPath = path.join(tsPath, "manifest.json");
-          if (fs.existsSync(manifestPath)) {
-            const manifest = fs.readJSONSync(manifestPath);
-            if (manifest.privacy) manifestMeta.privacy = manifest.privacy;
-            if (manifest.style) manifestMeta.style = manifest.style;
-          }
-        } catch (_e) { /* ignore */ }
-
-        versions.push({
-          timestamp: ts,
-          label,
-          date: isoDate,
-          assetCount: totalAssetCount,
-          isLatest: index === 0,
-          variants: variants.map((v) => ({
-            name: v.name,
-            assetCount: v.assetCount,
-          })),
-          hasVariants: variants.length > 0,
-          ...manifestMeta,
-        });
-      });
-
-      // Add special folders at the end (but only if they have assets and not duplicating timestamp versions)
-      specialFolders.forEach((folder) => {
-        const folderPath = path.join(scenarioDir, folder);
-        const assetCount = countAssets(folderPath);
-        const variants = detectVariants(folderPath);
-        if (assetCount > 0) {
-          // Only add if we don't already have timestamp versions (to avoid redundancy)
-          const label = folder === "latest" ? "Latest" : "Default";
-          versions.push({
-            timestamp: folder,
-            label,
-            date: new Date().toISOString(),
-            assetCount,
-            isLatest: folder === "latest" && versions.length === 0,
-            variants: variants.map((v) => ({
-              name: v.name,
-              assetCount: v.assetCount,
-            })),
-            hasVariants: variants.length > 0,
-          });
-        }
-      });
+      const versions = listScenarioVersions(scenarioDir);
 
       res.json({ versions });
     } catch (error) {
@@ -2852,7 +2427,7 @@ function attachApiRoutes(app, context) {
         const apiBaseUrl = getApiBaseUrl();
         // Derive platformUrl from apiBaseUrl (remove /api suffix)
         const platformUrl =
-          apiBaseUrl.replace(/\/api\/?$/, "") || "http://localhost:3000";
+          apiBaseUrl.replace(/\/api\/?$/, "") || "https://reshot.dev";
 
         config.writeSettings({
           projectId: project.id,
@@ -4298,375 +3873,7 @@ function attachApiRoutes(app, context) {
     }
   });
 
-  // ===== RECORDER ENDPOINTS =====
-  // These endpoints require the recorderService to be passed in context
-
-  const { checkCdpEndpoint, getCdpTargets } = require("./record-cdp");
-
-  /**
-   * GET /api/recorder/check-chrome
-   * Check if Chrome is running with remote debugging and get available tabs
-   */
-  app.get("/api/recorder/check-chrome", async (req, res, next) => {
-    try {
-      const endpointCheck = await checkCdpEndpoint("localhost", 9222);
-
-      if (!endpointCheck.available) {
-        return res.json({
-          ok: false,
-          chromeAvailable: false,
-          error: endpointCheck.error,
-          instructions: {
-            darwin:
-              '/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --remote-debugging-port=9222 --user-data-dir="$HOME/.reshot/chrome-debug"',
-            win32:
-              '"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%USERPROFILE%\\.reshot\\chrome-debug"',
-            linux:
-              'google-chrome --remote-debugging-port=9222 --user-data-dir="$HOME/.reshot/chrome-debug"',
-          },
-        });
-      }
-
-      // Get list of available tabs
-      let targets = [];
-      try {
-        targets = await getCdpTargets("localhost", 9222);
-      } catch (e) {
-        // Ignore, we'll just have empty targets
-      }
-
-      const pageTargets = targets.filter((t) => t.type === "page");
-      const validTargets = pageTargets.filter(
-        (t) =>
-          !t.url.startsWith("chrome://") &&
-          !t.url.startsWith("chrome-error://") &&
-          t.url !== "about:blank",
-      );
-
-      res.json({
-        ok: true,
-        chromeAvailable: true,
-        browserInfo: endpointCheck.info,
-        tabs: pageTargets.map((t) => ({
-          title: t.title,
-          url: t.url,
-          isValid:
-            !t.url.startsWith("chrome://") &&
-            !t.url.startsWith("chrome-error://") &&
-            t.url !== "about:blank",
-        })),
-        hasValidTab: validTargets.length > 0,
-        message:
-          validTargets.length > 0
-            ? `Chrome ready with ${validTargets.length} valid tab(s)`
-            : "Chrome is running but no valid tabs found. Please navigate to your application.",
-      });
-    } catch (error) {
-      res.json({
-        ok: false,
-        chromeAvailable: false,
-        error: error.message,
-      });
-    }
-  });
-
-  /**
-   * GET /api/recorder/status
-   * Get current recorder session status
-   */
-  app.get("/api/recorder/status", async (req, res, next) => {
-    try {
-      const { recorderService } = context;
-      if (!recorderService) {
-        return res.json({
-          ok: true,
-          status: { active: false, error: "Recorder service not available" },
-        });
-      }
-
-      const status = recorderService.getStatus();
-      res.json({ ok: true, status });
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  /**
-   * GET /api/recorder/steps
-   * Get captured steps from current or last session
-   */
-  app.get("/api/recorder/steps", async (req, res, next) => {
-    try {
-      const { recorderService } = context;
-      if (!recorderService) {
-        return res.json({ ok: true, steps: [] });
-      }
-
-      const steps = recorderService.getSteps();
-      res.json({ ok: true, steps });
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  /**
-   * GET /api/recorder/tabs
-   * List available Chrome tabs for recording
-   */
-  app.get("/api/recorder/tabs", async (req, res, next) => {
-    try {
-      const { getCdpTargets, checkCdpEndpoint } = require("./record-cdp");
-
-      // Check if Chrome is available
-      const endpointCheck = await checkCdpEndpoint("localhost", 9222);
-      if (!endpointCheck.available) {
-        return res.json({
-          ok: false,
-          chromeAvailable: false,
-          error: "Chrome is not running with remote debugging enabled",
-          tabs: [],
-        });
-      }
-
-      // Get available tabs
-      const targets = await getCdpTargets("localhost", 9222);
-      const tabs = targets
-        .filter((t) => t.type === "page")
-        .map((t) => ({
-          id: t.id,
-          url: t.url,
-          title: t.title || t.url,
-          // Flag tabs that shouldn't be recorded
-          isOurUI:
-            t.url.includes("localhost:4300") ||
-            t.url.includes("127.0.0.1:4300"),
-          isChrome:
-            t.url.startsWith("chrome://") ||
-            t.url.startsWith("chrome-error://") ||
-            t.url === "about:blank",
-        }))
-        // Sort: real pages first, our UI last
-        .sort((a, b) => {
-          if (a.isOurUI && !b.isOurUI) return 1;
-          if (!a.isOurUI && b.isOurUI) return -1;
-          if (a.isChrome && !b.isChrome) return 1;
-          if (!a.isChrome && b.isChrome) return -1;
-          return 0;
-        });
-
-      res.json({ ok: true, chromeAvailable: true, tabs });
-    } catch (error) {
-      console.error("[Recorder API] Get tabs failed:", error);
-      res
-        .status(500)
-        .json({ error: error.message || "Failed to get Chrome tabs" });
-    }
-  });
-
-  /**
-   * POST /api/recorder/start
-   * Start a new recording session
-   */
-  app.post("/api/recorder/start", async (req, res, next) => {
-    try {
-      const { recorderService } = context;
-      if (!recorderService) {
-        return res
-          .status(503)
-          .json({ error: "Recorder service not available" });
-      }
-
-      const { visualKey, title, targetUrl, targetId, scenarioUrl } = req.body;
-
-      const result = await recorderService.start({
-        visualKey,
-        title,
-        targetUrl, // Specific URL to record
-        targetId, // Specific tab ID to record
-        scenarioUrl, // Custom URL to save with the scenario (defaults to targetUrl if not provided)
-        uiMode: true, // Important: Skip terminal prompts
-      });
-
-      res.json({ ok: true, ...result });
-    } catch (error) {
-      console.error("[Recorder API] Start failed:", error);
-      res
-        .status(500)
-        .json({ error: error.message || "Failed to start recording" });
-    }
-  });
-
-  /**
-   * POST /api/recorder/stop
-   * Stop the current recording session
-   */
-  app.post("/api/recorder/stop", async (req, res, next) => {
-    try {
-      const { recorderService } = context;
-      if (!recorderService) {
-        return res
-          .status(503)
-          .json({ error: "Recorder service not available" });
-      }
-
-      const { save = true, mergeMode = "replace" } = req.body;
-
-      const result = await recorderService.stop(save, {
-        uiMode: true,
-        mergeMode,
-      });
-
-      res.json({ ok: true, ...result });
-    } catch (error) {
-      console.error("[Recorder API] Stop failed:", error);
-      res
-        .status(500)
-        .json({ error: error.message || "Failed to stop recording" });
-    }
-  });
-
-  /**
-   * POST /api/recorder/capture
-   * Capture a screenshot during recording
-   */
-  app.post("/api/recorder/capture", async (req, res, next) => {
-    try {
-      const { recorderService } = context;
-      if (!recorderService) {
-        return res
-          .status(503)
-          .json({ error: "Recorder service not available" });
-      }
-
-      const { outputFilename, areaType, selector } = req.body;
-
-      const step = await recorderService.capture({
-        outputFilename,
-        areaType: areaType || "full",
-        selector,
-        uiMode: true,
-      });
-
-      res.json({ ok: true, step });
-    } catch (error) {
-      console.error("[Recorder API] Capture failed:", error);
-      res
-        .status(500)
-        .json({ error: error.message || "Failed to capture screenshot" });
-    }
-  });
-
-  /**
-   * DELETE /api/recorder/steps/:index
-   * Remove a step at a specific index during recording
-   */
-  app.delete("/api/recorder/steps/:index", async (req, res, next) => {
-    try {
-      const { recorderService } = context;
-      if (!recorderService) {
-        return res
-          .status(503)
-          .json({ error: "Recorder service not available" });
-      }
-
-      const index = parseInt(req.params.index, 10);
-      if (isNaN(index)) {
-        return res.status(400).json({ error: "Invalid step index" });
-      }
-
-      const result = recorderService.removeStep(index);
-      res.json({ ok: true, ...result });
-    } catch (error) {
-      console.error("[Recorder API] Remove step failed:", error);
-      res.status(500).json({ error: error.message || "Failed to remove step" });
-    }
-  });
-
-  /**
-   * POST /api/recorder/save-session
-   * Save the current Chrome session state (cookies, localStorage) for use in captures
-   * This allows captures to run with authenticated sessions without manual login
-   */
-  app.post("/api/recorder/save-session", async (req, res, next) => {
-    try {
-      const {
-        saveSessionState,
-        getDefaultSessionPath,
-      } = require("./record-cdp");
-
-      const sessionPath = getDefaultSessionPath();
-      const result = await saveSessionState(sessionPath);
-
-      if (result.success) {
-        res.json({
-          ok: true,
-          path: result.path,
-          message:
-            "Session saved successfully. Captures will now use your authenticated session.",
-        });
-      } else {
-        res.status(400).json({
-          ok: false,
-          error: result.error,
-        });
-      }
-    } catch (error) {
-      console.error("[Recorder API] Save session failed:", error);
-      res
-        .status(500)
-        .json({ error: error.message || "Failed to save session" });
-    }
-  });
-
-  /**
-   * GET /api/recorder/session-status
-   * Check if a saved session exists and is valid
-   */
-  app.get("/api/recorder/session-status", async (req, res, next) => {
-    try {
-      const { getDefaultSessionPath } = require("./record-cdp");
-      const sessionPath = getDefaultSessionPath();
-
-      if (fs.existsSync(sessionPath)) {
-        const stat = fs.statSync(sessionPath);
-        const ageHours = (Date.now() - stat.mtimeMs) / (1000 * 60 * 60);
-
-        // Try to parse and get some info
-        try {
-          const sessionData = fs.readJsonSync(sessionPath);
-          res.json({
-            ok: true,
-            hasSession: true,
-            path: sessionPath,
-            savedAt: stat.mtime.toISOString(),
-            ageHours: Math.round(ageHours * 10) / 10,
-            cookieCount: sessionData.cookies?.length || 0,
-            originsCount: sessionData.origins?.length || 0,
-            isStale: ageHours > 24, // Consider stale after 24 hours
-          });
-        } catch (parseError) {
-          res.json({
-            ok: true,
-            hasSession: true,
-            path: sessionPath,
-            error: "Session file is corrupted",
-          });
-        }
-      } else {
-        res.json({
-          ok: true,
-          hasSession: false,
-          message:
-            "No saved session. Use 'Save Session' in Recorder to capture your authenticated state.",
-        });
-      }
-    } catch (error) {
-      console.error("[Recorder API] Session status failed:", error);
-      res
-        .status(500)
-        .json({ error: error.message || "Failed to check session status" });
-    }
-  });
+  attachRecorderRoutes(app, context);
 
   // Error handler
   app.use(handleError);