clipwise 0.7.0 → 0.7.2

package/dist/cli/index.js

@@ -11,7 +11,7 @@ var __export = (target, all) => {
 
 // src/script/types.ts
 import { z } from "zod";
-var SafeSelectorSchema, NavigateActionSchema, ClickActionSchema, TypeActionSchema, ScrollActionSchema, WaitActionSchema, HoverActionSchema, ScreenshotActionSchema, WaitForSelectorActionSchema, WaitForNavigationActionSchema, WaitForURLActionSchema, WaitForFunctionActionSchema, WaitForResponseActionSchema, SmartWaitActionSchema, StepActionSchema, ZoomIntensitySchema, AutoZoomConfigSchema, ZoomEffectSchema, CursorEffectSchema, BackgroundSchema, DeviceFrameSchema, SpeedRampConfigSchema, SmartSpeedConfigSchema, KeystrokeConfigSchema, WatermarkConfigSchema, EffectsConfigSchema, OutputConfigSchema, StepEffectsOverrideSchema, TransitionTypeSchema, StepSchema, AudioConfigSchema, ScenarioSchema;
+var SafeSelectorSchema, NavigateActionSchema, ClickActionSchema, TypeActionSchema, ScrollActionSchema, WaitActionSchema, HoverActionSchema, ScreenshotActionSchema, WaitForSelectorActionSchema, WaitForNavigationActionSchema, WaitForURLActionSchema, WaitForFunctionActionSchema, WaitForResponseActionSchema, SmartWaitActionSchema, StepActionSchema, ZoomIntensitySchema, AutoZoomConfigSchema, ZoomEffectSchema, CursorEffectSchema, BackgroundSchema, DeviceFrameSchema, SpeedRampConfigSchema, SmartSpeedConfigSchema, KeystrokeConfigSchema, WatermarkConfigSchema, EffectsConfigSchema, OutputConfigSchema, StepEffectsOverrideSchema, TransitionTypeSchema, StepSchema, AudioConfigSchema, AuthConfigSchema, ScenarioSchema;
 var init_types = __esm({
   "src/script/types.ts"() {
     "use strict";
@@ -63,29 +63,41 @@ var init_types = __esm({
       action: z.literal("waitForSelector"),
       selector: SafeSelectorSchema,
       state: z.enum(["visible", "attached", "hidden"]).default("visible"),
-      timeout: z.number().min(0).default(15e3)
+      timeout: z.number().min(0).default(15e3),
+      /** 대기 중 프레임 연속 캡처 (로딩 애니메이션 보존). */
+      captureWhileWaiting: z.boolean().default(false),
+      /** captureWhileWaiting 사용 시 출력 영상 속도 배율 (1-32). */
+      displaySpeed: z.number().min(1).max(32).default(8)
     });
     WaitForNavigationActionSchema = z.object({
       action: z.literal("waitForNavigation"),
       waitUntil: z.enum(["load", "domcontentloaded", "networkidle"]).default("networkidle"),
-      timeout: z.number().min(0).default(15e3)
+      timeout: z.number().min(0).default(15e3),
+      captureWhileWaiting: z.boolean().default(false),
+      displaySpeed: z.number().min(1).max(32).default(8)
     });
     WaitForURLActionSchema = z.object({
       action: z.literal("waitForURL"),
       url: z.string().min(1),
-      timeout: z.number().min(0).default(15e3)
+      timeout: z.number().min(0).default(15e3),
+      captureWhileWaiting: z.boolean().default(false),
+      displaySpeed: z.number().min(1).max(32).default(8)
     });
     WaitForFunctionActionSchema = z.object({
       action: z.literal("waitForFunction"),
       expression: z.string().min(1),
       polling: z.union([z.literal("raf"), z.number().min(0)]).default("raf"),
-      timeout: z.number().min(0).default(3e4)
+      timeout: z.number().min(0).default(3e4),
+      captureWhileWaiting: z.boolean().default(false),
+      displaySpeed: z.number().min(1).max(32).default(8)
     });
     WaitForResponseActionSchema = z.object({
       action: z.literal("waitForResponse"),
       url: z.string().min(1),
       status: z.number().min(100).max(599).optional(),
-      timeout: z.number().min(0).default(3e4)
+      timeout: z.number().min(0).default(3e4),
+      captureWhileWaiting: z.boolean().default(false),
+      displaySpeed: z.number().min(1).max(32).default(8)
     });
     SmartWaitActionSchema = z.object({
       action: z.literal("smartWait"),
@@ -280,6 +292,22 @@ var init_types = __esm({
       /** Fade-out duration in milliseconds. */
       fadeOut: z.number().min(0).default(0)
     });
+    AuthConfigSchema = z.object({
+      /** Path to a Playwright storageState JSON file (cookies + localStorage). */
+      storageState: z.string().optional(),
+      /** Inline cookie definitions (applied after storageState if both specified). */
+      cookies: z.array(
+        z.object({
+          name: z.string(),
+          value: z.string(),
+          domain: z.string(),
+          path: z.string().default("/"),
+          httpOnly: z.boolean().default(false),
+          secure: z.boolean().default(false),
+          sameSite: z.enum(["Strict", "Lax", "None"]).default("Lax")
+        })
+      ).optional()
+    });
     ScenarioSchema = z.object({
       name: z.string(),
       description: z.string().optional(),
@@ -287,6 +315,8 @@ var init_types = __esm({
         width: z.number().default(1280),
         height: z.number().default(800)
       }).default({}),
+      /** Optional authentication — restores browser session for logged-in pages. */
+      auth: AuthConfigSchema.optional(),
       effects: EffectsConfigSchema.default({}),
       output: OutputConfigSchema.default({}),
       /** Optional audio narration — muxed into MP4 output. */
@@ -567,9 +597,16 @@ var ClipwiseRecorder = class {
     this.cursorSpeed = scenario.effects.cursor.speed;
     this.loaderDetectionEnabled = scenario.effects.smartSpeed?.enabled ?? false;
     this.browser = await chromium.launch({ headless: true });
-    this.context = await this.browser.newContext({
+    const contextOptions = {
       viewport: this.viewport
-    });
+    };
+    if (scenario.auth?.storageState) {
+      contextOptions.storageState = scenario.auth.storageState;
+    }
+    this.context = await this.browser.newContext(contextOptions);
+    if (scenario.auth?.cookies?.length) {
+      await this.context.addCookies(scenario.auth.cookies);
+    }
     this.page = await this.context.newPage();
     this.rawFrames = [];
     this.cursorTimeline = [];
@@ -892,6 +929,31 @@ var ClipwiseRecorder = class {
       }
     }
   }
+  /**
+   * 조건 대기 중 프레임을 연속 캡처하는 헬퍼.
+   * smartWait과 동일한 패턴: isWaitingPhase 플래그 + forceRepaint 루프를 조건 promise와 병렬 실행.
+   */
+  async waitForConditionWithCapture(conditionPromise, displaySpeed) {
+    this.isWaitingPhase = true;
+    this.currentDisplaySpeed = displaySpeed;
+    try {
+      let waitDone = false;
+      const repaintLoop = (async () => {
+        let toggle = false;
+        while (!waitDone && this.isCapturing && this.page) {
+          await this.forceRepaint(toggle);
+          toggle = !toggle;
+          await new Promise((r) => setTimeout(r, REPAINT_INTERVAL_MS));
+        }
+      })();
+      await conditionPromise;
+      waitDone = true;
+      await repaintLoop;
+    } finally {
+      this.isWaitingPhase = false;
+      this.currentDisplaySpeed = void 0;
+    }
+  }
   /**
    * Pre-register waitForResponse listeners at the start of each step.
    * This ensures the listener is active before any preceding action
@@ -982,6 +1044,17 @@ var ClipwiseRecorder = class {
             lastClickRefresh = now;
           }
         }
+        await this.page.evaluate((sel) => {
+          const el = document.querySelector(sel);
+          if (!el) return;
+          const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+          const setter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
+          if (setter) {
+            setter.call(el, el.value);
+            el.dispatchEvent(new Event("input", { bubbles: true }));
+            el.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+        }, action.selector);
         this.clickTimeline.push({
           position: { ...inputTarget },
           timestamp: Date.now()
@@ -1055,83 +1128,89 @@ var ClipwiseRecorder = class {
       }
       case "waitForSelector": {
         const locator = this.page.locator(action.selector).first();
-        await locator.waitFor({ state: action.state, timeout: action.timeout });
+        const selectorPromise = locator.waitFor({ state: action.state, timeout: action.timeout });
+        if (action.captureWhileWaiting) {
+          await this.waitForConditionWithCapture(selectorPromise, action.displaySpeed);
+        } else {
+          await selectorPromise;
+        }
         break;
       }
       case "waitForNavigation": {
-        await this.page.waitForLoadState(action.waitUntil, { timeout: action.timeout });
+        const navPromise = this.page.waitForLoadState(action.waitUntil, { timeout: action.timeout });
+        if (action.captureWhileWaiting) {
+          await this.waitForConditionWithCapture(navPromise, action.displaySpeed);
+        } else {
+          await navPromise;
+        }
         break;
       }
       case "waitForURL": {
-        await this.page.waitForURL(action.url, { timeout: action.timeout });
+        const urlPromise = this.page.waitForURL(action.url, { timeout: action.timeout });
+        if (action.captureWhileWaiting) {
+          await this.waitForConditionWithCapture(urlPromise, action.displaySpeed);
+        } else {
+          await urlPromise;
+        }
         break;
       }
       case "waitForFunction": {
-        await this.page.waitForFunction(action.expression, void 0, {
+        const fnPromise = this.page.waitForFunction(action.expression, void 0, {
           polling: action.polling,
           timeout: action.timeout
         });
+        if (action.captureWhileWaiting) {
+          await this.waitForConditionWithCapture(fnPromise, action.displaySpeed);
+        } else {
+          await fnPromise;
+        }
         break;
       }
       case "waitForResponse": {
         const pending = this.pendingResponsePromises.get(actionIndex);
         if (pending) {
-          await pending;
+          if (action.captureWhileWaiting) {
+            await this.waitForConditionWithCapture(pending, action.displaySpeed);
+          } else {
+            await pending;
+          }
         }
         break;
       }
       case "smartWait": {
-        this.isWaitingPhase = true;
-        this.currentDisplaySpeed = action.displaySpeed;
-        try {
-          let conditionPromise;
-          switch (action.until) {
-            case "networkIdle":
-              conditionPromise = this.page.waitForLoadState("networkidle", { timeout: action.timeout });
-              break;
-            case "selector":
-              conditionPromise = action.selector ? this.page.locator(action.selector).first().waitFor({ state: "visible", timeout: action.timeout }) : Promise.resolve();
-              break;
-            case "domStable":
-              conditionPromise = this.page.waitForFunction(
-                () => new Promise((resolve2) => {
-                  let timer;
-                  const observer = new MutationObserver(() => {
-                    clearTimeout(timer);
-                    timer = setTimeout(() => {
-                      observer.disconnect();
-                      resolve2(true);
-                    }, 500);
-                  });
-                  observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+        let conditionPromise;
+        switch (action.until) {
+          case "networkIdle":
+            conditionPromise = this.page.waitForLoadState("networkidle", { timeout: action.timeout });
+            break;
+          case "selector":
+            conditionPromise = action.selector ? this.page.locator(action.selector).first().waitFor({ state: "visible", timeout: action.timeout }) : Promise.resolve();
+            break;
+          case "domStable":
+            conditionPromise = this.page.waitForFunction(
+              () => new Promise((resolve2) => {
+                let timer;
+                const observer = new MutationObserver(() => {
+                  clearTimeout(timer);
                   timer = setTimeout(() => {
                     observer.disconnect();
                     resolve2(true);
                   }, 500);
-                }),
-                void 0,
-                { timeout: action.timeout }
-              );
-              break;
-            default:
-              conditionPromise = Promise.resolve();
-          }
-          let waitDone = false;
-          const repaintLoop = (async () => {
-            let toggle = false;
-            while (!waitDone && this.isCapturing && this.page) {
-              await this.forceRepaint(toggle);
-              toggle = !toggle;
-              await new Promise((r) => setTimeout(r, REPAINT_INTERVAL_MS));
-            }
-          })();
-          await conditionPromise;
-          waitDone = true;
-          await repaintLoop;
-        } finally {
-          this.isWaitingPhase = false;
-          this.currentDisplaySpeed = void 0;
+                });
+                observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+                timer = setTimeout(() => {
+                  observer.disconnect();
+                  resolve2(true);
+                }, 500);
+              }),
+              void 0,
+              { timeout: action.timeout }
+            );
+            break;
+          default:
+            conditionPromise = Promise.resolve();
         }
+        await this.waitForConditionWithCapture(conditionPromise, action.displaySpeed);
         break;
       }
     }
@@ -1906,6 +1985,44 @@ import sharp5 from "sharp";
 function escapeXml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+function isCJK(ch) {
+  const code = ch.codePointAt(0) ?? 0;
+  return code >= 4352 && code <= 4607 || // 한글 자모
+  code >= 11904 && code <= 40959 || // CJK 부수, 한자
+  code >= 44032 && code <= 55215 || // 한글 음절
+  code >= 63744 && code <= 64255 || // CJK 호환 한자
+  code >= 65072 && code <= 65103 || // CJK 호환 형태
+  code >= 65280 && code <= 65519 || // Full-width 문자
+  code >= 12288 && code <= 12543 || // CJK 기호, 히라가나, 가타카나
+  code >= 12784 && code <= 12799 || // 가타카나 확장
+  code >= 131072 && code <= 195103;
+}
+function displayWidth(text) {
+  let w = 0;
+  for (const ch of text) {
+    w += isCJK(ch) ? 1.7 : 1;
+  }
+  return w;
+}
+function wrapText(text, maxWidth) {
+  if (displayWidth(text) <= maxWidth) return [text];
+  const lines = [];
+  let current = "";
+  let currentWidth = 0;
+  for (const ch of text) {
+    const chWidth = isCJK(ch) ? 1.7 : 1;
+    if (currentWidth + chWidth > maxWidth && current.length > 0) {
+      lines.push(current);
+      current = ch;
+      currentWidth = chWidth;
+    } else {
+      current += ch;
+      currentWidth += chWidth;
+    }
+  }
+  if (current.length > 0) lines.push(current);
+  return lines;
+}
 function buildSessions(keystrokes) {
   const hasSessionIds = keystrokes.some((k) => k.sessionId !== void 0);
   if (!hasSessionIds) {
@@ -1939,16 +2056,22 @@ async function renderKeystrokeHud(frameBuffer, keystrokes, frameTimestamp, confi
   const lineGap = Math.round(fontSize * 0.45);
   const charWidth = fontSize * 0.615;
   const maxHudWidth = frameWidth - 60 * dpr;
-  const maxCharsPerLine = Math.max(10, Math.floor((maxHudWidth - hudPadH * 2) / charWidth));
-  const lines = sessions.map(
-    (text) => text.length > maxCharsPerLine ? text.slice(-maxCharsPerLine) : text
-  );
-  const maxLineLen = Math.max(...lines.map((l) => l.length));
+  const maxDisplayWidth = Math.max(10, (maxHudWidth - hudPadH * 2) / charWidth);
+  const wrappedLines = [];
+  sessions.forEach((text, sIdx) => {
+    const wrapped = wrapText(text, maxDisplayWidth);
+    for (const line of wrapped) {
+      wrappedLines.push({ text: line, sessionIdx: sIdx });
+    }
+  });
+  const lines = wrappedLines.map((l) => l.text);
+  const totalLineCount = lines.length;
+  const maxLineDisplayWidth = Math.max(...lines.map((l) => displayWidth(l)));
   const hudWidth = Math.min(
-    Math.ceil(maxLineLen * charWidth) + hudPadH * 2,
+    Math.ceil(maxLineDisplayWidth * charWidth) + hudPadH * 2,
     maxHudWidth
   );
-  const hudHeight = Math.ceil(fontSize * lineCount + lineGap * (lineCount - 1) + hudPadV * 2);
+  const hudHeight = Math.ceil(fontSize * totalLineCount + lineGap * (totalLineCount - 1) + hudPadV * 2);
   const margin = 30 * dpr;
   const hudY = frameHeight - hudHeight - margin;
   let hudX;
@@ -1963,18 +2086,20 @@ async function renderKeystrokeHud(frameBuffer, keystrokes, frameTimestamp, confi
     default:
       hudX = Math.round((frameWidth - hudWidth) / 2);
   }
-  const LINE_OPACITY_FACTORS = [0.45, 0.7, 1];
-  const opacityFactors = LINE_OPACITY_FACTORS.slice(-lineCount);
+  const SESSION_OPACITY_FACTORS = [0.45, 0.7, 1];
+  const sessionOpacities = SESSION_OPACITY_FACTORS.slice(-lineCount);
   const rx = (8 * dpr).toFixed(1);
   const boxOp = (globalOpacity * 0.92).toFixed(3);
   const textX = hudX + hudPadH;
   const baselineY = hudY + hudPadV + fontSize * 0.82;
-  const textElements = lines.map((line, i) => {
-    const op = (globalOpacity * opacityFactors[i]).toFixed(3);
+  const textElements = wrappedLines.map(({ text, sessionIdx }, i) => {
+    const sessionPos = sessions.length <= 3 ? sessionIdx : sessionIdx - (sessions.length - 3);
+    const opFactor = sessionOpacities[Math.max(0, sessionPos)] ?? 1;
+    const op = (globalOpacity * opFactor).toFixed(3);
     const lineY = baselineY + i * (fontSize + lineGap);
     return `<text x="${textX}" y="${lineY}"
           font-family="monospace, Menlo, Consolas" font-size="${fontSize}"
-          fill="${config.textColor}" opacity="${op}">${escapeXml(line)}</text>`;
+          fill="${config.textColor}" opacity="${op}">${escapeXml(text)}</text>`;
   }).join("\n    ");
   const hudSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${frameWidth}" height="${frameHeight}" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
     <rect x="${hudX}" y="${hudY}" width="${hudWidth}" height="${hudHeight}"
@@ -3454,6 +3579,7 @@ var StreamingSession = class extends EventEmitter {
 
 // src/cli/index.ts
 import { writeFile as writeFile2, mkdir as mkdir2, access, copyFile, readFile as readFile3 } from "fs/promises";
+import { existsSync as existsSync2 } from "fs";
 import { join as join2, resolve, dirname } from "path";
 import { pathToFileURL, fileURLToPath as fileURLToPath2 } from "url";
 import { homedir } from "os";
@@ -3723,152 +3849,34 @@ program.command("demo").description("Record a demo video of the Clipwise showcas
 ).action(async (options) => {
   const spinner = ora();
   try {
+    const { loadScenario: loadScenario2 } = await Promise.resolve().then(() => (init_parser(), parser_exports));
+    const demoYamlCandidates = [
+      resolve(fileURLToPath2(import.meta.url), "../../..", "examples", "demo.yaml"),
+      // from dist/cli/
+      resolve(fileURLToPath2(import.meta.url), "../..", "examples", "demo.yaml")
+      // from src/cli/
+    ];
+    let demoYamlPath = "";
+    for (const candidate of demoYamlCandidates) {
+      if (existsSync2(candidate)) {
+        demoYamlPath = candidate;
+        break;
+      }
+    }
+    if (!demoYamlPath) {
+      throw new Error("Cannot find examples/demo.yaml. Run from the project root.");
+    }
+    const scenario = await loadScenario2(demoYamlPath);
+    scenario.output.format = options.format;
+    scenario.output.outputDir = options.output;
+    scenario.output.filename = `clipwise-demo-${options.device}`;
     const demoUrl = options.url ?? "https://kwakseongjae.github.io/clipwise/demo/";
-    const device = options.device;
-    const isMobile = device === "iphone" || device === "android";
-    const isTablet = device === "ipad";
-    const vpWidth = isMobile ? 390 : isTablet ? 1024 : 1280;
-    const vpHeight = isMobile ? 844 : isTablet ? 768 : 800;
-    const outWidth = isMobile ? 540 : 1280;
-    const outHeight = isMobile ? 1080 : isTablet ? 960 : 800;
-    const { parseScenario: parseScenario2 } = await Promise.resolve().then(() => (init_parser(), parser_exports));
-    const yaml = await import("yaml");
-    const steps = [
-      {
-        name: "Load dashboard",
-        captureDelay: 100,
-        holdDuration: 1e3,
-        actions: [
-          { action: "navigate", url: demoUrl, waitUntil: "load" },
-          { action: "waitForSelector", selector: "#stat-users", state: "visible", timeout: 15e3 }
-        ]
-      },
-      {
-        name: "Hover Users stat",
-        captureDelay: 50,
-        holdDuration: 700,
-        actions: [{ action: "hover", selector: "#stat-users" }]
-      },
-      {
-        name: "Hover Revenue",
-        captureDelay: 50,
-        holdDuration: 700,
-        actions: [{ action: "hover", selector: "#stat-revenue" }]
-      },
-      {
-        name: "Switch chart",
-        captureDelay: 50,
-        holdDuration: 800,
-        actions: [{ action: "click", selector: "#tab-monthly" }]
-      },
-      {
-        name: "Search",
-        captureDelay: 50,
-        holdDuration: 800,
-        actions: [
-          { action: "click", selector: "#search-input" },
-          { action: "type", selector: "#search-input", text: "conversion", delay: 18 }
-        ]
-      },
-      ...!isMobile ? [{
-        name: "Scroll to projects",
-        captureDelay: 100,
-        holdDuration: 600,
-        actions: [{ action: "scroll", y: 420, smooth: true }]
-      }] : [{
-        name: "Scroll to chart",
-        captureDelay: 100,
-        holdDuration: 600,
-        actions: [{ action: "scroll", y: 250, smooth: true }]
-      }],
-      {
-        name: "Hover row",
-        captureDelay: 50,
-        holdDuration: 600,
-        actions: [{ action: "hover", selector: "#row-1" }]
-      },
-      {
-        name: "Open modal",
-        captureDelay: 100,
-        holdDuration: 800,
-        actions: [{ action: "click", selector: "#btn-new-project" }]
-      },
-      {
-        name: "Type name",
-        captureDelay: 50,
-        holdDuration: 600,
-        actions: [
-          { action: "click", selector: "#project-name" },
-          { action: "type", selector: "#project-name", text: "Clipwise Demo", delay: 20 }
-        ]
-      },
-      {
-        name: "Type desc",
-        captureDelay: 50,
-        holdDuration: 600,
-        actions: [
-          { action: "click", selector: "#project-desc" },
-          { action: "type", selector: "#project-desc", text: "Automated screen recording", delay: 16 }
-        ]
-      },
-      {
-        name: "Create",
-        captureDelay: 100,
-        holdDuration: 1e3,
-        actions: [{ action: "click", selector: "#btn-create" }]
+    if (scenario.steps.length > 0) {
+      const navAction = scenario.steps[0].actions.find((a) => a.action === "navigate");
+      if (navAction && "url" in navAction) {
+        navAction.url = demoUrl;
       }
-    ];
-    const scenarioObj = {
-      name: `Clipwise Demo (${device})`,
-      viewport: { width: vpWidth, height: vpHeight },
-      effects: {
-        zoom: {
-          enabled: true,
-          scale: 1.8,
-          duration: 500,
-          autoZoom: { followCursor: true, maxScale: 2 }
-        },
-        cursor: {
-          enabled: true,
-          size: isMobile ? 16 : 20,
-          clickEffect: true,
-          highlight: true,
-          trail: !isMobile,
-          trailLength: 6
-        },
-        background: {
-          type: "gradient",
-          value: "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
-          padding: isMobile ? 60 : 48,
-          borderRadius: 14,
-          shadow: true
-        },
-        deviceFrame: { enabled: true, type: device, darkMode: true },
-        keystroke: {
-          enabled: true,
-          position: "bottom-center",
-          fontSize: isMobile ? 14 : 16
-        },
-        watermark: {
-          enabled: true,
-          text: "Clipwise",
-          position: "bottom-right",
-          opacity: 0.35,
-          fontSize: 13
-        }
-      },
-      output: {
-        format: options.format,
-        width: outWidth,
-        height: outHeight,
-        fps: 30,
-        preset: "social",
-        outputDir: options.output,
-        filename: `clipwise-demo-${device}`
-      },
-      steps
-    };
-    const scenario = parseScenario2(yaml.stringify(scenarioObj));
+    }
     spinner.succeed(`Demo scenario ready: ${chalk.bold(scenario.name)}`);
     spinner.start("Checking browser...");
     try {
@@ -3890,7 +3898,7 @@ program.command("demo").description("Record a demo video of the Clipwise showcas
     await mkdir2(options.output, { recursive: true });
     const demoRenderer = new CanvasRenderer(scenario.effects, scenario.output, scenario.steps);
     const ext = scenario.output.format === "gif" ? "gif" : "mp4";
-    const outputPath = join2(options.output, `clipwise-demo-${device}.${ext}`);
+    const outputPath = join2(options.output, `clipwise-demo-${options.device}.${ext}`);
     const isConcurrentEligible = ext === "mp4" && demoRenderer.canStreamOnline();
     if (isConcurrentEligible) {
       const recorder = new ClipwiseRecorder();