@web-auto/camo 0.1.3 → 0.1.4

package/src/commands/events.mjs

@@ -0,0 +1,152 @@
+import { createProgressWsServer } from '../events/ws-server.mjs';
+import { getProgressEventsFile, readRecentProgressEvents, safeAppendProgressEvent } from '../events/progress-log.mjs';
+import { ensureProgressEventDaemon } from '../events/daemon.mjs';
+
+function readFlagValue(args, names) {
+  for (let i = 0; i < args.length; i += 1) {
+    if (!names.includes(args[i])) continue;
+    const value = args[i + 1];
+    if (!value || String(value).startsWith('-')) return null;
+    return value;
+  }
+  return null;
+}
+
+function hasFlag(args, name) {
+  return args.includes(name);
+}
+
+function buildQuery(args) {
+  const profileId = readFlagValue(args, ['--profile', '-p']);
+  const runId = readFlagValue(args, ['--run-id']);
+  const mode = readFlagValue(args, ['--mode']);
+  const events = readFlagValue(args, ['--events']);
+  const replay = Math.max(0, Number(readFlagValue(args, ['--replay']) ?? 50) || 50);
+  const qs = new URLSearchParams();
+  if (profileId) qs.set('profileId', profileId);
+  if (runId) qs.set('runId', runId);
+  if (mode) qs.set('mode', mode);
+  if (events) qs.set('events', events);
+  qs.set('replay', String(replay));
+  return qs;
+}
+
+async function handleEventsServe(args) {
+  const host = readFlagValue(args, ['--host']) || '127.0.0.1';
+  const port = Math.max(1, Number(readFlagValue(args, ['--port']) || 7788) || 7788);
+  const pollMs = Math.max(80, Number(readFlagValue(args, ['--poll-ms']) || 220) || 220);
+  const fromStart = hasFlag(args, '--from-start');
+
+  const server = createProgressWsServer({ host, port, pollMs, fromStart });
+  const info = await server.start();
+  console.log(JSON.stringify({
+    ok: true,
+    command: 'events.serve',
+    ...info,
+    message: 'Progress WS server started. Press Ctrl+C to stop.',
+  }, null, 2));
+
+  const stop = async (reason = 'signal_interrupt') => {
+    await server.stop();
+    console.log(JSON.stringify({ ok: true, event: 'events.serve.stop', reason }));
+    process.exit(0);
+  };
+  process.once('SIGINT', () => {
+    stop('SIGINT');
+  });
+  process.once('SIGTERM', () => {
+    stop('SIGTERM');
+  });
+
+  await new Promise(() => {});
+}
+
+async function handleEventsTail(args) {
+  const host = readFlagValue(args, ['--host']) || '127.0.0.1';
+  const port = Math.max(1, Number(readFlagValue(args, ['--port']) || 7788) || 7788);
+  await ensureProgressEventDaemon({ host, port });
+  const qs = buildQuery(args);
+  const wsUrl = `ws://${host}:${port}/events?${qs.toString()}`;
+  if (typeof WebSocket !== 'function') {
+    throw new Error('Global WebSocket is unavailable in this Node runtime');
+  }
+
+  const socket = new WebSocket(wsUrl);
+  socket.addEventListener('open', () => {
+    console.log(JSON.stringify({ ok: true, command: 'events.tail', wsUrl }));
+  });
+  socket.addEventListener('message', (event) => {
+    const text = typeof event.data === 'string' ? event.data : String(event.data);
+    console.log(text);
+  });
+  socket.addEventListener('close', () => {
+    process.exit(0);
+  });
+  socket.addEventListener('error', (err) => {
+    console.error(JSON.stringify({ ok: false, command: 'events.tail', wsUrl, error: err?.message || String(err) }));
+    process.exit(1);
+  });
+  process.once('SIGINT', () => {
+    socket.close();
+  });
+
+  await new Promise(() => {});
+}
+
+function handleEventsRecent(args) {
+  const limit = Math.max(1, Number(readFlagValue(args, ['--limit', '-n']) || 50) || 50);
+  const rows = readRecentProgressEvents(limit);
+  console.log(JSON.stringify({
+    ok: true,
+    command: 'events.recent',
+    file: getProgressEventsFile(),
+    count: rows.length,
+    events: rows,
+  }, null, 2));
+}
+
+function handleEventsEmit(args) {
+  const eventName = readFlagValue(args, ['--event']) || 'manual.emit';
+  const mode = readFlagValue(args, ['--mode']) || 'normal';
+  const profileId = readFlagValue(args, ['--profile', '-p']) || null;
+  const runId = readFlagValue(args, ['--run-id']) || null;
+  const payloadRaw = readFlagValue(args, ['--payload']) || '{}';
+  let payload = null;
+  try {
+    payload = JSON.parse(payloadRaw);
+  } catch {
+    payload = { raw: payloadRaw };
+  }
+  const appended = safeAppendProgressEvent({
+    source: 'events.emit',
+    mode,
+    profileId,
+    runId,
+    event: eventName,
+    payload,
+  });
+  console.log(JSON.stringify({ ok: Boolean(appended), command: 'events.emit', event: appended }, null, 2));
+}
+
+export async function handleEventsCommand(args) {
+  const sub = args[1];
+  switch (sub) {
+    case 'serve':
+      return handleEventsServe(args);
+    case 'tail':
+      return handleEventsTail(args);
+    case 'recent':
+      return handleEventsRecent(args);
+    case 'emit':
+      return handleEventsEmit(args);
+    default:
+      console.log(`Usage: camo events <serve|tail|recent|emit> [options]
+
+Commands:
+  serve [--host 127.0.0.1] [--port 7788] [--poll-ms 220] [--from-start]
+  tail [--host 127.0.0.1] [--port 7788] [--profile <id>] [--run-id <id>] [--mode <normal|autoscript>] [--events e1,e2] [--replay 50]
+  recent [--limit 50]
+  emit --event <name> [--mode <normal|autoscript>] [--profile <id>] [--run-id <id>] [--payload '{"k":"v"}']
+`);
+  }
+}

package/src/commands/lifecycle.mjs

@@ -10,6 +10,7 @@ import {
   getSessionInfo, unregisterSession, markSessionClosed, cleanupStaleSessions,
   listRegisteredSessions, registerSession, updateSession
 } from '../lifecycle/session-registry.mjs';
+import { stopAllSessionWatchdogs, stopSessionWatchdog } from '../lifecycle/session-watchdog.mjs';
 
 export async function handleCleanupCommand(args) {
   const sub = args[1];
@@ -36,14 +37,21 @@ export async function handleCleanupCommand(args) {
         const sessions = Array.isArray(status?.sessions) ? status.sessions : [];
         
         for (const session of sessions) {
+          let stopError = null;
           try {
             await callAPI('stop', { profileId: session.profileId });
+          } catch (err) {
+            stopError = err;
+          } finally {
+            stopSessionWatchdog(session.profileId);
             releaseLock(session.profileId);
             markSessionClosed(session.profileId);
-            results.push({ profileId: session.profileId, ok: true });
-          } catch (err) {
-            results.push({ profileId: session.profileId, ok: false, error: err.message });
           }
+          results.push(
+            stopError
+              ? { profileId: session.profileId, ok: false, error: stopError.message }
+              : { profileId: session.profileId, ok: true },
+          );
         }
       } catch {}
     }
@@ -51,6 +59,7 @@ export async function handleCleanupCommand(args) {
     // Cleanup stale locks and sessions
     const cleanedLocks = cleanupStaleLocks();
     const cleanedSessions = cleanupStaleSessions();
+    stopAllSessionWatchdogs();
     
     console.log(JSON.stringify({
       ok: true,
@@ -74,6 +83,7 @@ export async function handleCleanupCommand(args) {
     } catch {}
   }
   
+  stopSessionWatchdog(profileId);
   releaseLock(profileId);
   markSessionClosed(profileId);
   console.log(JSON.stringify({ ok: true, profileId }, null, 2));
@@ -86,11 +96,13 @@ export async function handleForceStopCommand(args) {
   
   try {
     const result = await callAPI('stop', { profileId, force: true });
+    stopSessionWatchdog(profileId);
     releaseLock(profileId);
     markSessionClosed(profileId);
     console.log(JSON.stringify({ ok: true, profileId, ...result }, null, 2));
   } catch (err) {
     // Even if stop fails, cleanup local state
+    stopSessionWatchdog(profileId);
     releaseLock(profileId);
     markSessionClosed(profileId);
     console.log(JSON.stringify({ ok: true, profileId, warning: 'Session stopped locally but remote stop failed: ' + err.message }, null, 2));
@@ -204,6 +216,7 @@ export async function handleRecoverCommand(args) {
   
   if (!serviceUp) {
     // Service is down - session cannot be recovered, clean up
+    stopSessionWatchdog(profileId);
     unregisterSession(profileId);
     releaseLock(profileId);
     console.log(JSON.stringify({
@@ -240,6 +253,7 @@ export async function handleRecoverCommand(args) {
       }, null, 2));
     } else {
       // Session not in browser service - clean up
+      stopSessionWatchdog(profileId);
       unregisterSession(profileId);
       releaseLock(profileId);
       console.log(JSON.stringify({

package/src/commands/window.mjs

@@ -24,7 +24,38 @@ export async function handleWindowCommand(args) {
     const width = parseInt(args[widthIdx + 1]);
     const height = parseInt(args[heightIdx + 1]);
     const result = await callAPI('window:resize', { profileId, width, height });
-    console.log(JSON.stringify(result, null, 2));
+    const measured = await callAPI('evaluate', {
+      profileId,
+      script: '({ innerWidth: window.innerWidth, innerHeight: window.innerHeight, outerWidth: window.outerWidth, outerHeight: window.outerHeight })',
+    });
+    const innerWidth = Math.max(320, Number(measured?.result?.innerWidth || 0) || 0);
+    const innerHeight = Math.max(240, Number(measured?.result?.innerHeight || 0) || 0);
+    const outerWidth = Math.max(320, Number(measured?.result?.outerWidth || 0) || innerWidth);
+    const outerHeight = Math.max(240, Number(measured?.result?.outerHeight || 0) || innerHeight);
+    const rawDeltaW = Math.max(0, outerWidth - innerWidth);
+    const rawDeltaH = Math.max(0, outerHeight - innerHeight);
+    const frameW = rawDeltaW > 400 ? 16 : Math.min(rawDeltaW, 120);
+    const frameH = rawDeltaH > 400 ? 88 : Math.min(rawDeltaH, 180);
+    const targetViewportWidth = Math.max(320, outerWidth - frameW);
+    const targetViewportHeight = Math.max(240, outerHeight - frameH);
+    const viewport = await callAPI('page:setViewport', {
+      profileId,
+      width: targetViewportWidth,
+      height: targetViewportHeight,
+    });
+    console.log(JSON.stringify({
+      ok: true,
+      profileId,
+      window: result,
+      measured: measured?.result || null,
+      targetViewport: {
+        width: targetViewportWidth,
+        height: targetViewportHeight,
+        frameW,
+        frameH,
+      },
+      viewport,
+    }, null, 2));
   } else {
     throw new Error('Usage: camo window <move|resize> [profileId] --x <x> --y <y> / --width <w> --height <h>');
   }

package/src/container/change-notifier.mjs

@@ -1,5 +1,87 @@
 // Change Notifier - Subscribe to DOM changes and element events
 
+function normalizeSelector(selector) {
+  if (!selector) return { visible: true };
+  if (typeof selector === 'string') return { css: selector, visible: true };
+  if (typeof selector !== 'object') return { visible: true };
+  return {
+    ...selector,
+    visible: selector.visible !== false,
+  };
+}
+
+function selectorKey(selector) {
+  const normalized = normalizeSelector(selector);
+  const stable = {
+    css: normalized.css || null,
+    tag: normalized.tag || null,
+    id: normalized.id || null,
+    classes: Array.isArray(normalized.classes) ? [...normalized.classes].sort() : [],
+    visible: normalized.visible !== false,
+  };
+  return JSON.stringify(stable);
+}
+
+function parseCssSelector(css) {
+  const raw = typeof css === 'string' ? css.trim() : '';
+  if (!raw) return [];
+  const attrRegex = /\[\s*([^\s~|^$*=\]]+)\s*(\*=|\^=|\$=|=)?\s*(?:"([^"]*)"|'([^']*)'|([^\]\s]+))?\s*\]/g;
+  return raw
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean)
+    .map((item) => {
+      const tagMatch = item.match(/^[a-zA-Z][\w-]*/);
+      const idMatch = item.match(/#([\w-]+)/);
+      const classMatches = item.match(/\.([\w-]+)/g) || [];
+      const attrs = [];
+      let attrMatch = attrRegex.exec(item);
+      while (attrMatch) {
+        attrs.push({
+          name: String(attrMatch[1] || '').toLowerCase(),
+          op: attrMatch[2] || 'exists',
+          value: attrMatch[3] ?? attrMatch[4] ?? attrMatch[5] ?? '',
+        });
+        attrMatch = attrRegex.exec(item);
+      }
+      attrRegex.lastIndex = 0;
+      return {
+        tag: tagMatch ? tagMatch[0].toLowerCase() : null,
+        id: idMatch ? idMatch[1] : null,
+        classes: classMatches.map((token) => token.slice(1)),
+        attrs,
+      };
+    });
+}
+
+function nodeAttribute(node, name, nodeId, nodeClasses) {
+  const key = String(name || '').toLowerCase();
+  if (!key) return null;
+  if (key === 'id') return nodeId || null;
+  if (key === 'class') return Array.from(nodeClasses).join(' ');
+
+  const attrs = node?.attrs && typeof node.attrs === 'object' ? node.attrs : null;
+  if (attrs && attrs[key] !== undefined && attrs[key] !== null) return String(attrs[key]);
+
+  const direct = node?.[key];
+  if (typeof direct === 'string' || typeof direct === 'number' || typeof direct === 'boolean') {
+    return String(direct);
+  }
+  return null;
+}
+
+function matchAttribute(node, attrSpec, nodeId, nodeClasses) {
+  const value = nodeAttribute(node, attrSpec.name, nodeId, nodeClasses);
+  if (attrSpec.op === 'exists') return value !== null && value !== '';
+  if (value === null) return false;
+  const expected = String(attrSpec.value || '');
+  if (attrSpec.op === '=') return value === expected;
+  if (attrSpec.op === '*=') return value.includes(expected);
+  if (attrSpec.op === '^=') return value.startsWith(expected);
+  if (attrSpec.op === '$=') return value.endsWith(expected);
+  return false;
+}
+
 export class ChangeNotifier {
   constructor() {
     this.subscriptions = new Map(); // topic -> Set<callback>
@@ -7,6 +89,28 @@ export class ChangeNotifier {
     this.lastSnapshot = null;
   }
 
+  nodePassesVisibility(node, selector, viewport) {
+    const normalized = normalizeSelector(selector);
+    if (normalized.visible === false) return true;
+    if (!node || typeof node !== 'object') return false;
+    if (typeof node.visible === 'boolean') return node.visible;
+
+    const rect = node.rect || null;
+    if (!rect) return true;
+    const width = Number(rect.width || 0);
+    const height = Number(rect.height || 0);
+    if (width <= 0 || height <= 0) return false;
+
+    const vw = Number(viewport?.width || 0);
+    const vh = Number(viewport?.height || 0);
+    if (vw <= 0 || vh <= 0) return true;
+    const left = Number(rect.left ?? rect.x ?? 0);
+    const top = Number(rect.top ?? rect.y ?? 0);
+    const right = Number(rect.right ?? (left + width));
+    const bottom = Number(rect.bottom ?? (top + height));
+    return right > 0 && bottom > 0 && left < vw && top < vh;
+  }
+
   // Subscribe to a topic
   subscribe(topic, callback) {
     if (!this.subscriptions.has(topic)) {
@@ -21,22 +125,28 @@ export class ChangeNotifier {
   // Watch specific elements by selector
   watch(selector, options = {}) {
     const { onAppear, onDisappear, onChange, throttle = 200 } = options;
+    const resolvedSelector = normalizeSelector(selector);
+    const key = selectorKey(resolvedSelector);
+    const resolvedThrottle = Math.max(50, Number(throttle) || 200);
 
-    if (!this.elementWatchers.has(selector)) {
-      this.elementWatchers.set(selector, {
+    if (!this.elementWatchers.has(key)) {
+      this.elementWatchers.set(key, {
+        selector: resolvedSelector,
         lastState: null,
         lastNotifyTime: 0,
+        throttle: resolvedThrottle,
         callbacks: { onAppear, onDisappear, onChange },
       });
     } else {
-      const watcher = this.elementWatchers.get(selector);
+      const watcher = this.elementWatchers.get(key);
       if (onAppear) watcher.callbacks.onAppear = onAppear;
       if (onDisappear) watcher.callbacks.onDisappear = onDisappear;
       if (onChange) watcher.callbacks.onChange = onChange;
+      watcher.throttle = resolvedThrottle;
     }
 
     return () => {
-      this.elementWatchers.delete(selector);
+      this.elementWatchers.delete(key);
     };
   }
 
@@ -63,13 +173,13 @@ export class ChangeNotifier {
     this.notify('dom:changed', { snapshot, prevSnapshot });
 
     // Process element watchers
-    for (const [selector, watcher] of this.elementWatchers) {
+    for (const [, watcher] of this.elementWatchers) {
       const { lastState, callbacks, lastNotifyTime, throttle } = watcher;
 
       // Throttle notifications
       if (now - lastNotifyTime < throttle) continue;
 
-      const currentElements = this.findElements(snapshot, selector);
+      const currentElements = this.findElements(snapshot, watcher.selector);
       const currentState = currentElements.map(e => e.path).sort().join(',');
 
       if (lastState !== null && currentState !== lastState) {
@@ -98,19 +208,23 @@ export class ChangeNotifier {
   }
 
   // Find elements matching selector in DOM tree
-  findElements(node, selector, path = 'root') {
+  findElements(node, selector, path = 'root', context = null) {
     const results = [];
     if (!node) return results;
+    const normalized = normalizeSelector(selector);
+    const runtimeContext = context || {
+      viewport: node?.__viewport || null,
+    };
 
     // Check if current node matches
-    if (this.nodeMatchesSelector(node, selector)) {
+    if (this.nodeMatchesSelector(node, normalized) && this.nodePassesVisibility(node, normalized, runtimeContext.viewport)) {
       results.push({ ...node, path });
     }
 
     // Recurse into children
     if (node.children) {
       for (let i = 0; i < node.children.length; i++) {
-        const childResults = this.findElements(node.children[i], selector, `${path}/${i}`);
+        const childResults = this.findElements(node.children[i], normalized, `${path}/${i}`, runtimeContext);
         results.push(...childResults);
       }
     }
@@ -121,27 +235,54 @@ export class ChangeNotifier {
   // Check if node matches selector
   nodeMatchesSelector(node, selector) {
     if (!node) return false;
+    const normalized = normalizeSelector(selector);
+    if (!normalized || typeof normalized !== 'object') return false;
 
-    // CSS selector match
-    if (selector.css && node.selector === selector.css) return true;
-    if (selector.css && node.classes) {
-      const selClasses = selector.css.match(/\.[\w-]+/g);
-      if (selClasses) {
-        const nodeClasses = new Set(node.classes || []);
-        if (selClasses.map(s => s.slice(1)).every(c => nodeClasses.has(c))) return true;
+    const nodeTag = typeof node.tag === 'string' ? node.tag.toLowerCase() : null;
+    const nodeId = typeof node.id === 'string' ? node.id : null;
+    const nodeClasses = new Set(Array.isArray(node.classes) ? node.classes : []);
+
+    // Exact selector string (fast path).
+    if (normalized.css && node.selector === normalized.css) return true;
+
+    const cssVariants = parseCssSelector(normalized.css);
+    if (cssVariants.length > 0) {
+      for (const cssVariant of cssVariants) {
+        const hasConstraints = Boolean(
+          cssVariant.tag
+            || cssVariant.id
+            || (cssVariant.classes && cssVariant.classes.length > 0)
+            || (cssVariant.attrs && cssVariant.attrs.length > 0),
+        );
+        if (!hasConstraints) continue;
+
+        let matched = true;
+        if (cssVariant.tag && nodeTag !== cssVariant.tag) matched = false;
+        if (cssVariant.id && nodeId !== cssVariant.id) matched = false;
+        if (matched && cssVariant.classes.length > 0) {
+          matched = cssVariant.classes.every((className) => nodeClasses.has(className));
+        }
+        if (matched && cssVariant.attrs.length > 0) {
+          matched = cssVariant.attrs.every((attrSpec) => matchAttribute(node, attrSpec, nodeId, nodeClasses));
+        }
+        if (matched) return true;
       }
     }
 
-    // ID match
-    if (selector.id && node.id === selector.id) return true;
+    const requiredTag = normalized.tag ? String(normalized.tag).toLowerCase() : null;
+    const requiredId = normalized.id ? String(normalized.id) : null;
+    const requiredClasses = Array.isArray(normalized.classes)
+      ? normalized.classes.filter(Boolean).map((className) => String(className))
+      : [];
 
-    // Class match
-    if (selector.classes) {
-      const nodeClasses = new Set(node.classes || []);
-      if (selector.classes.every(c => nodeClasses.has(c))) return true;
+    const hasStructuredSelector = Boolean(requiredTag || requiredId || requiredClasses.length > 0);
+    if (!hasStructuredSelector) return false;
+    if (requiredTag && nodeTag !== requiredTag) return false;
+    if (requiredId && nodeId !== requiredId) return false;
+    if (requiredClasses.length > 0 && !requiredClasses.every((className) => nodeClasses.has(className))) {
+      return false;
     }
-
-    return false;
+    return true;
   }
 
   // Cleanup

package/src/container/element-filter.mjs

@@ -1,5 +1,24 @@
 // Container Element Filter - Filter DOM elements by visibility, container definitions
 
+function parseCssSelector(css) {
+  const raw = typeof css === 'string' ? css.trim() : '';
+  if (!raw) return [];
+  return raw
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean)
+    .map((item) => {
+      const tagMatch = item.match(/^[a-zA-Z][\w-]*/);
+      const idMatch = item.match(/#([\w-]+)/);
+      const classMatches = item.match(/\.([\w-]+)/g) || [];
+      return {
+        tag: tagMatch ? tagMatch[0].toLowerCase() : null,
+        id: idMatch ? idMatch[1] : null,
+        classes: classMatches.map((token) => token.slice(1)),
+      };
+    });
+}
+
 export class ElementFilter {
   constructor(options = {}) {
     this.viewportMargin = options.viewportMargin || 0;
@@ -52,13 +71,40 @@ export class ElementFilter {
 
   // Check if element matches selector definition
   matchesSelector(element, selector) {
+    if (!element || !selector) return false;
     if (selector.css && element.selector === selector.css) return true;
-    if (selector.id && element.id === selector.id) return true;
-    if (selector.classes) {
-      const elementClasses = new Set(element.classes || []);
-      if (selector.classes.every(c => elementClasses.has(c))) return true;
+
+    const elementTag = typeof element.tag === 'string' ? element.tag.toLowerCase() : null;
+    const elementId = typeof element.id === 'string' ? element.id : null;
+    const elementClasses = new Set(Array.isArray(element.classes) ? element.classes : []);
+
+    const cssVariants = parseCssSelector(selector.css);
+    if (cssVariants.length > 0) {
+      for (const cssVariant of cssVariants) {
+        let matched = true;
+        if (cssVariant.tag && elementTag !== cssVariant.tag) matched = false;
+        if (cssVariant.id && elementId !== cssVariant.id) matched = false;
+        if (matched && cssVariant.classes.length > 0) {
+          matched = cssVariant.classes.every((className) => elementClasses.has(className));
+        }
+        if (matched) return true;
+      }
+    }
+
+    const requiredTag = selector.tag ? String(selector.tag).toLowerCase() : null;
+    const requiredId = selector.id ? String(selector.id) : null;
+    const requiredClasses = Array.isArray(selector.classes)
+      ? selector.classes.filter(Boolean).map((className) => String(className))
+      : [];
+
+    const hasStructuredSelector = Boolean(requiredTag || requiredId || requiredClasses.length > 0);
+    if (!hasStructuredSelector) return false;
+    if (requiredTag && elementTag !== requiredTag) return false;
+    if (requiredId && elementId !== requiredId) return false;
+    if (requiredClasses.length > 0 && !requiredClasses.every((className) => elementClasses.has(className))) {
+      return false;
     }
-    return false;
+    return true;
   }
 
   // Main filter method