@zibby/core 0.1.0

package/src/utils/test-post-processor.js

@@ -0,0 +1,211 @@
+import fs from 'fs/promises';
+import { SelectorGenerator } from './selector-generator.js';
+
+export class TestPostProcessor {
+  static async generateFromEvents(testFilePath, eventsPath, traceActions, testTitle) {
+    try {
+      console.log(`[TestPostProcessor] 🎯 Generating test from events.json (100% accurate)`);
+      
+      const { readFileSync } = await import('fs');
+      const events = JSON.parse(readFileSync(eventsPath, 'utf-8'));
+      
+      const actionEvents = events.filter(e => ['navigate', 'type', 'fill', 'click', 'select_option'].includes(e.type));
+      
+      // Match trace actions with events by sequence order (both are chronological)
+      // Skip navigate events when matching trace actions (trace doesn't record navigations)
+      const _actionEventsNoNav = actionEvents.filter(e => e.type !== 'navigate');
+      
+      console.log(`[TestPostProcessor] Found ${actionEvents.length} action events, ${traceActions.length} trace actions`);
+      
+      let testCode = `import { ZibbyRuntime } from '@zibby/core';\nimport { test, expect } from '@playwright/test';\n\n`;
+      testCode += `test('${testTitle}', async ({ page }) => {\n`;
+      testCode += `  const timestamp = Date.now();\n\n`;
+      
+      let traceIdx = 0;
+      
+      for (const event of actionEvents) {
+        if (event.type === 'navigate') {
+          testCode += `  await page.goto('${event.data.params.url}');\n\n`;
+        } else if (event.type === 'type' || event.type === 'fill') {
+          const { element, text } = event.data.params;
+          const strategies = (traceActions[traceIdx]?.strategies) || [];
+          
+          const fingerprint = {
+            name: element,
+            action: 'fill',
+            value: text,
+            strategies
+          };
+          
+          testCode += `  await ZibbyRuntime.step(page, ${JSON.stringify(fingerprint, null, 2)});\n\n`;
+          traceIdx++;
+        } else if (event.type === 'click') {
+          const { element } = event.data.params;
+          const strategies = (traceActions[traceIdx]?.strategies) || [];
+          
+          const fingerprint = {
+            name: element,
+            action: 'click',
+            value: '',
+            strategies
+          };
+          
+          testCode += `  await ZibbyRuntime.step(page, ${JSON.stringify(fingerprint, null, 2)});\n\n`;
+          traceIdx++;
+        } else if (event.type === 'select_option') {
+          const { element, values } = event.data.params;
+          const strategies = (traceActions[traceIdx]?.strategies) || [];
+          
+          const fingerprint = {
+            name: element,
+            action: 'selectOption',
+            value: Array.isArray(values) ? values[0] : values,
+            strategies
+          };
+          
+          testCode += `  await ZibbyRuntime.step(page, ${JSON.stringify(fingerprint, null, 2)});\n\n`;
+          traceIdx++;
+        }
+      }
+      
+      testCode += `});\n`;
+      
+      const { dirname } = await import('path');
+      const { mkdirSync } = await import('fs');
+      mkdirSync(dirname(testFilePath), { recursive: true });
+      await fs.writeFile(testFilePath, testCode, 'utf-8');
+      
+      console.log(`[TestPostProcessor] ✅ Generated test with ${events.filter(e => ['type', 'fill', 'click', 'select_option'].includes(e.type)).length} actions`);
+      
+      return true;
+    } catch (err) {
+      console.warn('[TestPostProcessor] Failed to generate from events:', err.message);
+      return false;
+    }
+  }
+
+  static async enhanceSelectorsWithTrace(testFilePath, traceActions, _executionData) {
+    try {
+      console.log(`[TestPostProcessor] 🛡️ Applying Zibby Safe Action Wrappers...`);
+      
+      let testCode = await fs.readFile(testFilePath, 'utf-8');
+      
+      if (!testCode.includes('ZibbyRuntime')) {
+        testCode = `import { ZibbyRuntime } from '@zibby/core';\n${  testCode}`;
+      }
+
+      for (let i = 0; i < traceActions.length; i++) {
+        const action = traceActions[i];
+        const elementVar = `element${i}`;
+        
+        const actionPattern = new RegExp(
+          `const ${elementVar}\\b\\s*=\\s*page\\.[^;]+;(\\s*await ${elementVar}\\.waitFor\\([^)]*\\);)?\\s*await ${elementVar}\\.(click|fill|type|selectOption|pressSequentially)\\(([^)]*)\\);`,
+          's'
+        );
+        
+        const match = testCode.match(actionPattern);
+        if (!match) continue;
+
+        const fingerprint = {
+          name: action.name || `Action ${i}`,
+          action: action.method === 'type' ? 'fill' : action.method,
+          value: match[3].trim().replace(/^['"]|['"]$/g, ''),
+          strategies: action.strategies || []
+        };
+
+        const zibbyStep = `await ZibbyRuntime.step(page, ${JSON.stringify(fingerprint, null, 2)});`;
+        
+        testCode = testCode.replace(match[0], zibbyStep);
+      }
+      
+      await fs.writeFile(testFilePath, testCode, 'utf-8');
+      console.log(`[TestPostProcessor] ✅ Successfully converted test to Resilient Zibby format`);
+      
+      return true;
+    } catch (err) {
+      console.warn('[TestPostProcessor] Failed to apply safe wrappers:', err.message);
+      return false;
+    }
+  }
+
+  static async enhanceSelectors(testFilePath, executionData) {
+    try {
+      const { actions = [] } = executionData;
+      if (!actions.length) return false;
+
+      let testCode = await fs.readFile(testFilePath, 'utf-8');
+      
+      const selectorMap = this.buildSelectorMap(actions);
+      testCode = this.replaceSimpleSelectors(testCode, selectorMap);
+      
+      await fs.writeFile(testFilePath, testCode, 'utf-8');
+      
+      return true;
+    } catch (err) {
+      console.warn('Failed to enhance selectors:', err);
+      return false;
+    }
+  }
+
+  static buildSelectorMap(actions) {
+    const map = new Map();
+
+    for (let i = 0; i < actions.length; i++) {
+      const action = actions[i];
+      if (!action.selectors || action.type === 'navigate') continue;
+
+      const varName = `element${i}`;
+      const robustCode = SelectorGenerator.generate(action, varName);
+      
+      const match = robustCode.match(/= (.+);/s);
+      if (match) {
+        const locatorExpr = match[1].trim();
+        
+        const key = `${action.type}:${this.normalizeDescription(action.description)}`;
+        map.set(key, locatorExpr);
+
+        if (action.selectors.role) {
+          map.set(`role:${action.selectors.role.name}`, locatorExpr);
+        }
+        if (action.selectors.attributes?.placeholder) {
+          map.set(`placeholder:${action.selectors.attributes.placeholder}`, locatorExpr);
+        }
+      }
+    }
+
+    return map;
+  }
+
+  static replaceSimpleSelectors(code, selectorMap) {
+    let enhanced = code;
+
+    const selectorPatterns = [
+      /await page\.(getByRole|getByPlaceholder|getByText|getByLabel|locator)\([^)]+\)\.(fill|click|type)\([^)]*\)/g
+    ];
+
+    for (const pattern of selectorPatterns) {
+      enhanced = enhanced.replace(pattern, (match) => {
+        for (const [key, robustLocator] of selectorMap.entries()) {
+          if (match.includes(key.split(':')[1])) {
+            const actionMatch = match.match(/\.(fill|click|type)\(([^)]*)\)/);
+            if (actionMatch) {
+              const [, method, args] = actionMatch;
+              const varName = 'element';
+              return `const ${varName} = ${robustLocator};\n    await ${varName}.${method}(${args})`;
+            }
+          }
+        }
+        return match;
+      });
+    }
+
+    return enhanced;
+  }
+
+  static normalizeDescription(desc) {
+    if (!desc) return '';
+    return desc.toLowerCase().replace(/[^a-z0-9]+/g, ' ').trim();
+  }
+}
+
+export default TestPostProcessor;

package/src/utils/timeline.js

@@ -0,0 +1,217 @@
+/**
+ * Timeline UI - OpenClaw-style progressive output with vertical line connector
+ * 
+ * When inside a node, ALL console output is automatically prefixed with │
+ * and soft-wrapped at terminal width so the pipe stays visible on every
+ * visual line, even when text wraps.
+ * 
+ * Milestone dots (◆) sit ON the line, replacing │ at that point.
+ */
+
+import chalk from 'chalk';
+
+const PIPE = chalk.gray('│');
+const PIPE_START = chalk.gray('┌');
+const PIPE_END = chalk.gray('└');
+const DOT = chalk.green('◆');
+const DOT_TOOL = chalk.hex('#c084fc')('◆');
+const DOT_MEMORY = chalk.hex('#2dd4bf')('◆');
+const DOT_FAIL = chalk.red('◆');
+
+const PIPE_PREFIX = `${PIPE} `;
+const PIPE_VISUAL_WIDTH = 2;
+
+function formatDuration(ms) {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function makeWrapWriter(orig, state) {
+  return (chunk, encoding, callback) => {
+    if (typeof chunk !== 'string') {
+      return orig(chunk, encoding, callback);
+    }
+
+    const cols = process.stdout.columns || 120;
+    let out = '';
+
+    for (let i = 0; i < chunk.length; i++) {
+      const ch = chunk[i];
+
+      if (state.lineStart) {
+        out += PIPE_PREFIX;
+        state.col = PIPE_VISUAL_WIDTH;
+        state.lineStart = false;
+      }
+
+      if (ch === '\n') {
+        out += ch;
+        state.lineStart = true;
+        state.col = 0;
+        state.inEsc = false;
+      } else if (ch === '\x1b') {
+        state.inEsc = true;
+        out += ch;
+      } else if (state.inEsc) {
+        out += ch;
+        if ((ch >= 'A' && ch <= 'Z') || (ch >= 'a' && ch <= 'z')) {
+          state.inEsc = false;
+        }
+      } else {
+        state.col++;
+        out += ch;
+        if (state.col >= cols) {
+          out += `\n${  PIPE_PREFIX}`;
+          state.col = PIPE_VISUAL_WIDTH;
+        }
+      }
+    }
+
+    return orig(out, encoding, callback);
+  };
+}
+
+class Timeline {
+  constructor() {
+    this._currentNode = null;
+    this._origStdoutWrite = null;
+    this._origStderrWrite = null;
+  }
+
+  get isInsideNode() {
+    return this._currentNode !== null;
+  }
+
+  _startIntercepting() {
+    this._origStdoutWrite = process.stdout.write.bind(process.stdout);
+    this._origStderrWrite = process.stderr.write.bind(process.stderr);
+
+    const outState = { lineStart: true, col: 0, inEsc: false };
+    const errState = { lineStart: true, col: 0, inEsc: false };
+    this._outState = outState;
+    this._errState = errState;
+
+    process.stdout.write = makeWrapWriter(this._origStdoutWrite, outState);
+    process.stderr.write = makeWrapWriter(this._origStderrWrite, errState);
+  }
+
+  _stopIntercepting() {
+    if (this._origStdoutWrite) {
+      if (this._outState && !this._outState.lineStart) {
+        this._origStdoutWrite('\n');
+      }
+      process.stdout.write = this._origStdoutWrite;
+    }
+    if (this._origStderrWrite) {
+      if (this._errState && !this._errState.lineStart) {
+        this._origStderrWrite('\n');
+      }
+      process.stderr.write = this._origStderrWrite;
+    }
+    this._origStdoutWrite = null;
+    this._origStderrWrite = null;
+  }
+
+  _rawWrite(msg) {
+    const write = this._origStdoutWrite || process.stdout.write.bind(process.stdout);
+    write(`${msg  }\n`);
+  }
+
+  /**
+   * Write a milestone dot ON the line. If interceptor is active and we're
+   * mid-line, finish that line first so the dot starts on a fresh line.
+   */
+  _writeDot(dot, message) {
+    if (this._origStdoutWrite) {
+      if (this._outState && !this._outState.lineStart) {
+        this._origStdoutWrite('\n');
+        this._outState.lineStart = true;
+        this._outState.col = 0;
+      }
+      this._origStdoutWrite(`${dot} ${message}\n`);
+    } else {
+      const write = process.stdout.write.bind(process.stdout);
+      write(`${dot} ${message}\n`);
+    }
+  }
+
+  /**
+   * Milestone dot ON the line (inside a node) or with pipe prefix (outside).
+   */
+  step(message) {
+    if (this._origStdoutWrite) {
+      this._writeDot(DOT, message);
+    } else {
+      const write = process.stdout.write.bind(process.stdout);
+      write(`${PIPE}  ${DOT} ${message}\n`);
+    }
+  }
+
+  stepTool(message) {
+    if (this._origStdoutWrite) {
+      this._writeDot(DOT_TOOL, message);
+    } else {
+      const write = process.stdout.write.bind(process.stdout);
+      write(`${PIPE}  ${DOT_TOOL} ${message}\n`);
+    }
+  }
+
+  stepMemory(message) {
+    const colored = chalk.hex('#2dd4bf')(message);
+    if (this._origStdoutWrite) {
+      this._writeDot(DOT_MEMORY, colored);
+    } else {
+      const write = process.stdout.write.bind(process.stdout);
+      write(`${PIPE}  ${DOT_MEMORY} ${colored}\n`);
+    }
+  }
+
+  stepFail(message) {
+    if (this._origStdoutWrite) {
+      this._writeDot(DOT_FAIL, chalk.red(message));
+    } else {
+      const write = process.stdout.write.bind(process.stdout);
+      write(`${PIPE}  ${DOT_FAIL} ${chalk.red(message)}\n`);
+    }
+  }
+
+  nodeStart(name) {
+    this._currentNode = name;
+    this._rawWrite(`${PIPE_START} ${name}`);
+    this._startIntercepting();
+  }
+
+  nodeComplete(name, opts = {}) {
+    this._stopIntercepting();
+    const { duration, details } = opts;
+    if (details) {
+      for (const d of details) {
+        this._rawWrite(`${DOT} ${d}`);
+      }
+    }
+    const durationStr = duration ? chalk.dim(` ${formatDuration(duration)}`) : '';
+    this._rawWrite(`${PIPE_END} ${chalk.green('done')}${durationStr}`);
+    this._rawWrite('');
+  }
+
+  nodeFailed(name, error, opts = {}) {
+    this._stopIntercepting();
+    const { duration } = opts;
+    const durationStr = duration ? chalk.dim(` ${formatDuration(duration)}`) : '';
+    this._rawWrite(`${DOT_FAIL} ${chalk.red(error)}`);
+    this._rawWrite(`${PIPE_END} ${chalk.red('failed')}${durationStr}`);
+    this._rawWrite('');
+  }
+
+  route(from, to) {
+    this._rawWrite(chalk.dim(`  ${from} → ${to}`));
+    this._rawWrite('');
+  }
+
+  graphComplete() {
+    this._rawWrite(chalk.green.bold('✓ Workflow completed'));
+  }
+}
+
+export const timeline = new Timeline();
+export default timeline;