explorbot 0.0.1 → 0.1.0

package/src/components/TaskPane.tsx

@@ -0,0 +1,119 @@
+import { Box, Text } from 'ink';
+import React, { useEffect, useState } from 'react';
+import { Test } from '../test-plan.ts';
+
+export const WINDOW_SIZE = 7;
+
+interface TaskPaneProps {
+  tasks: Test[];
+  scrollOffset?: number;
+}
+
+const getPriorityIcon = (priority: string): string => {
+  switch (priority.toLowerCase()) {
+    case 'high':
+      return '⭆';
+    case 'medium':
+      return '⇒';
+    case 'low':
+      return '⇝';
+    default:
+      return '⇢';
+  }
+};
+
+const TaskPane: React.FC<TaskPaneProps> = React.memo(({ tasks, scrollOffset = 0 }) => {
+  const [blinkOn, setBlinkOn] = useState(false);
+
+  useEffect(() => {
+    const hasInProgress = tasks.some((task) => task.status === 'in_progress');
+    if (!hasInProgress) {
+      setBlinkOn(false);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setBlinkOn((prev) => !prev);
+    }, 1500);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [tasks]);
+
+  const visibleTasks = tasks.filter((t) => t.enabled);
+  const completedCount = visibleTasks.filter((t) => t.hasFinished).length;
+
+  const inProgressIdx = visibleTasks.findIndex((t) => t.status === 'in_progress');
+  let effectiveOffset = scrollOffset;
+  if (inProgressIdx >= 0 && (inProgressIdx < scrollOffset || inProgressIdx >= scrollOffset + WINDOW_SIZE)) {
+    effectiveOffset = Math.max(0, inProgressIdx - Math.floor(WINDOW_SIZE / 2));
+  }
+
+  const clampedOffset = Math.min(effectiveOffset, Math.max(0, visibleTasks.length - WINDOW_SIZE));
+  const aboveCount = clampedOffset;
+  const belowCount = Math.max(0, visibleTasks.length - clampedOffset - WINDOW_SIZE);
+  const windowTasks = visibleTasks.slice(clampedOffset, clampedOffset + WINDOW_SIZE);
+
+  return (
+    <Box flexDirection="column" flexGrow={1}>
+      <Box borderStyle="round" borderColor="dim" padding={1} flexDirection="column">
+        <Box justifyContent="space-between" marginBottom={1}>
+          <Text color="dim">📋 Tests</Text>
+          <Box>
+            <Text color="dim" bold>
+              Ctrl+E
+            </Text>
+            <Text color="dim"> edit </Text>
+            <Text color="dim">
+              [{completedCount}/{visibleTasks.length}]
+            </Text>
+          </Box>
+        </Box>
+
+        {aboveCount > 0 && (
+          <Text color="dim">
+            {'  '}▲ {aboveCount} more
+          </Text>
+        )}
+
+        {windowTasks.map((task: Test, windowIndex) => {
+          const globalIndex = clampedOffset + windowIndex;
+          const inProgress = task.status === 'in_progress';
+          let taskColor = 'dim';
+          let strikethrough = false;
+
+          if (task.isSuccessful) {
+            taskColor = 'green';
+            strikethrough = true;
+          } else if (task.isSkipped) {
+            taskColor = 'yellow';
+            strikethrough = true;
+          } else if (task.hasFailed) {
+            taskColor = 'red';
+          } else if (inProgress) {
+            taskColor = blinkOn ? 'white' : 'dim';
+          }
+
+          return (
+            <Box key={task.id || globalIndex} flexDirection="row" marginY={0}>
+              <Text> {getPriorityIcon(task.priority)}</Text>
+              <Text color={taskColor} strikethrough={strikethrough} wrap="truncate-end">
+                {' '}
+                {globalIndex + 1}. {task.scenario}
+              </Text>
+            </Box>
+          );
+        })}
+
+        {belowCount > 0 && (
+          <Text color="dim">
+            {'  '}▼ {belowCount} more
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+});
+
+export default TaskPane;

package/src/components/Welcome.tsx

@@ -0,0 +1,83 @@
+import { Box, Text } from 'ink';
+import React from 'react';
+import { useEffect, useState } from 'react';
+import { ConfigParser } from '../config.js';
+
+interface ConfigInfo {
+  aiProvider: string;
+  playwrightUrl: string;
+  loaded: boolean;
+  error?: string;
+}
+
+const Welcome: React.FC = () => {
+  const [configInfo, setConfigInfo] = useState<ConfigInfo>({
+    aiProvider: '',
+    playwrightUrl: '',
+    loaded: false,
+  });
+
+  useEffect(() => {
+    const loadConfig = async () => {
+      try {
+        const configParser = ConfigParser.getInstance();
+        const loadedConfig = await configParser.loadConfig();
+
+        let aiProviderName = 'Not configured';
+        if (loadedConfig.ai?.model) {
+          const model = loadedConfig.ai.model;
+          aiProviderName = model?.modelId || model?.provider || 'configured';
+        }
+
+        setConfigInfo({
+          aiProvider: aiProviderName,
+          playwrightUrl: loadedConfig.playwright?.url || 'Not configured',
+          loaded: true,
+        });
+      } catch (error) {
+        setConfigInfo({
+          aiProvider: '',
+          playwrightUrl: '',
+          loaded: true,
+          error: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    };
+
+    loadConfig();
+  }, []);
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box marginBottom={1} alignItems="center">
+        <Text color="yellow" bold>
+          🧐 Let's do some exploratory testing!
+        </Text>
+      </Box>
+      {configInfo.loaded && !configInfo.error && (
+        <Box flexDirection="row" marginTop={1}>
+          <Box marginRight={2}>
+            <Text color="gray" bold>
+              [Config]
+            </Text>
+          </Box>
+
+          <Box marginRight={2}>
+            <Text color="gray">AI: </Text>
+            <Text color="cyan" bold>
+              {configInfo.aiProvider}
+            </Text>
+          </Box>
+          <Box>
+            <Text color="gray">URL: </Text>
+            <Text color="cyan" bold>
+              {configInfo.playwrightUrl}
+            </Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default Welcome;

package/src/components/WelcomeChecklist.tsx

@@ -0,0 +1,118 @@
+import { Box, Text } from 'ink';
+import React from 'react';
+import type { ExplorbotConfig } from '../config.js';
+import type { KnowledgeTracker } from '../knowledge-tracker.js';
+import { Reporter } from '../reporter.js';
+
+interface ChecklistItem {
+  label: string;
+  description: string;
+  enabled: boolean;
+  value?: string;
+  suggestion?: string;
+}
+
+interface WelcomeChecklistProps {
+  config: ExplorbotConfig;
+  knowledgeTracker: KnowledgeTracker;
+}
+
+const ChecklistRow: React.FC<{ item: ChecklistItem }> = ({ item }) => (
+  <Box>
+    <Text color={item.enabled ? 'green' : 'gray'}>{item.enabled ? '  ✓ ' : '  ○ '}</Text>
+    <Text color={item.enabled ? 'white' : 'gray'}>{item.label}</Text>
+    {item.value && <Text color="cyan"> ({item.value})</Text>}
+    <Text color="gray"> - {item.description}</Text>
+    {!item.enabled && item.suggestion && <Text color="yellow"> → {item.suggestion}</Text>}
+  </Box>
+);
+
+function getModelLabel(model: any): string | undefined {
+  if (!model) return undefined;
+  const modelId = model?.modelId;
+  const provider = model?.provider;
+  if (!modelId) return undefined;
+  if (provider) return `${provider}:${modelId}`;
+  return modelId;
+}
+
+const WelcomeChecklist: React.FC<WelcomeChecklistProps> = ({ config, knowledgeTracker }) => {
+  const knowledge = knowledgeTracker.listAllKnowledge();
+  const knowledgeCount = knowledge.length;
+
+  const langfusePublicKey = config.ai?.langfuse?.publicKey || process.env.LANGFUSE_PUBLIC_KEY;
+  const langfuseSecretKey = config.ai?.langfuse?.secretKey || process.env.LANGFUSE_SECRET_KEY;
+  const langfuseEnabled = config.ai?.langfuse?.enabled ?? Boolean(langfusePublicKey && langfuseSecretKey);
+
+  const items: ChecklistItem[] = [
+    {
+      label: 'Model',
+      description: 'default model for all agents',
+      enabled: Boolean(config.ai?.model),
+      value: getModelLabel(config.ai?.model),
+      suggestion: 'set ai.model in config',
+    },
+    {
+      label: 'Vision model',
+      description: 'analyze screenshots for visual assertions',
+      enabled: Boolean(config.ai?.visionModel || config.ai?.vision),
+      value: getModelLabel(config.ai?.visionModel),
+      suggestion: 'set ai.visionModel in config',
+    },
+    {
+      label: 'Agentic model',
+      description: 'smarter model for Captain & Pilot decisions',
+      enabled: Boolean(config.ai?.agenticModel),
+      value: getModelLabel(config.ai?.agenticModel),
+      suggestion: 'set ai.agenticModel in config',
+    },
+    {
+      label: 'Knowledge',
+      description: 'teach AI web app usage, pass credentials',
+      enabled: knowledgeCount > 0,
+      value: knowledgeCount > 0 ? `${knowledgeCount} file${knowledgeCount > 1 ? 's' : ''}` : undefined,
+      suggestion: 'use /learn',
+    },
+    {
+      label: 'Reporter',
+      description: 'get a complete test run report',
+      enabled: Reporter.resolveEnabled(config.reporter),
+      value: process.env.TESTOMATIO ? 'cloud report to Testomat.io' : undefined,
+      suggestion: 'set reporter.enabled in config',
+    },
+    {
+      label: 'Quartermaster',
+      description: 'additional a11y checks',
+      enabled: config.ai?.agents?.quartermaster?.enabled === true || (config as any).agents?.quartermaster?.enabled === true,
+      suggestion: 'enable ai.agents.quartermaster',
+    },
+    {
+      label: 'Fisherman',
+      description: 'prepare test data via API',
+      enabled: config.ai?.agents?.fisherman?.enabled === true || !!(config as any).api,
+      value: (config as any).api ? 'achieve mode' : 'replicate mode',
+      suggestion: 'enable ai.agents.fisherman or configure api section',
+    },
+    {
+      label: 'Langfuse',
+      description: 'collect execution reports and analyze failures',
+      enabled: langfuseEnabled,
+      suggestion: 'enable ai.langfuse',
+    },
+  ];
+
+  return (
+    <Box borderStyle="round" borderColor="gray" flexDirection="column" paddingX={1}>
+      <Box marginBottom={1}>
+        <Text color="cyan" bold>
+          Configuration
+        </Text>
+      </Box>
+      {items.map((item, index) => (
+        <ChecklistRow key={index} item={item} />
+      ))}
+    </Box>
+  );
+};
+
+export default WelcomeChecklist;

package/src/components/WelcomeCommands.tsx

@@ -0,0 +1,102 @@
+import { Box, Text } from 'ink';
+import React from 'react';
+
+interface CommandInfo {
+  command: string;
+  description: string;
+  examples?: string[];
+}
+
+interface WelcomeCommandsProps {
+  hasKnowledge: boolean;
+}
+
+const Command: React.FC<{ text: string }> = ({ text }) => (
+  <Text bold color="#9B59B6">
+    {text}
+  </Text>
+);
+
+const WelcomeCommands: React.FC<WelcomeCommandsProps> = ({ hasKnowledge }) => {
+  const commands: CommandInfo[] = [
+    {
+      command: '/explore',
+      description: 'AI creates test plan and runs all tests automatically',
+      examples: ['/explore', '/explore checkout flow'],
+    },
+    {
+      command: '/plan',
+      description: 'generate test scenarios for current page without running them',
+      examples: ['/plan', '/plan user registration'],
+    },
+    {
+      command: '/test',
+      description: 'run tests from current plan (requires /plan first)',
+      examples: ['/test', '/test 2', '/test *'],
+    },
+    {
+      command: '/navigate',
+      description: 'AI navigates to a specific page or state',
+      examples: ['/navigate /users/settings'],
+    },
+    {
+      command: '/research',
+      description: 'analyze current page and list available actions',
+    },
+  ];
+
+  const knowledgeCommand: CommandInfo = {
+    command: '/learn',
+    description: 'add knowledge about your app (credentials, workflows)',
+    examples: ['/learn login uses admin@test.com'],
+  };
+
+  return (
+    <Box flexDirection="column" paddingX={1} marginTop={1}>
+      <Box marginBottom={1}>
+        <Text>What should we do next?</Text>
+      </Box>
+
+      {!hasKnowledge && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Box>
+            <Text color="yellow">→ </Text>
+            <Text>Start by adding knowledge about your app:</Text>
+          </Box>
+          <Box paddingLeft={2}>
+            <Command text={knowledgeCommand.command} />
+            <Text color="gray"> - {knowledgeCommand.description}</Text>
+          </Box>
+          {knowledgeCommand.examples && (
+            <Box paddingLeft={4}>
+              <Text color="gray" dimColor>
+                {knowledgeCommand.examples.join('  ')}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      )}
+
+      <Box flexDirection="column">
+        {commands.map((cmd, index) => (
+          <Box key={index} flexDirection="column">
+            <Box>
+              <Text> </Text>
+              <Command text={cmd.command} />
+              <Text color="gray"> - {cmd.description}</Text>
+            </Box>
+            {cmd.examples && (
+              <Box paddingLeft={4}>
+                <Text color="gray" dimColor>
+                  {cmd.examples.join('  ')}
+                </Text>
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default WelcomeCommands;

package/src/components/autocomplete-store.ts

@@ -0,0 +1,35 @@
+import { useSyncExternalStore } from 'react';
+import type { CommandAutocompleteSuggestion } from '../command-handler.js';
+
+interface AutocompleteState {
+  suggestions: CommandAutocompleteSuggestion[];
+  argumentHint?: string;
+  selectedIndex: number;
+  visible: boolean;
+}
+
+const listeners = new Set<() => void>();
+
+let state: AutocompleteState = {
+  suggestions: [],
+  selectedIndex: 0,
+  visible: false,
+};
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+
+const getSnapshot = () => state;
+
+export const setAutocompleteState = (next: AutocompleteState) => {
+  state = next;
+  for (const listener of listeners) {
+    listener();
+  }
+};
+
+export const useAutocompleteState = () => useSyncExternalStore(subscribe, getSnapshot);

package/src/components/parse-keypress.ts

@@ -0,0 +1,170 @@
+import { Buffer } from 'node:buffer';
+
+const metaCharRe = /^[a-zA-Z0-9]$/;
+const fnKeyRe = /^(O|N|\[|\[\[)(?:(\d+)(?:;(\d+))?([~^$])|(?:1;)?(\d+)?([a-zA-Z]))/;
+
+const keyName: Record<string, string> = {
+  OP: 'f1',
+  OQ: 'f2',
+  OR: 'f3',
+  OS: 'f4',
+  '[11~': 'f1',
+  '[12~': 'f2',
+  '[13~': 'f3',
+  '[14~': 'f4',
+  '[[A': 'f1',
+  '[[B': 'f2',
+  '[[C': 'f3',
+  '[[D': 'f4',
+  '[[E': 'f5',
+  '[15~': 'f5',
+  '[17~': 'f6',
+  '[18~': 'f7',
+  '[19~': 'f8',
+  '[20~': 'f9',
+  '[21~': 'f10',
+  '[23~': 'f11',
+  '[24~': 'f12',
+  '[A': 'up',
+  '[B': 'down',
+  '[C': 'right',
+  '[D': 'left',
+  '[E': 'clear',
+  '[F': 'end',
+  '[H': 'home',
+  OA: 'up',
+  OB: 'down',
+  OC: 'right',
+  OD: 'left',
+  OE: 'clear',
+  OF: 'end',
+  OH: 'home',
+  '[1~': 'home',
+  '[2~': 'insert',
+  '[3~': 'delete',
+  '[4~': 'end',
+  '[5~': 'pageup',
+  '[6~': 'pagedown',
+  '[[5~': 'pageup',
+  '[[6~': 'pagedown',
+  '[7~': 'home',
+  '[8~': 'end',
+  '[a': 'up',
+  '[b': 'down',
+  '[c': 'right',
+  '[d': 'left',
+  '[e': 'clear',
+  '[2$': 'insert',
+  '[3$': 'delete',
+  '[5$': 'pageup',
+  '[6$': 'pagedown',
+  '[7$': 'home',
+  '[8$': 'end',
+  Oa: 'up',
+  Ob: 'down',
+  Oc: 'right',
+  Od: 'left',
+  Oe: 'clear',
+  '[2^': 'insert',
+  '[3^': 'delete',
+  '[5^': 'pageup',
+  '[6^': 'pagedown',
+  '[7^': 'home',
+  '[8^': 'end',
+  '[Z': 'tab',
+};
+
+export const nonAlphanumericKeys = [...Object.values(keyName), 'backspace'];
+
+const isShiftKey = (code: string) => ['[a', '[b', '[c', '[d', '[e', '[2$', '[3$', '[5$', '[6$', '[7$', '[8$', '[Z'].includes(code);
+
+const isCtrlKey = (code: string) => ['Oa', 'Ob', 'Oc', 'Od', 'Oe', '[2^', '[3^', '[5^', '[6^', '[7^', '[8^'].includes(code);
+
+export default function parseKeypress(value: string | Buffer = '') {
+  let parts: RegExpExecArray | null;
+  let sequence = value;
+
+  if (Buffer.isBuffer(sequence)) {
+    if (sequence[0] > 127 && sequence[1] === undefined) {
+      sequence[0] -= 128;
+      sequence = `\x1b${String(sequence)}`;
+    } else {
+      sequence = String(sequence);
+    }
+  } else if (sequence !== undefined && typeof sequence !== 'string') {
+    sequence = String(sequence);
+  } else if (!sequence) {
+    sequence = '';
+  }
+
+  const key = {
+    name: '',
+    ctrl: false,
+    meta: false,
+    shift: false,
+    option: false,
+    sequence,
+    raw: sequence as string | undefined,
+    code: undefined as string | undefined,
+  };
+
+  if (sequence === '\r') {
+    key.raw = undefined;
+    key.name = 'return';
+  } else if (sequence === '\n') {
+    key.name = 'enter';
+  } else if (sequence === '\t') {
+    key.name = 'tab';
+  } else if (sequence === '\b' || sequence === '\x1b\b') {
+    key.name = 'backspace';
+    key.meta = sequence.charAt(0) === '\x1b';
+  } else if (sequence === '\x7f' || sequence === '\x1b\x7f') {
+    key.name = 'backspace';
+    key.meta = sequence.charAt(0) === '\x1b';
+  } else if (sequence === '\x1b' || sequence === '\x1b\x1b') {
+    key.name = 'escape';
+    key.meta = sequence.length === 2;
+  } else if (sequence === ' ' || sequence === '\x1b ') {
+    key.name = 'space';
+    key.meta = sequence.length === 2;
+  } else if (sequence.length === 1 && sequence <= '\x1a') {
+    key.name = String.fromCharCode(sequence.charCodeAt(0) + 'a'.charCodeAt(0) - 1);
+    key.ctrl = true;
+  } else if (sequence.length === 1 && sequence >= '0' && sequence <= '9') {
+    key.name = 'number';
+  } else if (sequence.length === 1 && sequence >= 'a' && sequence <= 'z') {
+    key.name = sequence;
+  } else if (sequence.length === 1 && sequence >= 'A' && sequence <= 'Z') {
+    key.name = sequence.toLowerCase();
+    key.shift = true;
+  } else if (sequence.startsWith('\x1b') && sequence.length === 2 && metaCharRe.test(sequence[1] || '')) {
+    key.meta = true;
+    key.shift = /^[A-Z]$/.test(sequence[1] || '');
+  } else {
+    let escapePrefixLength = 0;
+    while (sequence[escapePrefixLength] === '\x1b') {
+      escapePrefixLength += 1;
+    }
+    const sequenceBody = sequence.slice(escapePrefixLength);
+    parts = fnKeyRe.exec(sequenceBody);
+    if (!parts) {
+      return key;
+    }
+
+    if (escapePrefixLength > 1) {
+      key.option = true;
+    }
+
+    const code = [parts[1], parts[2], parts[4], parts[6]].filter(Boolean).join('');
+    const modifier = Number(parts[3] || parts[5] || 1) - 1;
+    key.ctrl = Boolean(modifier & 4);
+    key.meta = Boolean(modifier & 10);
+    key.shift = Boolean(modifier & 1);
+    key.code = code;
+    key.name = keyName[code] || '';
+    key.shift = isShiftKey(code) || key.shift;
+    key.ctrl = isCtrlKey(code) || key.ctrl;
+  }
+
+  return key;
+}