btcp-browser-agent 0.1.0 → 0.1.2

package/packages/cli/src/suggestions.ts

@@ -1,207 +0,0 @@
-/**
- * @btcp/cli - Command suggestions and fuzzy matching
- *
- * Helps users self-correct typos and discover commands.
- */
-
-import { commands } from './commands/index.js';
-
-/**
- * Calculate Levenshtein distance between two strings
- */
-function levenshteinDistance(a: string, b: string): number {
-  const matrix: number[][] = [];
-
-  for (let i = 0; i <= b.length; i++) {
-    matrix[i] = [i];
-  }
-  for (let j = 0; j <= a.length; j++) {
-    matrix[0][j] = j;
-  }
-
-  for (let i = 1; i <= b.length; i++) {
-    for (let j = 1; j <= a.length; j++) {
-      if (b.charAt(i - 1) === a.charAt(j - 1)) {
-        matrix[i][j] = matrix[i - 1][j - 1];
-      } else {
-        matrix[i][j] = Math.min(
-          matrix[i - 1][j - 1] + 1, // substitution
-          matrix[i][j - 1] + 1,     // insertion
-          matrix[i - 1][j] + 1      // deletion
-        );
-      }
-    }
-  }
-
-  return matrix[b.length][a.length];
-}
-
-/**
- * Find similar commands to the given input
- */
-export function findSimilarCommands(input: string, maxSuggestions = 3): string[] {
-  const inputLower = input.toLowerCase();
-  const commandNames = Object.keys(commands);
-
-  // Calculate distances and filter
-  const scored = commandNames
-    .map((name) => ({
-      name,
-      distance: levenshteinDistance(inputLower, name),
-      startsWith: name.startsWith(inputLower),
-      contains: name.includes(inputLower),
-    }))
-    .filter((item) => {
-      // Only suggest if reasonably close
-      const maxDistance = Math.max(2, Math.floor(input.length / 2));
-      return item.distance <= maxDistance || item.startsWith || item.contains;
-    })
-    .sort((a, b) => {
-      // Prioritize: startsWith > contains > distance
-      if (a.startsWith && !b.startsWith) return -1;
-      if (!a.startsWith && b.startsWith) return 1;
-      if (a.contains && !b.contains) return -1;
-      if (!a.contains && b.contains) return 1;
-      return a.distance - b.distance;
-    });
-
-  return scored.slice(0, maxSuggestions).map((item) => item.name);
-}
-
-/**
- * Get contextual suggestions based on command and error
- */
-export function getContextualSuggestion(
-  commandName: string,
-  error: string,
-  args: string[]
-): string | null {
-  const errorLower = error.toLowerCase();
-
-  // Selector not found
-  if (errorLower.includes('not found') || errorLower.includes('no element')) {
-    return `Element not found. Try:\n  1. Run 'snapshot' to see available elements with @ref IDs\n  2. Use a different selector or wait for the element: 'wait ${args[0] || '<selector>'} --state visible'`;
-  }
-
-  // Invalid selector
-  if (errorLower.includes('selector') || errorLower.includes('invalid')) {
-    return `Invalid selector. Supported formats:\n  - @ref:5 (from snapshot)\n  - #id (CSS ID selector)\n  - .class (CSS class selector)\n  - button, input (tag names)`;
-  }
-
-  // Navigation errors
-  if (errorLower.includes('navigate') || errorLower.includes('url')) {
-    return `Navigation failed. Make sure:\n  1. URL includes protocol (https://)\n  2. The page is accessible\n  3. Try: 'goto https://example.com'`;
-  }
-
-  // Timeout
-  if (errorLower.includes('timeout')) {
-    return `Operation timed out. Try:\n  1. Increase wait time: 'wait 5000'\n  2. Check if element exists: 'snapshot'\n  3. Wait for specific state: 'wait ${args[0] || '<selector>'} --state visible'`;
-  }
-
-  // Permission/security
-  if (errorLower.includes('permission') || errorLower.includes('security') || errorLower.includes('blocked')) {
-    return `Action blocked. This may be due to:\n  1. Cross-origin restrictions\n  2. Browser security policies\n  3. The element may be in an iframe`;
-  }
-
-  return null;
-}
-
-/**
- * Command categories for organized help
- */
-export const commandCategories = {
-  navigation: {
-    name: 'Navigation',
-    description: 'Navigate between pages and control browser history',
-    commands: ['goto', 'back', 'forward', 'reload', 'url', 'title'],
-  },
-  inspection: {
-    name: 'Page Inspection',
-    description: 'Inspect page content and capture screenshots',
-    commands: ['snapshot', 'screenshot', 'text'],
-  },
-  interaction: {
-    name: 'Element Interaction',
-    description: 'Click, type, and interact with page elements',
-    commands: ['click', 'type', 'fill', 'clear', 'hover', 'focus', 'press'],
-  },
-  forms: {
-    name: 'Form Controls',
-    description: 'Work with form inputs like checkboxes and dropdowns',
-    commands: ['check', 'uncheck', 'select'],
-  },
-  scrolling: {
-    name: 'Scrolling',
-    description: 'Scroll the page or scroll elements into view',
-    commands: ['scroll'],
-  },
-  tabs: {
-    name: 'Tab Management',
-    description: 'Manage browser tabs',
-    commands: ['tabs', 'tab', 'newtab', 'closetab'],
-  },
-  utility: {
-    name: 'Utility',
-    description: 'Wait, evaluate JavaScript, and get help',
-    commands: ['wait', 'eval', 'help'],
-  },
-};
-
-/**
- * Get category for a command
- */
-export function getCommandCategory(commandName: string): string | null {
-  for (const [key, category] of Object.entries(commandCategories)) {
-    if (category.commands.includes(commandName)) {
-      return key;
-    }
-  }
-  return null;
-}
-
-/**
- * Common workflow suggestions
- */
-export const workflowSuggestions = {
-  afterNavigation: [
-    'snapshot     # See page structure and get element refs',
-    'screenshot   # Capture visual state',
-    'wait 1000    # Wait for page to settle',
-  ],
-  afterSnapshot: [
-    'click @ref:N      # Click an element from snapshot',
-    'type @ref:N "..."  # Type into an input',
-    'fill @ref:N "..."  # Fill an input field',
-  ],
-  afterClick: [
-    'snapshot     # See updated page state',
-    'wait 500     # Wait for animations/updates',
-  ],
-  afterError: [
-    'snapshot     # Check current page state',
-    'url          # Verify current URL',
-    'tabs         # Check open tabs',
-  ],
-};
-
-/**
- * Get next step suggestions based on last command
- */
-export function getNextStepSuggestions(lastCommand: string): string[] {
-  switch (lastCommand) {
-    case 'goto':
-    case 'reload':
-    case 'back':
-    case 'forward':
-      return workflowSuggestions.afterNavigation;
-    case 'snapshot':
-      return workflowSuggestions.afterSnapshot;
-    case 'click':
-    case 'type':
-    case 'fill':
-    case 'press':
-      return workflowSuggestions.afterClick;
-    default:
-      return [];
-  }
-}

package/packages/cli/src/terminal/Terminal.ts

@@ -1,365 +0,0 @@
-/**
- * Terminal UI Component
- *
- * An in-browser terminal interface for the CLI.
- */
-
-import type { HistoryEntry, TerminalConfig, CommandResult } from '../types.js';
-import { formatResult } from '../formatter.js';
-
-/**
- * Terminal options
- */
-export interface TerminalOptions {
-  /** Execute a command and return the result */
-  onExecute: (input: string) => Promise<CommandResult>;
-  /** Optional configuration */
-  config?: Partial<TerminalConfig>;
-}
-
-/**
- * Default terminal configuration
- */
-const defaultConfig: TerminalConfig = {
-  theme: 'dark',
-  fontSize: 14,
-  historySize: 1000,
-  prompt: '$ ',
-};
-
-/**
- * Terminal state
- */
-interface TerminalState {
-  history: HistoryEntry[];
-  commandHistory: string[];
-  historyIndex: number;
-  inputBuffer: string;
-  isExecuting: boolean;
-}
-
-/**
- * Terminal UI class
- */
-export class Terminal {
-  private container: HTMLElement;
-  private config: TerminalConfig;
-  private state: TerminalState;
-  private onExecute: (input: string) => Promise<CommandResult>;
-
-  // DOM elements
-  private outputEl!: HTMLElement;
-  private inputLineEl!: HTMLElement;
-  private promptEl!: HTMLElement;
-  private inputEl!: HTMLInputElement;
-
-  constructor(container: HTMLElement, options: TerminalOptions) {
-    this.container = container;
-    this.config = { ...defaultConfig, ...options.config };
-    this.onExecute = options.onExecute;
-
-    this.state = {
-      history: [],
-      commandHistory: [],
-      historyIndex: -1,
-      inputBuffer: '',
-      isExecuting: false,
-    };
-
-    this.render();
-    this.bindEvents();
-    this.focus();
-  }
-
-  /**
-   * Render the terminal UI
-   */
-  private render(): void {
-    const isDark = this.config.theme === 'dark';
-
-    this.container.innerHTML = `
-      <div class="btcp-terminal" style="
-        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
-        font-size: ${this.config.fontSize}px;
-        line-height: 1.4;
-        background: ${isDark ? '#1e1e1e' : '#ffffff'};
-        color: ${isDark ? '#d4d4d4' : '#1e1e1e'};
-        padding: 12px;
-        height: 100%;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        box-sizing: border-box;
-      ">
-        <div class="btcp-terminal-output" style="
-          flex: 1;
-          overflow-y: auto;
-          white-space: pre-wrap;
-          word-wrap: break-word;
-        "></div>
-        <div class="btcp-terminal-input-line" style="
-          display: flex;
-          align-items: center;
-          margin-top: 8px;
-          flex-shrink: 0;
-        ">
-          <span class="btcp-terminal-prompt" style="
-            color: ${isDark ? '#6a9955' : '#008000'};
-            margin-right: 8px;
-            user-select: none;
-          ">${this.config.prompt}</span>
-          <input class="btcp-terminal-input" type="text" style="
-            flex: 1;
-            background: transparent;
-            border: none;
-            outline: none;
-            font-family: inherit;
-            font-size: inherit;
-            color: inherit;
-            padding: 0;
-            margin: 0;
-          " autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
-        </div>
-      </div>
-    `;
-
-    this.outputEl = this.container.querySelector('.btcp-terminal-output')!;
-    this.inputLineEl = this.container.querySelector('.btcp-terminal-input-line')!;
-    this.promptEl = this.container.querySelector('.btcp-terminal-prompt')!;
-    this.inputEl = this.container.querySelector('.btcp-terminal-input')!;
-  }
-
-  /**
-   * Bind event listeners
-   */
-  private bindEvents(): void {
-    // Handle input
-    this.inputEl.addEventListener('keydown', (e) => this.handleKeyDown(e));
-
-    // Click to focus
-    this.container.addEventListener('click', () => this.focus());
-  }
-
-  /**
-   * Handle key down events
-   */
-  private async handleKeyDown(e: KeyboardEvent): Promise<void> {
-    if (this.state.isExecuting) {
-      e.preventDefault();
-      return;
-    }
-
-    switch (e.key) {
-      case 'Enter':
-        e.preventDefault();
-        await this.executeInput();
-        break;
-
-      case 'ArrowUp':
-        e.preventDefault();
-        this.navigateHistory(-1);
-        break;
-
-      case 'ArrowDown':
-        e.preventDefault();
-        this.navigateHistory(1);
-        break;
-
-      case 'c':
-        if (e.ctrlKey) {
-          e.preventDefault();
-          this.cancel();
-        }
-        break;
-
-      case 'l':
-        if (e.ctrlKey) {
-          e.preventDefault();
-          this.clearScreen();
-        }
-        break;
-    }
-  }
-
-  /**
-   * Execute the current input
-   */
-  private async executeInput(): Promise<void> {
-    const input = this.inputEl.value.trim();
-
-    // Show the input in history
-    this.appendOutput(`${this.config.prompt}${input}`, 'input');
-
-    // Clear input
-    this.inputEl.value = '';
-
-    if (!input) {
-      return;
-    }
-
-    // Add to command history
-    this.state.commandHistory.push(input);
-    this.state.historyIndex = this.state.commandHistory.length;
-
-    // Handle built-in terminal commands
-    if (input === 'clear') {
-      this.clearScreen();
-      return;
-    }
-
-    // Execute command
-    this.state.isExecuting = true;
-    this.setPrompt('...');
-
-    try {
-      const result = await this.onExecute(input);
-      const formatted = formatResult(result);
-
-      this.appendOutput(formatted.content, formatted.type === 'error' ? 'error' : 'output');
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      this.appendOutput(`Error: ${message}`, 'error');
-    } finally {
-      this.state.isExecuting = false;
-      this.setPrompt(this.config.prompt);
-      this.focus();
-    }
-  }
-
-  /**
-   * Navigate command history
-   */
-  private navigateHistory(direction: number): void {
-    const newIndex = this.state.historyIndex + direction;
-
-    if (newIndex < 0) {
-      return;
-    }
-
-    if (newIndex >= this.state.commandHistory.length) {
-      this.state.historyIndex = this.state.commandHistory.length;
-      this.inputEl.value = this.state.inputBuffer;
-      return;
-    }
-
-    // Save current input if navigating from end
-    if (this.state.historyIndex === this.state.commandHistory.length) {
-      this.state.inputBuffer = this.inputEl.value;
-    }
-
-    this.state.historyIndex = newIndex;
-    this.inputEl.value = this.state.commandHistory[newIndex];
-
-    // Move cursor to end
-    this.inputEl.setSelectionRange(this.inputEl.value.length, this.inputEl.value.length);
-  }
-
-  /**
-   * Append output to the terminal
-   */
-  private appendOutput(content: string, type: 'input' | 'output' | 'error' | 'info'): void {
-    const isDark = this.config.theme === 'dark';
-
-    let color = isDark ? '#d4d4d4' : '#1e1e1e';
-    if (type === 'error') {
-      color = isDark ? '#f14c4c' : '#cd3131';
-    } else if (type === 'info') {
-      color = isDark ? '#3794ff' : '#0066bf';
-    } else if (type === 'input') {
-      color = isDark ? '#9cdcfe' : '#0066bf';
-    }
-
-    const entry: HistoryEntry = {
-      type,
-      content,
-      timestamp: Date.now(),
-    };
-
-    this.state.history.push(entry);
-
-    // Trim history if needed
-    while (this.state.history.length > this.config.historySize) {
-      this.state.history.shift();
-    }
-
-    // Append to DOM
-    const line = document.createElement('div');
-    line.style.color = color;
-    line.style.marginBottom = '2px';
-    line.textContent = content;
-    this.outputEl.appendChild(line);
-
-    // Scroll to bottom
-    this.outputEl.scrollTop = this.outputEl.scrollHeight;
-  }
-
-  /**
-   * Set the prompt text
-   */
-  private setPrompt(prompt: string): void {
-    this.promptEl.textContent = prompt;
-  }
-
-  /**
-   * Cancel current operation
-   */
-  private cancel(): void {
-    if (this.state.isExecuting) {
-      this.appendOutput('^C', 'info');
-    } else {
-      this.inputEl.value = '';
-    }
-  }
-
-  /**
-   * Clear the screen
-   */
-  public clearScreen(): void {
-    this.outputEl.innerHTML = '';
-    this.state.history = [];
-  }
-
-  /**
-   * Focus the input
-   */
-  public focus(): void {
-    this.inputEl.focus();
-  }
-
-  /**
-   * Write output programmatically
-   */
-  public write(content: string, type: 'output' | 'error' | 'info' = 'output'): void {
-    this.appendOutput(content, type);
-  }
-
-  /**
-   * Execute a command programmatically
-   */
-  public async run(command: string): Promise<CommandResult> {
-    this.inputEl.value = command;
-    await this.executeInput();
-    return { success: true };
-  }
-
-  /**
-   * Get the history
-   */
-  public getHistory(): HistoryEntry[] {
-    return [...this.state.history];
-  }
-
-  /**
-   * Get command history
-   */
-  public getCommandHistory(): string[] {
-    return [...this.state.commandHistory];
-  }
-
-  /**
-   * Destroy the terminal
-   */
-  public destroy(): void {
-    this.container.innerHTML = '';
-  }
-}

package/packages/cli/src/terminal/index.ts

@@ -1,5 +0,0 @@
-/**
- * Terminal UI exports
- */
-
-export { Terminal, type TerminalOptions } from './Terminal.js';