cokit-cli 1.0.8 → 1.0.9

package/skills/ck-chrome-devtools/scripts/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "chrome-devtools-scripts",
-  "version": "1.1.0",
-  "description": "Browser automation scripts for Chrome DevTools Agent Skill",
-  "type": "module",
-  "scripts": {},
-  "dependencies": {
-    "debug": "^4.4.0",
-    "puppeteer": "^24.15.0",
-    "sharp": "^0.33.5",
-    "yargs": "^17.7.2"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  }
-}

package/skills/ck-chrome-devtools/scripts/performance.js

@@ -1,149 +0,0 @@
-#!/usr/bin/env node
-/**
- * Measure performance metrics and record trace
- * Usage: node performance.js --url https://example.com [--trace trace.json] [--metrics]
- */
-import { getBrowser, getPage, closeBrowser, disconnectBrowser, parseArgs, outputJSON, outputError } from './lib/browser.js';
-import fs from 'fs/promises';
-
-async function measurePerformance() {
-  const args = parseArgs(process.argv.slice(2));
-
-  if (!args.url) {
-    outputError(new Error('--url is required'));
-    return;
-  }
-
-  try {
-    const browser = await getBrowser({
-      headless: args.headless !== 'false'
-    });
-
-    const page = await getPage(browser);
-
-    // Start tracing if requested
-    if (args.trace) {
-      await page.tracing.start({
-        path: args.trace,
-        categories: [
-          'devtools.timeline',
-          'disabled-by-default-devtools.timeline',
-          'disabled-by-default-devtools.timeline.frame'
-        ]
-      });
-    }
-
-    // Navigate
-    await page.goto(args.url, {
-      waitUntil: 'networkidle2'
-    });
-
-    // Stop tracing
-    if (args.trace) {
-      await page.tracing.stop();
-    }
-
-    // Get performance metrics
-    const metrics = await page.metrics();
-
-    // Get Core Web Vitals
-    const vitals = await page.evaluate(() => {
-      return new Promise((resolve) => {
-        const vitals = {
-          LCP: null,
-          FID: null,
-          CLS: 0,
-          FCP: null,
-          TTFB: null
-        };
-
-        // LCP
-        try {
-          new PerformanceObserver((list) => {
-            const entries = list.getEntries();
-            if (entries.length > 0) {
-              const lastEntry = entries[entries.length - 1];
-              vitals.LCP = lastEntry.renderTime || lastEntry.loadTime;
-            }
-          }).observe({ entryTypes: ['largest-contentful-paint'], buffered: true });
-        } catch (e) {}
-
-        // CLS
-        try {
-          new PerformanceObserver((list) => {
-            list.getEntries().forEach((entry) => {
-              if (!entry.hadRecentInput) {
-                vitals.CLS += entry.value;
-              }
-            });
-          }).observe({ entryTypes: ['layout-shift'], buffered: true });
-        } catch (e) {}
-
-        // FCP
-        try {
-          const paintEntries = performance.getEntriesByType('paint');
-          const fcpEntry = paintEntries.find(e => e.name === 'first-contentful-paint');
-          if (fcpEntry) {
-            vitals.FCP = fcpEntry.startTime;
-          }
-        } catch (e) {}
-
-        // TTFB
-        try {
-          const [navigationEntry] = performance.getEntriesByType('navigation');
-          if (navigationEntry) {
-            vitals.TTFB = navigationEntry.responseStart - navigationEntry.requestStart;
-          }
-        } catch (e) {}
-
-        // Wait a bit for metrics to stabilize
-        setTimeout(() => resolve(vitals), 1000);
-      });
-    });
-
-    // Get resource timing
-    const resources = await page.evaluate(() => {
-      return performance.getEntriesByType('resource').map(r => ({
-        name: r.name,
-        type: r.initiatorType,
-        duration: r.duration,
-        size: r.transferSize,
-        startTime: r.startTime
-      }));
-    });
-
-    const result = {
-      success: true,
-      url: page.url(),
-      metrics: {
-        ...metrics,
-        JSHeapUsedSizeMB: (metrics.JSHeapUsedSize / 1024 / 1024).toFixed(2),
-        JSHeapTotalSizeMB: (metrics.JSHeapTotalSize / 1024 / 1024).toFixed(2)
-      },
-      vitals: vitals,
-      resources: {
-        count: resources.length,
-        totalDuration: resources.reduce((sum, r) => sum + r.duration, 0),
-        items: args.resources === 'true' ? resources : undefined
-      }
-    };
-
-    if (args.trace) {
-      result.trace = args.trace;
-    }
-
-    outputJSON(result);
-
-    // Default: disconnect to keep browser running for session persistence
-    // Use --close true to fully close browser
-    if (args.close === 'true') {
-      await closeBrowser();
-    } else {
-      await disconnectBrowser();
-    }
-  } catch (error) {
-    outputError(error);
-  }
-}
-
-measurePerformance();

package/skills/ck-chrome-devtools/scripts/screenshot.js

@@ -1,198 +0,0 @@
-#!/usr/bin/env node
-/**
- * Take a screenshot
- * Usage: node screenshot.js --output screenshot.png [--url https://example.com] [--full-page true] [--selector .element] [--max-size 5] [--no-compress]
- * Supports both CSS and XPath selectors:
- *   - CSS: node screenshot.js --selector ".main-content" --output page.png
- *   - XPath: node screenshot.js --selector "//div[@class='main-content']" --output page.png
- *
- * Session behavior:
- *   By default, browser stays running for session persistence
- *   Use --close true to fully close browser
- */
-import { getBrowser, getPage, closeBrowser, disconnectBrowser, parseArgs, outputJSON, outputError } from './lib/browser.js';
-import { parseSelector, getElement, enhanceError } from './lib/selector.js';
-import fs from 'fs/promises';
-import path from 'path';
-
-/**
- * Check if Sharp is available
- */
-let sharp = null;
-try {
-  sharp = (await import('sharp')).default;
-} catch {
-  // Sharp not installed, compression disabled
-}
-
-/**
- * Compress image using Sharp if it exceeds max size
- * Sharp is 4-5x faster than ImageMagick with lower memory usage
- * Falls back to no compression if Sharp is not installed
- * @param {string} filePath - Path to the image file
- * @param {number} maxSizeMB - Maximum file size in MB (default: 5)
- * @returns {Promise<{compressed: boolean, originalSize: number, finalSize: number}>}
- */
-async function compressImageIfNeeded(filePath, maxSizeMB = 5) {
-  const stats = await fs.stat(filePath);
-  const originalSize = stats.size;
-  const maxSizeBytes = maxSizeMB * 1024 * 1024;
-
-  if (originalSize <= maxSizeBytes) {
-    return { compressed: false, originalSize, finalSize: originalSize };
-  }
-
-  if (!sharp) {
-    console.error('Warning: Sharp not installed. Run npm install to enable automatic compression.');
-    return { compressed: false, originalSize, finalSize: originalSize };
-  }
-
-  try {
-    const ext = path.extname(filePath).toLowerCase();
-    const imageBuffer = await fs.readFile(filePath);
-    const metadata = await sharp(imageBuffer).metadata();
-
-    // First pass: moderate compression
-    let outputBuffer;
-    if (ext === '.png') {
-      // PNG: resize to 90% and compress
-      const newWidth = Math.round(metadata.width * 0.9);
-      outputBuffer = await sharp(imageBuffer)
-        .resize(newWidth)
-        .png({ quality: 85, compressionLevel: 9 })
-        .toBuffer();
-    } else if (ext === '.jpg' || ext === '.jpeg') {
-      // JPEG: quality 80 with progressive encoding
-      outputBuffer = await sharp(imageBuffer)
-        .jpeg({ quality: 80, progressive: true, mozjpeg: true })
-        .toBuffer();
-    } else if (ext === '.webp') {
-      // WebP: quality 80
-      outputBuffer = await sharp(imageBuffer)
-        .webp({ quality: 80 })
-        .toBuffer();
-    } else {
-      // Other formats: convert to JPEG
-      outputBuffer = await sharp(imageBuffer)
-        .jpeg({ quality: 80, progressive: true, mozjpeg: true })
-        .toBuffer();
-    }
-
-    // Second pass: aggressive compression if still too large
-    if (outputBuffer.length > maxSizeBytes) {
-      if (ext === '.png') {
-        const newWidth = Math.round(metadata.width * 0.75);
-        outputBuffer = await sharp(outputBuffer)
-          .resize(newWidth)
-          .png({ quality: 70, compressionLevel: 9 })
-          .toBuffer();
-      } else {
-        outputBuffer = await sharp(outputBuffer)
-          .jpeg({ quality: 60, progressive: true, mozjpeg: true })
-          .toBuffer();
-      }
-    }
-
-    // Write compressed image back to file
-    await fs.writeFile(filePath, outputBuffer);
-
-    return { compressed: true, originalSize, finalSize: outputBuffer.length };
-  } catch (error) {
-    console.error('Compression error:', error.message);
-    return { compressed: false, originalSize, finalSize: originalSize };
-  }
-}
-
-async function screenshot() {
-  const args = parseArgs(process.argv.slice(2));
-
-  if (!args.output) {
-    outputError(new Error('--output is required'));
-    return;
-  }
-
-  try {
-    const browser = await getBrowser({
-      headless: args.headless !== 'false'
-    });
-
-    const page = await getPage(browser);
-
-    // Navigate if URL provided
-    if (args.url) {
-      await page.goto(args.url, {
-        waitUntil: args['wait-until'] || 'networkidle2'
-      });
-    }
-
-    // Ensure output directory exists
-    const outputDir = path.dirname(path.resolve(args.output));
-    await fs.mkdir(outputDir, { recursive: true });
-
-    const screenshotOptions = {
-      path: args.output,
-      type: args.format || 'png',
-      fullPage: args['full-page'] === 'true'
-    };
-
-    if (args.quality) {
-      screenshotOptions.quality = parseInt(args.quality);
-    }
-
-    let buffer;
-    if (args.selector) {
-      // Parse and validate selector
-      const parsed = parseSelector(args.selector);
-
-      // Get element based on selector type
-      const element = await getElement(page, parsed);
-      if (!element) {
-        throw new Error(`Element not found: ${args.selector}`);
-      }
-      buffer = await element.screenshot(screenshotOptions);
-    } else {
-      buffer = await page.screenshot(screenshotOptions);
-    }
-
-    const result = {
-      success: true,
-      output: path.resolve(args.output),
-      size: buffer.length,
-      url: page.url()
-    };
-
-    // Compress image if needed (unless --no-compress flag is set)
-    if (args['no-compress'] !== 'true') {
-      const maxSize = args['max-size'] ? parseFloat(args['max-size']) : 5;
-      const compressionResult = await compressImageIfNeeded(args.output, maxSize);
-
-      if (compressionResult.compressed) {
-        result.compressed = true;
-        result.originalSize = compressionResult.originalSize;
-        result.size = compressionResult.finalSize;
-        result.compressionRatio = ((1 - compressionResult.finalSize / compressionResult.originalSize) * 100).toFixed(2) + '%';
-      }
-    }
-
-    outputJSON(result);
-
-    // Default: disconnect to keep browser running for session persistence
-    // Use --close true to fully close browser
-    if (args.close === 'true') {
-      await closeBrowser();
-    } else {
-      await disconnectBrowser();
-    }
-  } catch (error) {
-    // Enhance error message if selector-related
-    if (args.selector) {
-      const enhanced = enhanceError(error, args.selector);
-      outputError(enhanced);
-    } else {
-      outputError(error);
-    }
-    process.exit(1);
-  }
-}
-
-screenshot();

package/skills/ck-chrome-devtools/scripts/select-ref.js

@@ -1,131 +0,0 @@
-#!/usr/bin/env node
-/**
- * Select and interact with elements by ref from ARIA snapshot
- * Usage: node select-ref.js --ref e5 --action click
- *        node select-ref.js --ref e10 --action fill --value "text"
- *        node select-ref.js --ref e3 --action screenshot --output element.png
- *
- * Actions:
- *   click       - Click the element
- *   fill        - Fill input with --value
- *   screenshot  - Take screenshot of element
- *   text        - Get text content
- *   focus       - Focus the element
- *   hover       - Hover over element
- *
- * Refs are obtained from aria-snapshot.js output (e.g., [ref=e5])
- *
- * Session behavior:
- *   By default, browser stays running for session persistence
- *   Use --close true to fully close browser
- */
-import { getBrowser, getPage, closeBrowser, disconnectBrowser, parseArgs, outputJSON, outputError } from './lib/browser.js';
-import fs from 'fs/promises';
-import path from 'path';
-
-async function selectRef() {
-  const args = parseArgs(process.argv.slice(2));
-
-  if (!args.ref) {
-    outputError(new Error('--ref is required (e.g., --ref e5)'));
-    return;
-  }
-
-  if (!args.action) {
-    outputError(new Error('--action is required (click, fill, screenshot, text, focus, hover)'));
-    return;
-  }
-
-  try {
-    const browser = await getBrowser({
-      headless: args.headless !== 'false'
-    });
-
-    const page = await getPage(browser);
-
-    // Get element by ref from window.__chromeDevToolsRefs
-    const element = await page.evaluateHandle((ref) => {
-      const refs = window.__chromeDevToolsRefs;
-      if (!refs) {
-        throw new Error('No refs available. Run aria-snapshot.js first to generate refs.');
-      }
-      const el = refs.get(ref);
-      if (!el) {
-        throw new Error(`Ref "${ref}" not found. Available refs: ${Array.from(refs.keys()).join(', ')}`);
-      }
-      return el;
-    }, args.ref);
-
-    const elementHandle = element.asElement();
-    if (!elementHandle) {
-      throw new Error(`Could not get element handle for ref "${args.ref}"`);
-    }
-
-    let result = {
-      success: true,
-      ref: args.ref,
-      action: args.action
-    };
-
-    // Perform action
-    switch (args.action) {
-      case 'click':
-        await elementHandle.click();
-        result.message = 'Element clicked';
-        break;
-
-      case 'fill':
-        if (!args.value && args.value !== '') {
-          throw new Error('--value is required for fill action');
-        }
-        await elementHandle.click({ clickCount: 3 }); // Select all
-        await elementHandle.type(args.value);
-        result.message = 'Element filled';
-        result.value = args.value;
-        break;
-
-      case 'screenshot':
-        if (!args.output) {
-          throw new Error('--output is required for screenshot action');
-        }
-        const outputDir = path.dirname(args.output);
-        await fs.mkdir(outputDir, { recursive: true });
-        await elementHandle.screenshot({ path: args.output });
-        result.output = path.resolve(args.output);
-        result.message = 'Screenshot saved';
-        break;
-
-      case 'text':
-        const text = await page.evaluate(el => el.textContent?.trim(), elementHandle);
-        result.text = text;
-        break;
-
-      case 'focus':
-        await elementHandle.focus();
-        result.message = 'Element focused';
-        break;
-
-      case 'hover':
-        await elementHandle.hover();
-        result.message = 'Hovering over element';
-        break;
-
-      default:
-        throw new Error(`Unknown action: ${args.action}. Valid actions: click, fill, screenshot, text, focus, hover`);
-    }
-
-    outputJSON(result);
-
-    // Default: disconnect to keep browser running for session persistence
-    // Use --close true to fully close browser
-    if (args.close === 'true') {
-      await closeBrowser();
-    } else {
-      await disconnectBrowser();
-    }
-  } catch (error) {
-    outputError(error);
-  }
-}
-
-selectRef();

package/skills/ck-chrome-devtools/scripts/snapshot.js

@@ -1,135 +0,0 @@
-#!/usr/bin/env node
-/**
- * Get DOM snapshot with selectors
- * Usage: node snapshot.js [--url https://example.com] [--output snapshot.json]
- */
-import { getBrowser, getPage, closeBrowser, disconnectBrowser, parseArgs, outputJSON, outputError } from './lib/browser.js';
-import fs from 'fs/promises';
-
-async function snapshot() {
-  const args = parseArgs(process.argv.slice(2));
-
-  try {
-    const browser = await getBrowser({
-      headless: args.headless !== 'false'
-    });
-
-    const page = await getPage(browser);
-
-    // Navigate if URL provided
-    if (args.url) {
-      await page.goto(args.url, {
-        waitUntil: args['wait-until'] || 'networkidle2'
-      });
-    }
-
-    // Get interactive elements with metadata
-    const elements = await page.evaluate(() => {
-      const interactiveSelectors = [
-        'a[href]',
-        'button',
-        'input',
-        'textarea',
-        'select',
-        '[onclick]',
-        '[role="button"]',
-        '[role="link"]',
-        '[contenteditable]'
-      ];
-
-      const elements = [];
-      const selector = interactiveSelectors.join(', ');
-      const nodes = document.querySelectorAll(selector);
-
-      nodes.forEach((el, index) => {
-        const rect = el.getBoundingClientRect();
-
-        // Generate unique selector
-        let uniqueSelector = '';
-        if (el.id) {
-          uniqueSelector = `#${el.id}`;
-        } else if (el.className) {
-          const classes = Array.from(el.classList).join('.');
-          uniqueSelector = `${el.tagName.toLowerCase()}.${classes}`;
-        } else {
-          uniqueSelector = el.tagName.toLowerCase();
-        }
-
-        elements.push({
-          index: index,
-          tagName: el.tagName.toLowerCase(),
-          type: el.type || null,
-          id: el.id || null,
-          className: el.className || null,
-          name: el.name || null,
-          value: el.value || null,
-          text: el.textContent?.trim().substring(0, 100) || null,
-          href: el.href || null,
-          selector: uniqueSelector,
-          xpath: getXPath(el),
-          visible: rect.width > 0 && rect.height > 0,
-          position: {
-            x: rect.x,
-            y: rect.y,
-            width: rect.width,
-            height: rect.height
-          }
-        });
-      });
-
-      function getXPath(element) {
-        if (element.id) {
-          return `//*[@id="${element.id}"]`;
-        }
-        if (element === document.body) {
-          return '/html/body';
-        }
-        let ix = 0;
-        const siblings = element.parentNode?.childNodes || [];
-        for (let i = 0; i < siblings.length; i++) {
-          const sibling = siblings[i];
-          if (sibling === element) {
-            return getXPath(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix + 1) + ']';
-          }
-          if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
-            ix++;
-          }
-        }
-        return '';
-      }
-
-      return elements;
-    });
-
-    const result = {
-      success: true,
-      url: page.url(),
-      title: await page.title(),
-      elementCount: elements.length,
-      elements: elements
-    };
-
-    if (args.output) {
-      await fs.writeFile(args.output, JSON.stringify(result, null, 2));
-      outputJSON({
-        success: true,
-        output: args.output,
-        elementCount: elements.length
-      });
-    } else {
-      outputJSON(result);
-    }
-
-    // Default: disconnect to keep browser running for session persistence
-    // Use --close true to fully close browser
-    if (args.close === 'true') {
-      await closeBrowser();
-    } else {
-      await disconnectBrowser();
-    }
-  } catch (error) {
-    outputError(error);
-  }
-}
-
-snapshot();