@supatest/cli 0.0.4 → 0.0.5

package/dist/presenters/console.js

@@ -0,0 +1,163 @@
+import chalk from "chalk";
+import ora from "ora";
+import { getToolDisplayName } from "shared";
+import { logger } from "../utils/logger";
+import { generateSummary } from "../utils/summary";
+// Fun spinner messages that rotate randomly
+const SPINNER_MESSAGES = [
+    "Brainstorming...",
+    "Brewing coffee...",
+    "Sipping espresso...",
+    "Testing theories...",
+    "Making magic...",
+    "Multiplying matrices...",
+];
+function getRandomSpinnerMessage() {
+    return SPINNER_MESSAGES[Math.floor(Math.random() * SPINNER_MESSAGES.length)];
+}
+function createShimmerFrames(text) {
+    const frames = [];
+    const baseText = text;
+    const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+    for (let i = 0; i <= baseText.length; i++) {
+        const spinnerIcon = spinnerFrames[i % spinnerFrames.length];
+        const before = chalk.white(baseText.slice(0, i));
+        const current = baseText[i] || "";
+        const after = chalk.white(baseText.slice(i + 1));
+        const shimmerText = before + chalk.cyan.bold(current) + after;
+        frames.push(`${chalk.cyan(spinnerIcon)} ${shimmerText}`);
+    }
+    return frames;
+}
+export class ConsolePresenter {
+    spinner = null;
+    verbose;
+    stats;
+    constructor(options) {
+        this.verbose = options.verbose;
+        this.stats = {
+            startTime: Date.now(),
+            iterations: 0,
+            filesModified: new Set(),
+            commandsRun: [],
+            errors: [],
+        };
+        logger.setVerbose(options.verbose);
+    }
+    onStart(config) {
+        logger.raw("");
+        logger.raw(chalk.white.bold("Task:") + " " + chalk.cyan(config.task));
+        if (config.logs) {
+            logger.info("Processing provided logs...");
+        }
+        logger.raw("");
+        this.startSpinner();
+    }
+    onLog(message) {
+        if (this.verbose) {
+            this.stopSpinner();
+            logger.debug(message);
+            this.startSpinner();
+        }
+    }
+    onAssistantText(text) {
+        this.stopSpinner();
+        logger.raw(text);
+        this.startSpinner();
+    }
+    onThinking(text) {
+        if (this.verbose) {
+            this.stopSpinner();
+            logger.debug(`Thinking: ${text}`);
+            this.startSpinner();
+        }
+    }
+    onToolUse(tool, input, _toolId) {
+        if (this.spinner) {
+            const displayName = getToolDisplayName(tool);
+            this.spinner.text = `Using ${displayName}...`;
+        }
+        this.stopSpinner();
+        if (tool === "Read") {
+            logger.toolRead(input?.file_path || "file");
+        }
+        else if (tool === "Write") {
+            const filePath = input?.file_path;
+            if (filePath) {
+                this.stats.filesModified.add(filePath);
+                logger.toolWrite(filePath);
+            }
+        }
+        else if (tool === "Edit") {
+            const filePath = input?.file_path;
+            if (filePath) {
+                this.stats.filesModified.add(filePath);
+                logger.toolEdit(filePath);
+            }
+        }
+        else if (tool === "Bash") {
+            const command = input?.command;
+            if (command) {
+                this.stats.commandsRun.push(command);
+                const shortCmd = command.length > 60 ? `${command.substring(0, 60)}...` : command;
+                logger.toolBash(shortCmd);
+            }
+        }
+        else if (tool === "Glob") {
+            logger.toolSearch("files", input?.pattern || "");
+        }
+        else if (tool === "Grep") {
+            logger.toolSearch("code", input?.pattern || "");
+        }
+        else if (tool === "Task") {
+            logger.toolAgent(input?.subagent_type || "task");
+        }
+        else if (tool === "TodoWrite") {
+            const todos = input?.todos;
+            if (Array.isArray(todos)) {
+                logger.todoUpdate(todos);
+            }
+            else {
+                logger.info("📝 Updated todos");
+            }
+        }
+        else {
+            logger.debug(`🔧 Using tool: ${tool}`);
+        }
+        logger.raw("");
+        this.startSpinner();
+    }
+    onTurnComplete(_content) {
+        // No-op for console - we handle output in individual callbacks
+    }
+    onError(error) {
+        this.stopSpinner();
+        logger.error(error);
+        this.stats.errors.push(error);
+    }
+    onComplete(result) {
+        this.stopSpinner();
+        this.stats.endTime = Date.now();
+        this.stats.iterations = result.iterations;
+        const summaryText = generateSummary(this.stats, result, this.verbose);
+        logger.raw(summaryText);
+    }
+    startSpinner() {
+        if (!this.spinner && !logger.isSilent()) {
+            const message = getRandomSpinnerMessage();
+            this.spinner = ora({
+                spinner: {
+                    interval: 80,
+                    frames: createShimmerFrames(message),
+                },
+            });
+            this.spinner.start();
+        }
+    }
+    stopSpinner() {
+        if (this.spinner) {
+            this.spinner.stop();
+            this.spinner = null;
+        }
+    }
+}

package/dist/presenters/react.js

@@ -0,0 +1,217 @@
+import { getToolDisplayName } from "shared";
+/**
+ * Get human-readable description for tool call
+ */
+function getToolDescription(toolName, input) {
+    switch (toolName) {
+        case "Read":
+            return input?.file_path || "file";
+        case "Write":
+            return input?.file_path || "file";
+        case "Edit":
+            return input?.file_path || "file";
+        case "Bash": {
+            const cmd = input?.command || "";
+            return cmd.length > 60 ? `${cmd.substring(0, 60)}...` : cmd;
+        }
+        case "Glob":
+            return `pattern: "${input?.pattern || "files"}"`;
+        case "Grep": {
+            const pattern = input?.pattern || "code";
+            const path = input?.path;
+            return path ? `"${pattern}" (in ${path})` : `"${pattern}"`;
+        }
+        case "Task":
+            return input?.subagent_type || "task";
+        case "TodoWrite":
+            return "Updated todos";
+        case "BashOutput":
+        case "Command Output":
+            return input?.bash_id || "shell output";
+        default:
+            return toolName;
+    }
+}
+export class ReactPresenter {
+    callbacks;
+    apiClient;
+    sessionId;
+    verbose;
+    // Track message state for combining consecutive blocks
+    hasAssistantMessage = false;
+    currentAssistantText = "";
+    hasThinkingMessage = false;
+    currentThinkingText = "";
+    constructor(callbacks, apiClient, sessionId, verbose = false) {
+        this.callbacks = callbacks;
+        this.apiClient = apiClient;
+        this.sessionId = sessionId;
+        this.verbose = verbose;
+    }
+    async onStart(config) {
+        // Send initial user message event to API
+        const userMessageEvent = {
+            type: "user_message",
+            content: [{ type: "text", text: config.task }],
+        };
+        await this.apiClient.streamEvent(this.sessionId, userMessageEvent);
+    }
+    onLog(message) {
+        if (this.verbose) {
+            console.error(message);
+        }
+    }
+    async onAssistantText(text) {
+        if (!this.hasAssistantMessage) {
+            // First text block - create new message
+            this.callbacks.addMessage({
+                type: "assistant",
+                content: text,
+                isPending: false,
+            });
+            this.hasAssistantMessage = true;
+            this.currentAssistantText = text;
+        }
+        else {
+            // Append to current message
+            this.currentAssistantText += text;
+            this.callbacks.updateLastMessage({
+                content: this.currentAssistantText,
+            });
+        }
+        // Stream to API
+        const textEvent = {
+            type: "assistant_text",
+            delta: text,
+        };
+        await this.apiClient.streamEvent(this.sessionId, textEvent);
+    }
+    async onThinking(text) {
+        if (!this.hasThinkingMessage) {
+            // Create new thinking message
+            this.callbacks.addMessage({
+                type: "thinking",
+                content: text,
+                isExpanded: false,
+            });
+            this.hasThinkingMessage = true;
+            this.currentThinkingText = text;
+        }
+        else {
+            // Append to existing thinking message
+            this.currentThinkingText += text;
+            this.callbacks.updateLastMessage({
+                content: this.currentThinkingText,
+            });
+        }
+        // Stream to API
+        const thinkingEvent = {
+            type: "assistant_thinking",
+            delta: text,
+        };
+        await this.apiClient.streamEvent(this.sessionId, thinkingEvent);
+    }
+    async onToolUse(tool, input, toolId) {
+        // Add tool message to UI
+        const message = {
+            type: "tool",
+            content: getToolDescription(tool, input),
+            toolName: getToolDisplayName(tool),
+            toolInput: input,
+            toolResult: undefined,
+            isExpanded: false,
+            toolUseId: toolId,
+        };
+        this.callbacks.addMessage(message);
+        // Reset message state - next text/thinking creates new messages
+        this.hasAssistantMessage = false;
+        this.hasThinkingMessage = false;
+        this.currentAssistantText = "";
+        this.currentThinkingText = "";
+        // Update stats for file modifications
+        if (tool === "Write" || tool === "Edit") {
+            const filePath = input?.file_path;
+            if (filePath) {
+                this.callbacks.updateStats({
+                    filesModified: new Set([filePath]),
+                });
+            }
+        }
+        else if (tool === "Bash") {
+            const command = input?.command;
+            if (command) {
+                this.callbacks.updateStats({
+                    commandsRun: [command],
+                });
+            }
+        }
+        else if (tool === "TodoWrite") {
+            const todos = input?.todos;
+            if (todos && Array.isArray(todos)) {
+                this.callbacks.setTodos(todos);
+                this.callbacks.addMessage({
+                    type: "todo",
+                    content: "",
+                    todos: todos,
+                });
+            }
+        }
+        // Stream tool use event to API
+        const toolUseEvent = {
+            type: "tool_use",
+            id: toolId,
+            name: tool,
+            input: input || {},
+        };
+        await this.apiClient.streamEvent(this.sessionId, toolUseEvent);
+    }
+    async onToolResult(toolId, result) {
+        // Update the tool message with the result
+        this.callbacks.updateMessageByToolId(toolId, {
+            toolResult: result,
+        });
+        // Stream tool result to API
+        const toolResultEvent = {
+            type: "tool_result",
+            tool_use_id: toolId,
+            content: result,
+        };
+        await this.apiClient.streamEvent(this.sessionId, toolResultEvent);
+    }
+    async onTurnComplete(content) {
+        // Stream message complete to API
+        const messageCompleteEvent = {
+            type: "message_complete",
+            message: {
+                role: "assistant",
+                content: content,
+            },
+        };
+        await this.apiClient.streamEvent(this.sessionId, messageCompleteEvent);
+    }
+    async onError(error) {
+        this.callbacks.addMessage({
+            type: "error",
+            content: error,
+            errorType: "error",
+        });
+        await this.apiClient.streamEvent(this.sessionId, {
+            type: "session_error",
+            error: error,
+        });
+    }
+    async onComplete(result) {
+        if (result.success) {
+            await this.apiClient.streamEvent(this.sessionId, {
+                type: "session_complete",
+            });
+        }
+        else {
+            await this.apiClient.streamEvent(this.sessionId, {
+                type: "session_error",
+                error: result.error || "Unknown error",
+            });
+        }
+        this.callbacks.onComplete(result.success);
+    }
+}

package/dist/presenters/types.js

@@ -0,0 +1 @@
+export {};

package/dist/presenters/web.js

@@ -0,0 +1,78 @@
+import { EventStreamer } from "../services/event-streamer";
+export class WebPresenter {
+    streamer;
+    constructor(apiClient, sessionId) {
+        this.streamer = new EventStreamer(apiClient, sessionId);
+    }
+    async onStart(config) {
+        // Send the initial user message to establish context
+        const event = {
+            type: "user_message",
+            content: [
+                {
+                    type: "text",
+                    text: config.task,
+                },
+            ],
+        };
+        await this.streamer.queueEvent(event);
+    }
+    onLog(_message) {
+        // Debug logs are not streamed to web
+    }
+    async onAssistantText(text) {
+        const event = {
+            type: "assistant_text",
+            delta: text,
+        };
+        await this.streamer.queueEvent(event);
+    }
+    async onThinking(text) {
+        const event = {
+            type: "assistant_thinking",
+            delta: text,
+        };
+        await this.streamer.queueEvent(event);
+    }
+    async onToolUse(tool, input, toolId) {
+        const event = {
+            type: "tool_use",
+            id: toolId,
+            name: tool,
+            input: input || {},
+        };
+        await this.streamer.queueEvent(event);
+    }
+    async onTurnComplete(content) {
+        // Flush pending events first
+        await this.streamer.flush();
+        const event = {
+            type: "message_complete",
+            message: {
+                role: "assistant",
+                content: content,
+            },
+        };
+        await this.streamer.queueEvent(event);
+    }
+    async onError(error) {
+        const event = {
+            type: "session_error",
+            error: error,
+        };
+        await this.streamer.queueEvent(event);
+        await this.streamer.shutdown();
+    }
+    async onComplete(result) {
+        if (result.success) {
+            await this.streamer.queueEvent({ type: "session_complete" });
+        }
+        else {
+            await this.streamer.queueEvent({
+                type: "session_error",
+                error: result.error || "Unknown error",
+            });
+        }
+        await this.streamer.shutdown();
+    }
+}

package/dist/prompts/builder.js

@@ -0,0 +1,181 @@
+export const builderPrompt = `<role>
+You are an E2E Test Builder Agent that iteratively creates, runs, and fixes Playwright tests until they pass. You have access to Playwright MCP tools for browser automation and debugging.
+</role>
+
+<core_workflow>
+Follow this iterative build loop for each test:
+
+1. **Discover** - Understand project setup before writing (see discovery section)
+2. **Understand** - Read the test spec or user flow requirements
+3. **Write** - Create or update the Playwright test file
+4. **Run** - Execute the test using the correct command
+5. **Verify** - Check results; if passing, move to next test
+6. **Debug** - If failing, use Playwright MCP tools to investigate
+7. **Fix** - Update test based on findings, return to step 4
+
+Continue until all tests pass. Do NOT stop after first failure. Max 5 attempts per test.
+</core_workflow>
+
+<discovery>
+Before writing tests, understand the project setup:
+
+**Test infrastructure:**
+- Check package.json for test scripts and playwright dependency
+- Look for playwright.config.ts or playwright.config.js
+- Find existing test directory (tests/, e2e/, __tests__/)
+- Note any existing test patterns or fixtures
+
+**Application structure:**
+- Identify the base URL (from config or package.json scripts)
+- Find main routes/pages in the app
+- Check for authentication requirements
+
+**Existing patterns:**
+- Look at existing tests for selector conventions
+- Check for shared fixtures or page objects
+- Note any custom test utilities
+
+**If no Playwright setup exists:**
+- Initialize with \`npm init playwright@latest\`
+- Use defaults unless user specifies otherwise
+
+**If existing tests exist:**
+- Follow their patterns and conventions
+- Use the same directory structure
+- Reuse existing fixtures and utilities
+</discovery>
+
+<test_data_strategy>
+**Prefer API setup when available, fall back to UI otherwise.**
+
+- API setup is faster and more reliable for creating test data
+- Use UI setup when no API is available
+- Each test should create its own data
+- Clean up after tests when possible
+- Use unique identifiers (timestamps, random strings) to avoid collisions
+</test_data_strategy>
+
+<playwright_execution>
+CRITICAL: Always run Playwright tests correctly to ensure clean exits.
+
+**Correct test commands:**
+- Single test: \`npx playwright test tests/example.spec.ts --reporter=list\`
+- All tests: \`npx playwright test --reporter=list\`
+- Headed mode (debugging): \`npx playwright test --headed --reporter=list\`
+
+**NEVER use:**
+- \`--ui\` flag (opens interactive UI that blocks)
+- \`--reporter=html\` without \`--reporter=list\` (may open server)
+- Commands without \`--reporter=list\` in CI/headless mode
+
+**Process management:**
+- Always use \`--reporter=list\` or \`--reporter=dot\` for clean output
+- Tests should exit automatically after completion
+- If a process hangs, kill it and retry with correct flags
+</playwright_execution>
+
+<debugging_with_mcp>
+When tests fail, use Playwright MCP tools to investigate:
+
+1. **Navigate**: Use \`mcp__playwright__playwright_navigate\` to load the failing page
+2. **Inspect DOM**: Use \`mcp__playwright__playwright_get_visible_html\` to see actual elements
+3. **Screenshot**: Use \`mcp__playwright__playwright_screenshot\` to capture current state
+4. **Console logs**: Use \`mcp__playwright__playwright_console_logs\` to check for JS errors
+5. **Interact**: Use click/fill tools to manually reproduce the flow
+
+**Workflow**: Navigate → inspect HTML → verify selectors → check console → fix
+</debugging_with_mcp>
+
+<selector_strategy>
+Prioritize resilient selectors:
+1. \`getByRole()\` - accessibility-focused, most stable
+2. \`getByLabel()\` - form elements
+3. \`getByText()\` - user-visible content
+4. \`getByTestId()\` - explicit test markers
+5. CSS selectors - last resort, avoid class-based
+
+When selectors fail:
+- Use MCP to inspect actual DOM structure
+- Check if element exists but has different text/role
+- Verify element is visible and not hidden
+</selector_strategy>
+
+<test_structure>
+Use Arrange-Act-Assert pattern:
+\`\`\`typescript
+test('should complete checkout', async ({ page }) => {
+  // Arrange - Setup preconditions
+  await page.goto('/cart');
+
+  // Act - Perform the action
+  await page.getByRole('button', { name: 'Checkout' }).click();
+  await page.getByLabel('Card number').fill('4242424242424242');
+  await page.getByRole('button', { name: 'Pay' }).click();
+
+  // Assert - Verify outcomes
+  await expect(page).toHaveURL(/\\/confirmation/);
+  await expect(page.getByText('Order confirmed')).toBeVisible();
+});
+\`\`\`
+</test_structure>
+
+<anti_patterns>
+Avoid these common mistakes:
+
+- \`waitForTimeout()\` - use explicit element waits instead
+- Brittle CSS class selectors - use role/label/testid
+- Tests depending on execution order - each test must be independent
+- Shared test data between tests - create fresh data per test
+- Vague assertions like \`toBeTruthy()\` - be specific
+- Hard-coded delays for animations - wait for element state
+- Too many assertions per test - test one logical flow
+- No cleanup in afterEach/afterAll - clean up test data
+</anti_patterns>
+
+<iteration_mindset>
+Expect multiple iterations. This is normal and efficient:
+- First attempt: Write test based on understanding
+- Second: Fix selector issues found during run
+- Third: Handle timing/async issues
+- Fourth+: Edge cases and refinements
+
+Keep iterating until green. Three robust passing tests are better than ten flaky ones.
+</iteration_mindset>
+
+<decision_gates>
+**Keep building (proceed autonomously):**
+- Test fails with clear selector/timing issue → fix and retry
+- Missing test file → create it
+- Standard patterns (forms, navigation, CRUD) → just build
+- Error message is actionable → iterate on fix
+
+**Ask user first:**
+- Ambiguous requirements ("test the dashboard" - which parts?)
+- Multiple valid approaches (shared fixture vs per-test setup?)
+- Missing infrastructure (no playwright config, no test directory)
+- Authentication unclear (how do users log in? test account?)
+- External dependencies (tests need API keys, seeds, third-party services)
+
+**Stop and report:**
+- App bug discovered (test is correct, app is broken)
+- Max attempts reached (5 attempts with no progress)
+- Blocked by environment (app not running, wrong URL)
+- Test requires unavailable capabilities (mobile, specific browser)
+</decision_gates>
+
+<definition_of_done>
+Before marking a test complete:
+- [ ] Test passes consistently (2+ runs)
+- [ ] No flaky behavior detected
+- [ ] Test data is cleaned up (or isolated)
+- [ ] Selectors are resilient (not class-based)
+- [ ] No arbitrary timeouts used
+</definition_of_done>
+
+<communication>
+When reporting progress:
+- State which test is being worked on
+- Report pass/fail status after each run
+- When fixing, explain what was wrong and the fix
+- Summarize final status: X/Y tests passing
+</communication>`;