rad-coder 1.0.2 → 1.0.4

package/README.md

@@ -2,6 +2,12 @@
 
 A development environment for testing ResponsiveAds creative custom JavaScript with hot-reload.
 
+
+
+https://github.com/user-attachments/assets/ce7515c5-0920-4f02-b430-6af69fc2d44d
+
+
+
 ## Quick Start
 
 ```bash

package/bin/cli.js

@@ -2,7 +2,6 @@
 
 const path = require('path');
 const fs = require('fs');
-const readline = require('readline');
 
 // Get the package root directory
 const packageRoot = path.join(__dirname, '..');
@@ -15,50 +14,142 @@ function extractCreativeId(input) {
 }
 
 /**
- * Prompt user with a question and choices
+ * Prompt user with a question and arrow-key selectable choices
  * @param {string} question - The question to ask
  * @param {string[]} choices - Array of choices
  * @returns {Promise<number>} - The index of the selected choice (0-based)
  */
 function promptUser(question, choices) {
   return new Promise((resolve) => {
-    const rl = readline.createInterface({
-      input: process.stdin,
-      output: process.stdout
-    });
-
-    console.log(`\n${question}`);
-    choices.forEach((choice, index) => {
-      console.log(`  [${index + 1}] ${choice}`);
-    });
-
-    const ask = () => {
-      rl.question('\nChoice (enter number): ', (answer) => {
-        const num = parseInt(answer, 10);
-        if (num >= 1 && num <= choices.length) {
-          rl.close();
-          resolve(num - 1);
+    let selected = 0;
+
+    // Print question
+    console.log(`\n${question}\n`);
+
+    function draw() {
+      // Move cursor up to overwrite previous menu lines
+      if (selected !== -1) {
+        process.stdout.write(`\x1B[${choices.length}A`);
+      }
+      for (let i = 0; i < choices.length; i++) {
+        process.stdout.write('\x1B[2K'); // clear line
+        if (i === selected) {
+          process.stdout.write(`  \x1B[36m\x1B[1m❯ ${choices[i]}\x1B[0m\n`);
         } else {
-          console.log(`Please enter a number between 1 and ${choices.length}`);
-          ask();
+          process.stdout.write(`    ${choices[i]}\n`);
         }
-      });
-    };
+      }
+    }
+
+    // Initial draw (set selected to -1 so it doesn't move cursor up first time)
+    const initial = selected;
+    selected = -1;
+    // Print placeholder lines first
+    for (let i = 0; i < choices.length; i++) {
+      process.stdout.write('\n');
+    }
+    // Move back up and draw properly
+    process.stdout.write(`\x1B[${choices.length}A`);
+    selected = initial;
+    draw();
+
+    // Enable raw mode for keypress detection
+    if (process.stdin.isTTY) {
+      process.stdin.setRawMode(true);
+    }
+    process.stdin.resume();
+
+    function onData(data) {
+      const key = data.toString();
+
+      // Ctrl+C
+      if (key === '\x03') {
+        cleanup();
+        process.exit(0);
+        return;
+      }
+
+      // Up arrow
+      if (key === '\x1B[A') {
+        selected = Math.max(0, selected - 1);
+        draw();
+        return;
+      }
+
+      // Down arrow
+      if (key === '\x1B[B') {
+        selected = Math.min(choices.length - 1, selected + 1);
+        draw();
+        return;
+      }
 
-    ask();
+      // Enter
+      if (key === '\r' || key === '\n') {
+        cleanup();
+        resolve(selected);
+        return;
+      }
+
+      // Number keys for quick select
+      const num = parseInt(key, 10);
+      if (num >= 1 && num <= choices.length) {
+        selected = num - 1;
+        draw();
+        cleanup();
+        resolve(selected);
+        return;
+      }
+    }
+
+    function cleanup() {
+      process.stdin.removeListener('data', onData);
+      if (process.stdin.isTTY) {
+        process.stdin.setRawMode(false);
+      }
+      process.stdin.pause();
+    }
+
+    process.stdin.on('data', onData);
   });
 }
 
-// Get creative ID from command line argument
-const input = process.argv[2];
+// Get creative ID from command line argument (skip flags)
+const args = process.argv.slice(2);
+let input = null;
+let editorFlag = null;
+let noEditor = false;
+
+for (const arg of args) {
+  if (arg.startsWith('--editor=')) {
+    editorFlag = arg.split('=')[1];
+  } else if (arg === '--no-editor') {
+    noEditor = true;
+  } else if (!arg.startsWith('--')) {
+    input = arg;
+  }
+}
+
+// Pass editor preferences via environment variables
+if (editorFlag) {
+  process.env.RAD_CODER_EDITOR = editorFlag;
+}
+if (noEditor) {
+  process.env.RAD_CODER_NO_EDITOR = '1';
+}
+
 const creativeId = extractCreativeId(input);
 
 if (!creativeId) {
-  console.log('Usage: npx rad-coder <creativeId or previewUrl>');
+  console.log('Usage: npx rad-coder <creativeId or previewUrl> [options]');
+  console.log('');
+  console.log('Options:');
+  console.log('  --editor=<cmd>   Set code editor command (default: code)');
+  console.log('  --no-editor      Don\'t auto-open code editor');
   console.log('');
   console.log('Examples:');
   console.log('  npx rad-coder 697b80fcc6e904025f5147a0');
   console.log('  npx rad-coder https://studio.responsiveads.com/creatives/697b80fcc6e904025f5147a0/preview');
+  console.log('  npx rad-coder 697b80fcc6e904025f5147a0 --editor=cursor');
   process.exit(1);
 }
 

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "rad-coder",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Development environment for testing ResponsiveAds creative custom JS with hot-reload",
   "bin": {
-    "rad-coder": "./bin/cli.js"
+    "rad-coder": "bin/cli.js"
   },
   "scripts": {
     "dev": "node bin/cli.js",
@@ -26,7 +26,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/ResponsiveAds/rad-coder"
+    "url": "git+https://github.com/ResponsiveAds/rad-coder.git"
   },
   "author": "ResponsiveAds",
   "license": "MIT",

package/public/test.html

@@ -87,23 +87,8 @@
     }
     
     .ad-container {
-      padding: 20px;
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-    }
-    
-    .ad-wrapper {
-      background: #fff;
-      border-radius: 8px;
-      overflow: hidden;
-      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
     }
     
-    .inner-content {
-      width: 100%;
-      min-height: 300px;
-    }
     
     /* Toast notification for reload */
     .toast {
@@ -180,6 +165,8 @@
         document.getElementById('creative-id').textContent = 'Loading...';
         
         const config = await fetchConfigWithRetry();
+        //not sure why we get URL that does not work https://edit.responsiveads.com/flowlines
+        config.flSource = 'https://s3-eu-west-1.amazonaws.com/publish.responsiveads.com/flowlines/';
         
         // Update UI
         document.getElementById('creative-id').textContent = `ID: ${config.creativeId}`;
@@ -231,7 +218,7 @@
         tracking: false,
         isFluid: config.isFluid,
         screenshot: false,
-        crossOrigin: true,
+        crossOrigin: false,
         flSource: config.flSource,
         config: { 
           _default: { 

package/server/index.js

@@ -5,6 +5,50 @@ const chokidar = require('chokidar');
 const path = require('path');
 const fs = require('fs');
 const http = require('http');
+const { spawn } = require('child_process');
+const TUI = require('./tui');
+
+// ============================================================
+// TUI Instance & Logging
+// ============================================================
+
+let tui = null;
+
+/**
+ * Log a message — routes to TUI scroll area when active, otherwise console.log
+ */
+function log(message) {
+  if (tui && !tui.destroyed) {
+    tui.log(message);
+  } else {
+    console.log(message);
+  }
+}
+
+/**
+ * Open the user's code editor
+ */
+function openEditor() {
+  const editorCmd = process.env.RAD_CODER_EDITOR
+    || process.env.VISUAL
+    || process.env.EDITOR
+    || 'code';
+
+  try {
+    const child = spawn(editorCmd, [userDir], {
+      detached: true,
+      stdio: 'ignore',
+      shell: process.platform === 'win32'
+    });
+    child.unref();
+    child.on('error', (err) => {
+      log(` ✗ Could not open editor "${editorCmd}": ${err.message}`);
+    });
+    log(` Editor (${editorCmd}) opened`);
+  } catch (err) {
+    log(` ✗ Could not open editor "${editorCmd}": ${err.message}`);
+  }
+}
 
 // ============================================================
 // Directory Configuration
@@ -113,8 +157,8 @@ function extractJsonObject(html, startMarker) {
 async function fetchCreativeConfig(creativeId) {
   const previewUrl = `https://studio.responsiveads.com/creatives/${creativeId}/preview`;
   
-  console.log(` Fetching creative config from studio...`);
-  console.log(` URL: ${previewUrl}\n`);
+  log(` Fetching creative config from studio...`);
+  log(` URL: ${previewUrl}\n`);
   
   try {
     const response = await fetch(previewUrl);
@@ -261,7 +305,7 @@ async function fetchCreativeConfig(creativeId) {
     };
     
   } catch (error) {
-    console.error(`\n Failed to fetch creative config: ${error.message}\n`);
+    log(`\n ✗ Failed to fetch creative config: ${error.message}\n`);
     process.exit(1);
   }
 }
@@ -281,11 +325,11 @@ const clients = new Set();
 
 wss.on('connection', (ws) => {
   clients.add(ws);
-  console.log('Browser connected for hot-reload');
+  log(' Browser connected for hot-reload');
   
   ws.on('close', () => {
     clients.delete(ws);
-    console.log('Browser disconnected');
+    log(' Browser disconnected');
   });
 });
 
@@ -341,14 +385,14 @@ const watcher = chokidar.watch(customJsWatchPath, {
   ignoreInitial: true
 });
 
-watcher.on('change', (filePath) => {
-  console.log(`\n File changed: ${path.basename(filePath)}`);
-  console.log(' Reloading browsers...\n');
+watcher.on('change', (changedPath) => {
+  log(` File changed: ${path.basename(changedPath)}`);
+  log(' Reloading browsers...');
   broadcastReload();
 });
 
 watcher.on('error', (error) => {
-  console.error('Watcher error:', error);
+  log(` Watcher error: ${error.message}`);
 });
 
 // ============================================================
@@ -390,7 +434,6 @@ async function start(prefetchedConfig = null) {
     console.log(` Test page: http://${host}:${port}/test.html`);
     console.log(`\n Working directory: ${userDir}`);
     console.log(' Edit custom.js and save to hot-reload\n');
-    console.log(' Press Ctrl+C to stop\n');
     
     // Small delay to ensure server is fully ready before opening browser
     await new Promise(resolve => setTimeout(resolve, 500));
@@ -399,11 +442,152 @@ async function start(prefetchedConfig = null) {
     try {
       const open = (await import('open')).default;
       await open(`http://${host}:${port}/test.html`);
-      console.log(' Browser opened automatically\n');
+      console.log(' Browser opened automatically');
     } catch (err) {
-      console.log(' Could not auto-open browser:', err.message);
-      console.log(` Please open http://${host}:${port}/test.html manually\n`);
+      console.log(` Could not auto-open browser: ${err.message}`);
+      console.log(` Please open http://${host}:${port}/test.html manually`);
+    }
+
+    // Auto-open editor (unless --no-editor)
+    if (!process.env.RAD_CODER_NO_EDITOR) {
+      openEditor();
+    }
+
+    // Start interactive TUI (only if stdin is a TTY)
+    if (process.stdin.isTTY) {
+      await new Promise(resolve => setTimeout(resolve, 300));
+      startInteractiveMenu();
+    } else {
+      console.log(' Press Ctrl+C to stop\n');
+    }
+  });
+}
+
+// ============================================================
+// Interactive Menu
+// ============================================================
+
+function getMainMenuItems() {
+  const items = [
+    { label: 'Open Browser', id: 'open-browser' },
+    { label: 'Open Editor', id: 'open-editor' },
+  ];
+
+  if (creativeConfig && creativeConfig.allFlowlines.length > 1) {
+    items.push({ label: 'Switch Flowline', id: 'switch-flowline', description: `(${creativeConfig.flowlineName})` });
+  }
+
+  items.push(
+    { label: 'Server Status', id: 'status' },
+    { label: 'Clear Logs', id: 'clear' },
+    { label: 'Restart Server', id: 'restart' },
+    { label: 'Stop Server', id: 'stop' },
+  );
+
+  return items;
+}
+
+function getFlowlineMenuItems() {
+  const items = [{ label: '← Back', id: 'back' }];
+  creativeConfig.allFlowlines.forEach((fl, i) => {
+    const marker = fl.id === creativeConfig.flowlineId ? ' ✓' : '';
+    items.push({ label: `${fl.name}${marker}`, id: `flowline-${i}`, flowlineIndex: i });
+  });
+  return items;
+}
+
+function startInteractiveMenu() {
+  tui = new TUI();
+
+  let inSubMenu = false;
+
+  function handleSelect(item) {
+    // Sub-menu: flowline selection
+    if (inSubMenu) {
+      if (item.id === 'back') {
+        inSubMenu = false;
+        tui.updateMenu(getMainMenuItems());
+        return;
+      }
+      // Switch flowline
+      const fl = creativeConfig.allFlowlines[item.flowlineIndex];
+      if (fl) {
+        creativeConfig.flowlineId = fl.id;
+        creativeConfig.flowlineName = fl.name;
+        creativeConfig.sizes = fl.sizes || [];
+        creativeConfig.isFluid = fl.isFluid || false;
+        log(` Switched to flowline: ${fl.name}`);
+        broadcastReload();
+      }
+      inSubMenu = false;
+      tui.updateMenu(getMainMenuItems());
+      return;
+    }
+
+    // Main menu actions
+    switch (item.id) {
+      case 'open-browser': {
+        const { port, host } = creativeConfig.server;
+        import('open').then(mod => {
+          mod.default(`http://${host}:${port}/test.html`);
+          log(' Browser opened');
+        }).catch(err => {
+          log(` Could not open browser: ${err.message}`);
+        });
+        break;
+      }
+
+      case 'open-editor':
+        openEditor();
+        break;
+
+      case 'switch-flowline':
+        inSubMenu = true;
+        tui.updateMenu(getFlowlineMenuItems());
+        break;
+
+      case 'status': {
+        const { port, host } = creativeConfig.server;
+        log('');
+        log(' ── Server Status ──────────────────');
+        log(` Creative ID : ${creativeConfig.creativeId}`);
+        log(` Flowline    : ${creativeConfig.flowlineName}`);
+        log(` Flowline ID : ${creativeConfig.flowlineId}`);
+        log(` Sizes       : ${creativeConfig.sizes.join(', ') || 'N/A'}`);
+        log(` Is Fluid    : ${creativeConfig.isFluid}`);
+        log(` Server      : http://${host}:${port}`);
+        log(` Directory   : ${userDir}`);
+        log(` Browsers    : ${clients.size} connected`);
+        log(' ───────────────────────────────────');
+        log('');
+        break;
+      }
+
+      case 'clear':
+        tui.clearLogs();
+        break;
+
+      case 'restart': {
+        log(' Restarting server...');
+        const { port, host } = creativeConfig.server;
+        server.close(() => {
+          server.listen(port, host, () => {
+            log(` Server restarted on http://${host}:${port}`);
+            broadcastReload();
+          });
+        });
+        break;
+      }
+
+      case 'stop':
+        gracefulShutdown();
+        break;
     }
+  }
+
+  tui.init({
+    menuItems: getMainMenuItems(),
+    onSelect: handleSelect,
   });
 }
 
@@ -423,7 +607,10 @@ if (!isModule) {
 }
 
 // Graceful shutdown
-process.on('SIGINT', () => {
+function gracefulShutdown() {
+  if (tui) {
+    tui.destroy();
+  }
   console.log('\n Shutting down...');
   watcher.close();
   wss.close();
@@ -431,4 +618,6 @@ process.on('SIGINT', () => {
     console.log(' Server stopped\n');
     process.exit(0);
   });
-});
+}
+
+process.on('SIGINT', gracefulShutdown);

package/server/tui.js

@@ -0,0 +1,282 @@
+/**
+ * Terminal UI Module
+ * 
+ * Provides an interactive arrow-key menu pinned at the bottom of the terminal
+ * with a scrolling log area above it. Uses raw ANSI escape codes — zero dependencies.
+ */
+
+const readline = require('readline');
+
+// ANSI escape helpers
+const ESC = '\x1B';
+const CSI = `${ESC}[`;
+
+const ansi = {
+  clearScreen: `${CSI}2J`,
+  clearLine: `${CSI}2K`,
+  cursorTo: (row, col) => `${CSI}${row};${col}H`,
+  cursorSave: `${ESC}7`,
+  cursorRestore: `${ESC}8`,
+  scrollRegion: (top, bottom) => `${CSI}${top};${bottom}r`,
+  resetScrollRegion: `${CSI}r`,
+  showCursor: `${CSI}?25h`,
+  hideCursor: `${CSI}?25l`,
+  bold: `${CSI}1m`,
+  dim: `${CSI}2m`,
+  cyan: `${CSI}36m`,
+  green: `${CSI}32m`,
+  yellow: `${CSI}33m`,
+  inverse: `${CSI}7m`,
+  reset: `${CSI}0m`,
+};
+
+class TUI {
+  constructor() {
+    this.menuItems = [];
+    this.selectedIndex = 0;
+    this.onSelect = null;
+    this.destroyed = false;
+    this.menuHeight = 0; // computed from items + header + border lines
+    this._boundKeyHandler = this._handleKeypress.bind(this);
+    this._boundResize = this._handleResize.bind(this);
+  }
+
+  /**
+   * Initialize the TUI
+   * @param {Object} options
+   * @param {Array<{label: string, description?: string}>} options.menuItems
+   * @param {Function} options.onSelect - callback(item, index)
+   */
+  init(options) {
+    this.menuItems = options.menuItems || [];
+    this.onSelect = options.onSelect || (() => {});
+    this.selectedIndex = 0;
+    this.menuHeight = this.menuItems.length + 3; // items + header + top/bottom borders
+
+    // Set raw mode for keypress detection
+    if (process.stdin.isTTY) {
+      process.stdin.setRawMode(true);
+      process.stdin.resume();
+      process.stdin.on('data', this._boundKeyHandler);
+    }
+
+    // Handle terminal resize
+    process.stdout.on('resize', this._boundResize);
+
+    // Initial draw
+    this._setupScreen();
+    this._drawMenu();
+  }
+
+  /**
+   * Set up ANSI scrolling region (log area = top, menu = bottom)
+   */
+  _setupScreen() {
+    const rows = process.stdout.rows || 24;
+    const logBottom = rows - this.menuHeight;
+
+    // Set scrolling region to the top portion only
+    process.stdout.write(ansi.scrollRegion(1, logBottom));
+
+    // Position cursor in the log area
+    process.stdout.write(ansi.cursorTo(logBottom, 1));
+  }
+
+  /**
+   * Handle terminal resize
+   */
+  _handleResize() {
+    if (this.destroyed) return;
+    this._setupScreen();
+    this._drawMenu();
+  }
+
+  /**
+   * Handle raw keypress data
+   */
+  _handleKeypress(data) {
+    if (this.destroyed) return;
+
+    const key = data.toString();
+
+    // Ctrl+C
+    if (key === '\x03') {
+      this.destroy();
+      process.emit('SIGINT');
+      return;
+    }
+
+    // Up arrow
+    if (key === `${CSI}A`) {
+      this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+      this._drawMenu();
+      return;
+    }
+
+    // Down arrow
+    if (key === `${CSI}B`) {
+      this.selectedIndex = Math.min(this.menuItems.length - 1, this.selectedIndex + 1);
+      this._drawMenu();
+      return;
+    }
+
+    // Enter
+    if (key === '\r' || key === '\n') {
+      const item = this.menuItems[this.selectedIndex];
+      if (item && this.onSelect) {
+        this.onSelect(item, this.selectedIndex);
+      }
+      return;
+    }
+
+    // Number keys 1-9 for quick select
+    const num = parseInt(key, 10);
+    if (num >= 1 && num <= this.menuItems.length) {
+      this.selectedIndex = num - 1;
+      this._drawMenu();
+      const item = this.menuItems[this.selectedIndex];
+      if (item && this.onSelect) {
+        this.onSelect(item, this.selectedIndex);
+      }
+      return;
+    }
+  }
+
+  /**
+   * Draw the menu at the bottom of the terminal
+   */
+  _drawMenu() {
+    if (this.destroyed) return;
+
+    const rows = process.stdout.rows || 24;
+    const cols = process.stdout.cols || 80;
+    const menuStartRow = rows - this.menuHeight + 1;
+
+    // Save cursor position (in log area)
+    let output = ansi.cursorSave;
+    output += ansi.hideCursor;
+
+    // Draw top border
+    output += ansi.cursorTo(menuStartRow, 1);
+    output += ansi.clearLine;
+    output += `${ansi.dim}${'─'.repeat(Math.min(cols, 60))}${ansi.reset}`;
+
+    // Draw header
+    output += ansi.cursorTo(menuStartRow + 1, 1);
+    output += ansi.clearLine;
+    output += `${ansi.bold} ↑↓ Navigate  Enter Select  1-${this.menuItems.length} Quick Select${ansi.reset}`;
+
+    // Draw menu items
+    for (let i = 0; i < this.menuItems.length; i++) {
+      const row = menuStartRow + 2 + i;
+      const item = this.menuItems[i];
+      const isSelected = i === this.selectedIndex;
+
+      output += ansi.cursorTo(row, 1);
+      output += ansi.clearLine;
+
+      if (isSelected) {
+        output += `${ansi.cyan}${ansi.bold} ❯ ${item.label}${ansi.reset}`;
+        if (item.description) {
+          output += `${ansi.dim}  ${item.description}${ansi.reset}`;
+        }
+      } else {
+        output += `   ${item.label}`;
+        if (item.description) {
+          output += `${ansi.dim}  ${item.description}${ansi.reset}`;
+        }
+      }
+    }
+
+    // Restore cursor position (back to log area)
+    output += ansi.cursorRestore;
+    output += ansi.showCursor;
+
+    process.stdout.write(output);
+  }
+
+  /**
+   * Update menu items (e.g., for sub-menus)
+   */
+  updateMenu(items) {
+    const oldHeight = this.menuHeight;
+    this.menuItems = items;
+    this.selectedIndex = 0;
+    this.menuHeight = items.length + 3;
+
+    if (this.menuHeight !== oldHeight) {
+      // Clear old menu area
+      const rows = process.stdout.rows || 24;
+      const oldMenuStart = rows - oldHeight + 1;
+      let clear = '';
+      for (let i = oldMenuStart; i <= rows; i++) {
+        clear += ansi.cursorTo(i, 1) + ansi.clearLine;
+      }
+      process.stdout.write(clear);
+
+      // Reconfigure scroll region
+      this._setupScreen();
+    }
+
+    this._drawMenu();
+  }
+
+  /**
+   * Add a log message to the scrolling log area
+   */
+  log(message) {
+    if (this.destroyed) {
+      console.log(message);
+      return;
+    }
+
+    const rows = process.stdout.rows || 24;
+    const logBottom = rows - this.menuHeight;
+
+    // Save cursor, move to bottom of log area, print message (scrolls within region)
+    let output = ansi.cursorSave;
+    output += ansi.cursorTo(logBottom, 1);
+    output += '\n' + message;
+    output += ansi.cursorRestore;
+
+    process.stdout.write(output);
+  }
+
+  /**
+   * Clear the log area
+   */
+  clearLogs() {
+    const rows = process.stdout.rows || 24;
+    const logBottom = rows - this.menuHeight;
+
+    let output = '';
+    for (let i = 1; i <= logBottom; i++) {
+      output += ansi.cursorTo(i, 1) + ansi.clearLine;
+    }
+    output += ansi.cursorTo(1, 1);
+    process.stdout.write(output);
+  }
+
+  /**
+   * Destroy the TUI and restore terminal state
+   */
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+
+    // Remove listeners
+    process.stdin.removeListener('data', this._boundKeyHandler);
+    process.stdout.removeListener('resize', this._boundResize);
+
+    // Restore terminal
+    process.stdout.write(ansi.resetScrollRegion);
+    process.stdout.write(ansi.showCursor);
+
+    if (process.stdin.isTTY) {
+      process.stdin.setRawMode(false);
+    }
+    process.stdin.pause();
+  }
+}
+
+module.exports = TUI;

package/templates/AGENTS.md

@@ -4,6 +4,9 @@ You are an agent writing only JS for a responsive creative. The creative was bui
 
 To do this you can only edit the `custom.js` file in this directory. When you edit and save this file the creative will be automatically loaded on the test page: http://localhost:3000/test.html. The code you wrote in `custom.js` will be applied to the creative.
 
+Use the http://localhost:3000/test.html URL to open creative in the browser. Inspect the HTML dom so that you can use IDs from elements inside the custom.js code. Alo use the browser to test the code and make sure there are no console.log errors. 
+
+
 Use modern JS standards and code practices.
 
 We can use custom in situations when we want to add extra interactivity to our responsive creative. Use the Radical API to access elements added from the editor, update their behavior, and add custom functionalities to your ad.
@@ -16,6 +19,32 @@ You can use all available JavaScript functions to manipulate element position an
 
 This document outlines the specific implementation patterns and lifecycle hooks for the Radical API. Use this guide to programmatically control elements, manage dynamic data (DCO), and handle cross-window interactions in ResponsiveAds creatives.
 
+Use this as a good starting point always call functions from `!rad.getMergedContent().inEditor` check to prevent messing up the editor code. 
+
+```
+var rad = Radical.getAdByWindow(window);
+var container = rad.getContainer();
+
+var inScreenshot = window.location.href.indexOf('preview?screenshot=1') > -1 ? true : false;
+
+
+if (!rad.getMergedContent().inEditor) {
+    rad.onLoad(onAdLoaded);
+    rad.onBeforeRender(onBeforeRender);  
+    rad.onRender(onAdRender);
+    
+}
+function onAdLoaded() {}
+function onBeforeRender(arg) {
+    console.log('onBeforeRender', arg);
+}
+function onAdRender() {
+    console.log('onAdRender');
+    const el = rad.getElementById('a2');
+    console.log(el);
+}
+```
+
 ## 1. Initializing the Controller
 
 Every script must first reference the ad instance and its container.