explorbot 0.0.1 → 0.1.0

package/src/components/LogPane.tsx

@@ -0,0 +1,187 @@
+import dedent from 'dedent';
+import React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import stripAnsi from 'strip-ansi';
+import { htmlTextSnapshot } from '../utils/html.js';
+import { parseMarkdownToTerminal } from '../utils/markdown-terminal.js';
+
+import { Box, Text } from 'ink';
+import type { LogType, TaggedLogEntry } from '../utils/logger.js';
+import { isDebugMode, registerLogPane, setVerboseMode, unregisterLogPane } from '../utils/logger.js';
+
+// marked.use(new markedTerminal());
+
+type LogEntry = TaggedLogEntry;
+
+interface LogPaneProps {
+  verboseMode: boolean;
+}
+
+const LogPane: React.FC<LogPaneProps> = React.memo(({ verboseMode }) => {
+  const [logs, setLogs] = useState<TaggedLogEntry[]>([]);
+  const pendingLogsRef = React.useRef<TaggedLogEntry[]>([]);
+  const flushTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const flushLogs = useCallback(() => {
+    if (pendingLogsRef.current.length === 0) return;
+
+    const newLogs = pendingLogsRef.current;
+    pendingLogsRef.current = [];
+    flushTimeoutRef.current = null;
+
+    setLogs((prevLogs: TaggedLogEntry[]) => {
+      const result = [...prevLogs];
+
+      for (const logEntry of newLogs) {
+        if (result.length === 0) {
+          result.push(logEntry);
+          continue;
+        }
+
+        const lastLog = result[result.length - 1];
+        if (lastLog.type === logEntry.type && lastLog.content === logEntry.content && Math.abs((lastLog.timestamp?.getTime() || 0) - (logEntry.timestamp?.getTime() || 0)) < 1000) {
+          continue;
+        }
+
+        result.push(logEntry);
+      }
+
+      return result;
+    });
+  }, []);
+
+  const addLog = useCallback(
+    (logEntry: TaggedLogEntry) => {
+      pendingLogsRef.current.push(logEntry);
+
+      if (!flushTimeoutRef.current) {
+        flushTimeoutRef.current = setTimeout(flushLogs, 150);
+      }
+    },
+    [flushLogs]
+  );
+
+  useEffect(() => {
+    registerLogPane(addLog);
+
+    return () => {
+      unregisterLogPane(addLog);
+      if (flushTimeoutRef.current) {
+        clearTimeout(flushTimeoutRef.current);
+      }
+    };
+  }, [addLog]);
+  const getLogStyles = (type: LogType) => {
+    switch (type) {
+      case 'success':
+        return { color: 'green' as const };
+      case 'error':
+        return { color: 'red' as const };
+      case 'warning':
+        return { color: 'yellow' as const };
+      case 'debug':
+        return { color: 'gray' as const, dimColor: true };
+      case 'substep':
+        return { color: 'gray' as const, dimColor: true };
+      case 'step':
+        return { color: 'cyan' as const, dimColor: true };
+      case 'multiline':
+        return { color: 'gray' as const, dimColor: true };
+      case 'html':
+        return { color: 'gray' as const };
+      case 'input':
+        return { bold: true, color: '#FFA500' };
+      default:
+        return {};
+    }
+  };
+
+  const processLogContent = (content: string): string[] => {
+    return content.split('\n').filter((line) => line.length > 0);
+  };
+
+  const renderLogEntry = (log: TaggedLogEntry, index: number) => {
+    // Skip debug logs when not in verbose mode AND DEBUG env var is not set
+    const shouldShowDebug = verboseMode || isDebugMode() || Boolean(process.env.DEBUG?.includes('explorbot:')) || process.env.DEBUG === '*';
+    if (log.type === 'debug' && !shouldShowDebug) {
+      return null;
+    }
+    const styles = getLogStyles(log.type);
+
+    if (log.type === 'multiline') {
+      const cleaned = stripAnsi(dedent(log.content));
+      const parsed = parseMarkdownToTerminal(cleaned);
+      const lines = parsed.split('\n');
+      const maxLines = 30;
+      const truncated = lines.length > maxLines ? `${lines.slice(0, maxLines).join('\n')}\n... (${lines.length - maxLines} more lines)` : cleaned;
+      return (
+        <Box key={index} borderStyle="classic" borderLeft={false} borderRight={false} marginY={1} padding={1} borderColor="dim" overflow="hidden">
+          <Text color="gray" dimColor>
+            {parsed}
+          </Text>
+        </Box>
+      );
+    }
+
+    if (log.type === 'html') {
+      // Convert HTML to markdown, then render as multiline
+      const markdown = htmlTextSnapshot(log.content);
+      const multilineLog: TaggedLogEntry = {
+        type: 'multiline',
+        content: `HTML Content:\n\n${markdown}`,
+        timestamp: log.timestamp,
+      };
+
+      return renderLogEntry(multilineLog, index);
+    }
+
+    const lines = processLogContent(String(log.content));
+
+    if (log.type === 'substep') {
+      return (
+        <Box key={index} marginLeft={2} flexDirection="column">
+          {lines.map((line, lineIndex) => (
+            <Text key={`${index}-${lineIndex}`} {...styles}>
+              {lineIndex === 0 ? `> ${line}` : `   ${line}`}
+            </Text>
+          ))}
+        </Box>
+      );
+    }
+
+    if (log.type === 'step') {
+      return (
+        <Box key={index} flexDirection="column" paddingLeft={2}>
+          {lines.map((line, lineIndex) => (
+            <Text key={`${index}-${lineIndex}`} {...styles}>
+              {line}
+            </Text>
+          ))}
+        </Box>
+      );
+    }
+
+    let marginTop = 0;
+    if (log.type === 'info') marginTop = 1;
+    const icon = log.type === 'info' ? '◉' : log.type === 'success' ? '✓' : log.type === 'error' ? '✗' : log.type === 'warning' ? '!' : log.type === 'debug' ? '*' : '';
+
+    return (
+      <Box key={index} columnGap={1} marginTop={marginTop} flexDirection="row">
+        {icon && <Text {...styles}>{icon}</Text>}
+        <Box flexDirection="column">
+          {lines.map((line, lineIndex) => (
+            <Text key={`${index}-${lineIndex}`} {...styles}>
+              {line}
+            </Text>
+          ))}
+        </Box>
+      </Box>
+    );
+  };
+
+  const maxLogs = 100;
+  const visibleLogs = logs.length > maxLogs ? logs.slice(-maxLogs) : logs;
+  return <Box flexDirection="column">{visibleLogs.map((log, index) => renderLogEntry(log, index)).filter(Boolean)}</Box>;
+});
+
+export default LogPane;

package/src/components/PlanEditor.tsx

@@ -0,0 +1,150 @@
+import { Box, Text, useInput } from 'ink';
+import React, { useEffect, useState } from 'react';
+import type { Test } from '../test-plan.ts';
+
+const EDITOR_WINDOW = 12;
+
+interface PlanEditorProps {
+  tasks: Test[];
+  onClose: () => void;
+  isActive: boolean;
+}
+
+const PlanEditor: React.FC<PlanEditorProps> = ({ tasks, onClose, isActive }) => {
+  const [cursorIndex, setCursorIndex] = useState(0);
+  const [enabledMap, setEnabledMap] = useState<boolean[]>([]);
+
+  useEffect(() => {
+    setEnabledMap(tasks.map((t) => t.enabled));
+    setCursorIndex(0);
+  }, [tasks]);
+
+  useInput(
+    (input, key) => {
+      if (key.upArrow) {
+        setCursorIndex((prev) => Math.max(0, prev - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setCursorIndex((prev) => Math.min(tasks.length - 1, prev + 1));
+        return;
+      }
+      if (input === ' ') {
+        setEnabledMap((prev) => {
+          const next = [...prev];
+          next[cursorIndex] = !next[cursorIndex];
+          return next;
+        });
+        return;
+      }
+      if (input === 'a') {
+        setEnabledMap(tasks.map(() => true));
+        return;
+      }
+      if (input === 'n') {
+        setEnabledMap(tasks.map(() => false));
+        return;
+      }
+      if (key.delete && tasks[cursorIndex]?.plan) {
+        tasks[cursorIndex].plan.removeTest(tasks[cursorIndex]);
+        setCursorIndex((prev) => Math.min(prev, tasks.length - 2));
+        return;
+      }
+      if (key.return) {
+        for (let i = 0; i < tasks.length; i++) {
+          tasks[i].enabled = enabledMap[i];
+        }
+        tasks[0]?.plan?.notifyChange();
+        onClose();
+        return;
+      }
+      if (key.escape) {
+        onClose();
+      }
+    },
+    { isActive }
+  );
+
+  if (!isActive) return null;
+
+  const scrollStart = Math.max(0, Math.min(cursorIndex - Math.floor(EDITOR_WINDOW / 2), tasks.length - EDITOR_WINDOW));
+  const scrollEnd = Math.min(tasks.length, scrollStart + EDITOR_WINDOW);
+  const visibleSlice = tasks.slice(scrollStart, scrollEnd);
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      <Box marginBottom={1}>
+        <Text color="cyan" bold>
+          Edit Plan
+        </Text>
+        <Text color="dim"> — </Text>
+        <Text color="dim">(</Text>
+        <Text bold>↑↓</Text>
+        <Text color="dim">)</Text>
+        <Text color="dim"> navigate </Text>
+        <Text color="dim">(</Text>
+        <Text bold>Space</Text>
+        <Text color="dim">)</Text>
+        <Text color="dim"> toggle </Text>
+        <Text color="dim">(</Text>
+        <Text bold>a</Text>
+        <Text color="dim">)</Text>
+        <Text color="dim"> all </Text>
+        <Text color="dim">(</Text>
+        <Text bold>n</Text>
+        <Text color="dim">)</Text>
+        <Text color="dim"> none </Text>
+        <Text color="dim">(</Text>
+        <Text bold>Del</Text>
+        <Text color="dim">)</Text>
+        <Text color="dim"> remove </Text>
+        <Text color="dim">(</Text>
+        <Text bold>Enter</Text>
+        <Text color="dim">)</Text>
+        <Text color="dim"> confirm </Text>
+        <Text color="dim">(</Text>
+        <Text bold>Esc</Text>
+        <Text color="dim">)</Text>
+        <Text color="dim"> cancel</Text>
+      </Box>
+
+      {scrollStart > 0 && (
+        <Text color="dim">
+          {'  '}▲ {scrollStart} more
+        </Text>
+      )}
+
+      {visibleSlice.map((task, i) => {
+        const globalIdx = scrollStart + i;
+        const isCursor = globalIdx === cursorIndex;
+        const isEnabled = enabledMap[globalIdx];
+        const checkbox = isEnabled ? '[x]' : '[ ]';
+        const cursor = isCursor ? '>' : ' ';
+        const color = isEnabled ? 'green' : 'dim';
+
+        return (
+          <Box key={task.id || globalIdx} flexDirection="row">
+            <Text color={isCursor ? 'yellow' : 'dim'}>{cursor} </Text>
+            <Text color={color}>
+              {checkbox} {globalIdx + 1}. {task.scenario}
+            </Text>
+          </Box>
+        );
+      })}
+
+      {scrollEnd < tasks.length && (
+        <Text color="dim">
+          {'  '}▼ {tasks.length - scrollEnd} more
+        </Text>
+      )}
+
+      <Box marginTop={1}>
+        <Text color="dim">
+          {enabledMap.filter(Boolean).length}/{tasks.length} enabled
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default PlanEditor;

package/src/components/PlanPane.tsx

@@ -0,0 +1,71 @@
+import { Box, Text } from 'ink';
+import React from 'react';
+
+const MAX_VISIBLE_PLANS = 2;
+
+interface PlanPaneProps {
+  completedPlans: PlanSummary[];
+  activePlan: PlanSummary | null;
+}
+
+const PlanPane: React.FC<PlanPaneProps> = React.memo(({ completedPlans, activePlan }) => {
+  if (!activePlan && completedPlans.length === 0) return null;
+
+  const collapsedCount = Math.max(0, completedPlans.length - MAX_VISIBLE_PLANS);
+  const collapsedTests = completedPlans.slice(0, collapsedCount).reduce((sum, p) => sum + p.testCount, 0);
+  const visiblePlans = completedPlans.slice(collapsedCount);
+
+  return (
+    <Box flexDirection="row" width="100%" paddingX={1}>
+      <Box flexGrow={1} flexShrink={1} flexDirection="row" overflow="hidden">
+        {collapsedCount > 0 && (
+          <>
+            <Text backgroundColor="blue" color="white" wrap="truncate-end">
+              +{collapsedCount} plans ({collapsedTests} tests)
+            </Text>
+            <Text backgroundColor="blue" color="white">
+              {' '}
+              │{' '}
+            </Text>
+          </>
+        )}
+        {visiblePlans.map((plan, i) => (
+          <React.Fragment key={i}>
+            <Text backgroundColor="blue" color="gray" wrap="truncate-end">
+              {plan.title} ({formatStats(plan)})
+            </Text>
+            <Text backgroundColor="blue" color="gray">
+              {' '}
+              ›{' '}
+            </Text>
+          </React.Fragment>
+        ))}
+      </Box>
+
+      {activePlan && (
+        <Box flexShrink={0}>
+          <Text backgroundColor="blue" color="white" bold>
+            {activePlan.title} ({activePlan.testCount} tests)
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+});
+
+function formatStats(plan: PlanSummary): string {
+  const parts: string[] = [];
+  if (plan.passed > 0) parts.push(`${plan.passed}✓`);
+  if (plan.failed > 0) parts.push(`${plan.failed}✗`);
+  if (parts.length === 0) return `${plan.testCount} tests`;
+  return parts.join(' ');
+}
+
+export default PlanPane;
+
+export interface PlanSummary {
+  title: string;
+  testCount: number;
+  passed: number;
+  failed: number;
+}

package/src/components/SessionTimer.tsx

@@ -0,0 +1,35 @@
+import { Box, Text } from 'ink';
+import React, { useEffect, useState } from 'react';
+
+type SessionTimerProps = {
+  startedAt: number;
+};
+
+const pad = (n: number) => String(n).padStart(2, '0');
+
+const SessionTimer: React.FC<SessionTimerProps> = ({ startedAt }) => {
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setNow(Date.now());
+    }, 1000);
+
+    return () => clearInterval(id);
+  }, []);
+
+  const diffSec = Math.floor((now - startedAt) / 1000);
+  const seconds = diffSec % 60;
+  const minutes = Math.floor(diffSec / 60) % 60;
+  const hours = Math.floor(diffSec / 3600);
+
+  return (
+    <Box borderStyle="round" paddingX={1} paddingY={0}>
+      <Text>
+        Session time: {pad(hours)}:{pad(minutes)}:{pad(seconds)}
+      </Text>
+    </Box>
+  );
+};
+
+export default SessionTimer;

package/src/components/StateTransitionPane.tsx

@@ -0,0 +1,149 @@
+import { Box, Text } from 'ink';
+import React from 'react';
+import type { StateTransition, WebPageState } from '../state-manager.js';
+
+interface StateTransitionPaneProps {
+  transition?: StateTransition;
+  currentState?: WebPageState;
+}
+
+const StateTransitionPane: React.FC<StateTransitionPaneProps> = ({ transition, currentState }) => {
+  if (currentState) {
+    return (
+      <Box flexDirection="column" flexGrow={1}>
+        <Box padding={1} borderStyle="round" borderColor="dim" flexDirection="column">
+          <Box flexDirection="row" alignItems="flex-start" marginBottom={1}>
+            <Text color="dim">Current Page </Text>
+            <Text color="blue" wrap="truncate-end">
+              {currentState.url}
+            </Text>
+          </Box>
+
+          <Box marginY={0}>
+            <Text color="dim">
+              URL:{' '}
+              <Text color="yellow" wrap="truncate-end">
+                {currentState.fullUrl || currentState.url || 'unknown'}
+              </Text>
+            </Text>
+          </Box>
+          <Box marginY={0}>
+            <Text color="dim">
+              Title: <Text color="yellow">{currentState.title || 'none'}</Text>
+            </Text>
+          </Box>
+          {currentState.h1 && (
+            <Box marginY={0}>
+              <Text color="dim">
+                H1: <Text color="yellow">{currentState.h1}</Text>
+              </Text>
+            </Box>
+          )}
+          {currentState.h2 && (
+            <Box marginY={0}>
+              <Text color="dim">
+                H2: <Text color="yellow">{currentState.h2}</Text>
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    );
+  }
+
+  if (!transition) {
+    return null;
+  }
+
+  const { fromState, toState, trigger, timestamp } = transition;
+
+  const getDifferences = () => {
+    const differences: Array<{ key: string; from: string; to: string }> = [];
+
+    // URL comparison
+    if (fromState?.url !== toState.url) {
+      differences.push({
+        key: 'url',
+        from: fromState?.url || 'none',
+        to: toState.url || 'none',
+      });
+    }
+
+    // Title comparison
+    if (fromState?.title !== toState.title) {
+      differences.push({
+        key: 'title',
+        from: fromState?.title || 'none',
+        to: toState.title || 'none',
+      });
+    }
+
+    // H1 comparison
+    if (fromState?.h1 !== toState.h1) {
+      differences.push({
+        key: 'h1',
+        from: fromState?.h1 || 'none',
+        to: toState.h1 || 'none',
+      });
+    }
+
+    // H2 comparison
+    if (fromState?.h2 !== toState.h2) {
+      differences.push({
+        key: 'h2',
+        from: fromState?.h2 || 'none',
+        to: toState.h2 || 'none',
+      });
+    }
+
+    // H3 comparison
+    if (fromState?.h3 !== toState.h3) {
+      differences.push({
+        key: 'h3',
+        from: fromState?.h3 || 'none',
+        to: toState.h3 || 'none',
+      });
+    }
+
+    // H4 comparison
+    if (fromState?.h4 !== toState.h4) {
+      differences.push({
+        key: 'h4',
+        from: fromState?.h4 || 'none',
+        to: toState.h4 || 'none',
+      });
+    }
+
+    return differences;
+  };
+
+  const differences = getDifferences();
+  const timeString = timestamp.toLocaleTimeString();
+
+  if (differences.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column" flexGrow={1}>
+      <Box borderStyle="round" borderColor="dim" padding={1} flexDirection="column">
+        <Box justifyContent="space-between" marginBottom={1}>
+          <Text color="dim">🔄 state changed</Text>
+          <Text color="dim">
+            [{timeString}] {trigger}
+          </Text>
+        </Box>
+
+        {differences.map((diff, index) => (
+          <Box key={index} marginY={0}>
+            <Text color="dim">
+              {diff.key}: <Text color="red">{diff.from}</Text> → <Text color="green">{diff.to}</Text>
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default StateTransitionPane;

package/src/components/StatusPane.tsx

@@ -0,0 +1,62 @@
+import { Box, Text } from 'ink';
+import React from 'react';
+import { Stats } from '../stats.js';
+
+const ROW_WIDTH = 60;
+const LABEL_WIDTH = 45;
+
+const Row: React.FC<{ label: string; value: string | number }> = ({ label, value }) => (
+  <Box width={ROW_WIDTH}>
+    <Box width={LABEL_WIDTH} overflow="hidden">
+      <Text color="dim" wrap="truncate-end">
+        {label}
+      </Text>
+    </Box>
+    <Box flexGrow={1}>
+      <Text bold>{value}</Text>
+    </Box>
+  </Box>
+);
+
+export const StatusPane: React.FC<{ onComplete?: () => void }> = ({ onComplete }) => {
+  const modelEntries = Object.entries(Stats.models);
+
+  React.useEffect(() => {
+    if (!onComplete) return;
+    const timer = setTimeout(onComplete, 100);
+    return () => clearTimeout(timer);
+  }, [onComplete]);
+
+  const statsRows = [
+    { label: 'Tests', value: Stats.tests },
+    { label: 'Plans', value: Stats.plans },
+    { label: 'Researches', value: Stats.researches },
+  ].filter((row) => row.value > 0);
+
+  const tokenRows = modelEntries.filter(([, tokens]) => tokens.total > 0);
+
+  if (statsRows.length === 0 && tokenRows.length === 0) return null;
+
+  return (
+    <Box flexDirection="column" borderStyle="single" borderTop={true} borderBottom={false} borderLeft={false} borderRight={false} paddingX={1} paddingY={1} width={ROW_WIDTH + 4}>
+      <Box marginBottom={1}>
+        <Text bold>Session Statistics</Text>
+      </Box>
+      {statsRows.map((row) => (
+        <Row key={row.label} label={row.label} value={row.value} />
+      ))}
+
+      {tokenRows.length > 0 && (
+        <>
+          <Box marginTop={1} marginBottom={1}>
+            <Text bold>Usage</Text>
+          </Box>
+          <Row label="Time" value={Stats.getElapsedTime()} />
+          {tokenRows.map(([model, tokens]) => (
+            <Row key={model} label={model} value={`${Stats.humanizeTokens(tokens.total)} tokens`} />
+          ))}
+        </>
+      )}
+    </Box>
+  );
+};