explorbot 0.0.1 → 0.0.5

package/src/components/App.tsx

@@ -0,0 +1,377 @@
+import { Box, Text, useInput } from 'ink';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { CommandHandler } from '../command-handler.js';
+import type { ExplorbotConfig } from '../config.js';
+import { executionController } from '../execution-controller.ts';
+import type { ExplorBot, ExplorBotOptions } from '../explorbot.ts';
+import type { KnowledgeTracker } from '../knowledge-tracker.js';
+import type { StateTransition, WebPageState } from '../state-manager.js';
+import { Test } from '../test-plan.ts';
+import { tag } from '../utils/logger.js';
+import ActivityPane from './ActivityPane.js';
+import Autocomplete from './Autocomplete.js';
+import InputPane from './InputPane.js';
+import InputReadline from './InputReadline.js';
+import LogPane from './LogPane.js';
+import PlanEditor from './PlanEditor.js';
+import PlanPane, { type PlanSummary } from './PlanPane.js';
+import SessionTimer from './SessionTimer.js';
+import StateTransitionPane from './StateTransitionPane.js';
+import TaskPane, { WINDOW_SIZE } from './TaskPane.js';
+import WelcomeChecklist from './WelcomeChecklist.js';
+import WelcomeCommands from './WelcomeCommands.js';
+
+interface AppProps {
+  explorBot: ExplorBot;
+  initialShowInput?: boolean;
+  exitOnEmptyInput?: boolean;
+}
+
+export function App({ explorBot, initialShowInput = false, exitOnEmptyInput = false }: AppProps) {
+  const sessionStartedAtRef = useRef<number>(Date.now());
+  const InputComponent = InputReadline;
+  const [showSessionTimer, setShowSessionTimer] = useState(false);
+  const [showInput, setShowInput] = useState(initialShowInput);
+  const [interruptPrompt, setInterruptPrompt] = useState<string | null>(null);
+  const [currentState, setCurrentState] = useState<WebPageState | null>(null);
+  const [lastTransition, setLastTransition] = useState<StateTransition | null>(null);
+  const [tasks, setTasks] = useState<Test[]>([]);
+  const tasksRef = useRef<Test[]>([]);
+  const [showPlanEditor, setShowPlanEditor] = useState(false);
+  const [taskScrollOffset, setTaskScrollOffset] = useState(0);
+  const [commandHandler] = useState(() => new CommandHandler(explorBot));
+  const [checklistData, setChecklistData] = useState<{ config: ExplorbotConfig; knowledgeTracker: KnowledgeTracker } | null>(null);
+  const [showWelcome, setShowWelcome] = useState(false);
+  const userInputPromiseRef = useRef<{
+    resolve: (value: string | null) => void;
+    reject: (reason?: any) => void;
+  } | null>(null);
+  const interruptResolveRef = useRef<((value: string | null) => void) | null>(null);
+
+  useEffect(() => {
+    // biome-ignore lint/style/useConst: assigned after declaration in useEffect pattern
+    let unsubscribe: (() => void) | undefined;
+    let mounted = true;
+
+    process.env.INK_RUNNING = 'true';
+
+    explorBot.setUserResolve(async (error?: Error, showWelcomeFlag?: boolean) => {
+      if (error) {
+        console.error('Error occurred:', error.message);
+      }
+      if (showWelcomeFlag) {
+        setShowWelcome(true);
+      }
+      setShowInput(true);
+
+      return new Promise<string | null>((resolve, reject) => {
+        userInputPromiseRef.current = { resolve, reject };
+      });
+    });
+
+    const manager = explorBot.getExplorer().getStateManager();
+
+    unsubscribe = manager.onStateChange((transition: StateTransition) => {
+      if (mounted) {
+        setLastTransition(transition);
+        setCurrentState(transition.toState);
+      }
+    });
+
+    const initialState = manager.getCurrentState();
+    if (initialState && mounted) {
+      setCurrentState(initialState);
+    }
+
+    return () => {
+      mounted = false;
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    };
+  }, [explorBot]);
+
+  const [inputCallbackReady, setInputCallbackReady] = useState(false);
+
+  useEffect(() => {
+    executionController.setInputCallback(async (prompt: string) => {
+      setInterruptPrompt(prompt);
+      setShowInput(true);
+
+      return new Promise<string | null>((resolve) => {
+        interruptResolveRef.current = resolve;
+      });
+    });
+
+    const handleIdle = () => {
+      setShowInput(true);
+    };
+
+    executionController.on('idle', handleIdle);
+    setInputCallbackReady(true);
+
+    return () => {
+      executionController.off('idle', handleIdle);
+      executionController.reset();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!inputCallbackReady) return;
+
+    let mounted = true;
+
+    const visitInitial = async () => {
+      try {
+        await explorBot.visitInitialState();
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        tag('error').log('Failed to start:', message);
+      }
+      if (!mounted) return;
+      setChecklistData({
+        config: explorBot.getConfig(),
+        knowledgeTracker: explorBot.getKnowledgeTracker(),
+      });
+      setShowWelcome(true);
+      setShowInput(true);
+    };
+
+    visitInitial();
+
+    return () => {
+      mounted = false;
+    };
+  }, [explorBot, inputCallbackReady]);
+
+  const planRef = useRef<ReturnType<typeof explorBot.getCurrentPlan>>(undefined);
+  const unsubscribeRef = useRef<(() => void) | undefined>(undefined);
+  const [completedPlans, setCompletedPlans] = useState<PlanSummary[]>([]);
+  const [activePlanInfo, setActivePlanInfo] = useState<PlanSummary | null>(null);
+
+  useEffect(() => {
+    const makeSummary = (plan: NonNullable<ReturnType<typeof explorBot.getCurrentPlan>>): PlanSummary => {
+      const enabled = plan.tests.filter((t) => t.enabled);
+      return {
+        title: plan.title,
+        testCount: enabled.length,
+        passed: enabled.filter((t) => t.isSuccessful).length,
+        failed: enabled.filter((t) => t.hasFailed).length,
+      };
+    };
+
+    const subscribeToPlan = (plan: NonNullable<ReturnType<typeof explorBot.getCurrentPlan>>) => {
+      if (unsubscribeRef.current) unsubscribeRef.current();
+
+      if (planRef.current && planRef.current !== plan && planRef.current.tests.length > 0) {
+        const summary = makeSummary(planRef.current);
+        setCompletedPlans((prev) => {
+          if (prev.some((p) => p.title === summary.title)) return prev;
+          return [...prev, summary];
+        });
+      }
+
+      planRef.current = plan;
+      tasksRef.current = [...plan.tests];
+      setTasks(tasksRef.current);
+      setTaskScrollOffset(0);
+      setActivePlanInfo(makeSummary(plan));
+
+      let lastInProgressIdx = -1;
+      unsubscribeRef.current = plan.onTestsChange((updatedTests) => {
+        tasksRef.current = [...updatedTests];
+        setTasks(tasksRef.current);
+        setActivePlanInfo(makeSummary(plan));
+        const inProgressIdx = updatedTests.findIndex((t) => t.status === 'in_progress' && t.enabled);
+        if (inProgressIdx >= 0 && inProgressIdx !== lastInProgressIdx) {
+          lastInProgressIdx = inProgressIdx;
+          setTaskScrollOffset(Math.max(0, inProgressIdx - Math.floor(WINDOW_SIZE / 2)));
+        }
+      });
+    };
+
+    const initialPlan = explorBot.getCurrentPlan();
+    if (initialPlan) subscribeToPlan(initialPlan);
+
+    const interval = setInterval(() => {
+      const currentPlan = explorBot.getCurrentPlan();
+      if (currentPlan && currentPlan !== planRef.current) {
+        subscribeToPlan(currentPlan);
+      } else if (!currentPlan && planRef.current) {
+        if (unsubscribeRef.current) unsubscribeRef.current();
+        if (planRef.current.tests.length > 0) {
+          const summary = makeSummary(planRef.current);
+          setCompletedPlans((prev) => {
+            if (prev.some((p) => p.title === summary.title)) return prev;
+            return [...prev, summary];
+          });
+        }
+        planRef.current = undefined;
+        tasksRef.current = [];
+        setTasks([]);
+        setActivePlanInfo(null);
+      }
+    }, 2000);
+
+    return () => {
+      clearInterval(interval);
+      if (unsubscribeRef.current) unsubscribeRef.current();
+    };
+  }, [explorBot]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      if (!showInput) {
+        executionController.interrupt();
+      }
+      return;
+    }
+
+    if (key.ctrl) {
+      if (input === 'c') {
+        explorBot.stop().then(() => {
+          process.exit(0);
+        });
+        return;
+      }
+      if (input === 't') {
+        setShowSessionTimer((prev) => !prev);
+        return;
+      }
+      if (input === 'e' && tasksRef.current.length > 0) {
+        setShowPlanEditor(true);
+        return;
+      }
+    }
+
+    if (!showInput && !showPlanEditor) {
+      if (key.upArrow) {
+        setTaskScrollOffset((prev) => Math.max(0, prev - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setTaskScrollOffset((prev) => prev + 1);
+        return;
+      }
+    }
+  });
+
+  const handleInputSubmit = useCallback(
+    async (input: string) => {
+      const trimmed = input.trim();
+      if (!trimmed) return;
+
+      if (trimmed.toLowerCase() === '/help') {
+        setShowWelcome(true);
+      } else {
+        setShowWelcome(false);
+      }
+      tag('input').log(`> ${trimmed}`);
+
+      const isCommand = trimmed.startsWith('/') || trimmed.startsWith('I.') || trimmed.startsWith('page.') || trimmed.startsWith('await ');
+
+      if (trimmed.toLowerCase() === '/plan:edit') {
+        if (tasksRef.current.length > 0) setShowPlanEditor(true);
+        return;
+      }
+
+      if (isCommand) {
+        setInterruptPrompt(null);
+        setShowInput(false);
+        interruptResolveRef.current = null;
+        executionController.startExecution();
+        try {
+          await commandHandler.executeCommand(trimmed);
+        } catch (error: any) {
+          if (error?.name === 'AbortError') {
+            tag('info').log('Operation cancelled');
+          } else {
+            throw error;
+          }
+        }
+        setShowInput(true);
+        return;
+      }
+
+      if (interruptResolveRef.current) {
+        interruptResolveRef.current(input);
+        interruptResolveRef.current = null;
+        setInterruptPrompt(null);
+        setShowInput(false);
+        return;
+      }
+
+      if (userInputPromiseRef.current) {
+        userInputPromiseRef.current.resolve(input);
+        userInputPromiseRef.current = null;
+        setShowInput(false);
+        return;
+      }
+
+      setShowInput(false);
+      executionController.startExecution();
+      try {
+        await commandHandler.executeCommand(trimmed);
+      } catch (error: any) {
+        if (error?.name === 'AbortError') {
+          tag('info').log('Operation cancelled');
+        } else {
+          throw error;
+        }
+      }
+      setShowInput(true);
+    },
+    [commandHandler]
+  );
+
+  const handleCommandStart = useCallback(() => {
+    setShowInput(false);
+  }, []);
+
+  const handleCommandComplete = useCallback(() => {
+    setShowInput(true);
+  }, []);
+
+  return (
+    <Box flexDirection="column">
+      {checklistData && <WelcomeChecklist config={checklistData.config} knowledgeTracker={checklistData.knowledgeTracker} />}
+      <Box flexDirection="column" flexGrow={1}>
+        <LogPane verboseMode={explorBot.getOptions()?.verbose || false} />
+      </Box>
+
+      {showPlanEditor && <PlanEditor tasks={tasks} onClose={() => setShowPlanEditor(false)} isActive={showPlanEditor} />}
+
+      <Box height={3} flexDirection="row" justifyContent="space-between" alignItems="center" paddingX={1}>
+        <ActivityPane isInputVisible={showInput} />
+        {showSessionTimer && <SessionTimer startedAt={sessionStartedAtRef.current} />}
+      </Box>
+
+      {showWelcome && <WelcomeCommands hasKnowledge={explorBot.getKnowledgeTracker().listAllKnowledge().length > 0} />}
+      {showInput && <Box height={1} />}
+      {interruptPrompt && showInput && (
+        <Box paddingX={1}>
+          <Text color="yellow">{interruptPrompt}</Text>
+        </Box>
+      )}
+      <Box display={showInput ? 'flex' : 'none'}>
+        <InputComponent commandHandler={commandHandler} onSubmit={handleInputSubmit} onCommandStart={handleCommandStart} onCommandComplete={handleCommandComplete} isActive={showInput && !showPlanEditor} visible={true} />
+      </Box>
+
+      <Box flexDirection="row" alignItems="flex-start" columnGap={1} minHeight={5}>
+        {currentState && (
+          <Box width={tasks.length > 0 ? '50%' : '100%'}>
+            <StateTransitionPane currentState={currentState} />
+          </Box>
+        )}
+        {tasks.length > 0 && (
+          <Box width={currentState ? '50%' : '100%'}>
+            <TaskPane tasks={tasks} scrollOffset={taskScrollOffset} />
+          </Box>
+        )}
+        <Autocomplete />
+      </Box>
+
+      <PlanPane completedPlans={completedPlans} activePlan={activePlanInfo} />
+    </Box>
+  );
+}

package/src/components/Autocomplete.tsx

@@ -0,0 +1,63 @@
+import { Box, Text } from 'ink';
+import React from 'react';
+import { useAutocompleteState } from './autocomplete-store.js';
+
+const Autocomplete: React.FC = () => {
+  const { suggestions, selectedIndex, visible, argumentHint } = useAutocompleteState();
+
+  if (!visible) {
+    if (!argumentHint) {
+      return null;
+    }
+  }
+
+  if (!suggestions.length) {
+    return (
+      <Box position="absolute" top={0} left={0} width="100%" paddingX={1}>
+        <Text dimColor>{argumentHint}</Text>
+      </Box>
+    );
+  }
+
+  const effectiveSelectedIndex = Math.min(selectedIndex, suggestions.length - 1);
+  const maxHeight = 7;
+  const rowsPerColumn = Math.min(Math.max(1, maxHeight - 2), suggestions.length);
+  const columns: (typeof suggestions)[] = [];
+  for (let index = 0; index < suggestions.length; index += rowsPerColumn) {
+    columns.push(suggestions.slice(index, index + rowsPerColumn));
+  }
+
+  return (
+    <Box position="absolute" top={0} left={0} width="100%" maxHeight={maxHeight} overflow="hidden" paddingX={1} paddingY={1} backgroundColor="#2a2a2a" flexDirection="row" columnGap={2}>
+      {columns.map((column, columnIndex) => (
+        <Box key={columnIndex} flexDirection="column">
+          {column.map((suggestion, rowIndex) => {
+            const index = columnIndex * rowsPerColumn + rowIndex;
+            const isSelected = index === effectiveSelectedIndex;
+            let display = suggestion.display;
+            if (display.length > 24) {
+              display = `${display.slice(0, 21)}...`;
+            }
+            let color = 'white';
+            let backgroundColor = '#2a2a2a';
+            if (isSelected) {
+              color = 'black';
+              backgroundColor = '#e6e6e6';
+            }
+
+            return (
+              <Box key={suggestion.display} marginBottom={1}>
+                <Text color={color} backgroundColor={backgroundColor}>
+                  {' '}
+                  {display}{' '}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default Autocomplete;

package/src/components/InputPane.tsx

@@ -0,0 +1,259 @@
+import { Box, Text, useInput } from 'ink';
+import React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { CommandHandler } from '../command-handler.js';
+import AutocompletePane from './AutocompletePane.js';
+
+interface InputPaneProps {
+  commandHandler: CommandHandler;
+  exitOnEmptyInput?: boolean;
+  onSubmit?: (value: string) => Promise<void>;
+  onCommandStart?: () => void;
+  onCommandComplete?: () => void;
+  isActive?: boolean;
+  visible?: boolean;
+}
+
+const InputPane: React.FC<InputPaneProps> = ({ commandHandler, exitOnEmptyInput = false, onSubmit, onCommandStart, onCommandComplete, isActive = true, visible = true }) => {
+  const [inputValue, setInputValue] = useState('');
+  const [cursorPosition, setCursorPosition] = useState(0);
+  const [showAutocomplete, setShowAutocomplete] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [autoCompleteTriggered, setAutoCompleteTriggered] = useState(false);
+  const inputRef = useRef(inputValue);
+  const cursorRef = useRef(cursorPosition);
+
+  const addLog = useCallback((entry: string) => {
+    // For now, just console.log - in a real implementation this would integrate with the logger
+    console.log(entry);
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (value: string) => {
+      const trimmedValue = value.trim();
+
+      if (!trimmedValue) {
+        if (exitOnEmptyInput) {
+          console.log('\nExiting...');
+          process.exit(0);
+        }
+        return;
+      }
+
+      // Always call onCommandStart to hide input field
+      onCommandStart?.();
+
+      // Check if this is a command (starts with / or I.) or is 'exit'
+      const isCommand = trimmedValue.startsWith('/') || trimmedValue.startsWith('I.') || trimmedValue.startsWith('page.') || trimmedValue.startsWith('await ') || trimmedValue === 'exit' || trimmedValue === 'quit';
+
+      if (isCommand) {
+        if (onSubmit) {
+          await onSubmit(trimmedValue);
+        }
+        // Execute as command directly
+        try {
+          await commandHandler.executeCommand(trimmedValue);
+        } catch (error) {
+          addLog(`Command failed: ${error}`);
+        } finally {
+          onCommandComplete?.();
+        }
+      } else if (onSubmit) {
+        // Use the provided submit callback for non-commands
+        await onSubmit(trimmedValue);
+      }
+
+      // Reset state after submission
+      setInputValue('');
+      setCursorPosition(0);
+      setShowAutocomplete(false);
+      setSelectedIndex(0);
+      inputRef.current = '';
+      cursorRef.current = 0;
+    },
+    [commandHandler, exitOnEmptyInput, onSubmit, onCommandStart, onCommandComplete, addLog]
+  );
+
+  useEffect(() => {
+    inputRef.current = inputValue;
+  }, [inputValue]);
+
+  useEffect(() => {
+    cursorRef.current = cursorPosition;
+  }, [cursorPosition]);
+
+  const shouldShowAutocomplete = useCallback((value: string) => {
+    if (!value) return false;
+    if (value.startsWith('/')) return true;
+    if (value.startsWith('I.') || value.startsWith('page.') || value.startsWith('await ')) return true;
+    const lowered = value.toLowerCase();
+    return 'exit'.startsWith(lowered);
+  }, []);
+
+  useInput(
+    (input, key) => {
+      if (key.ctrl && input === 'c') {
+        console.log('\n🛑 Received Ctrl-C, exiting...');
+        process.exit(0);
+        return;
+      }
+
+      if (key.return) {
+        if (showAutocomplete) {
+          const filteredCommands = commandHandler.getFilteredCommands(inputRef.current);
+          const chosen = filteredCommands[selectedIndex] || filteredCommands[0];
+          if (chosen) {
+            inputRef.current = chosen;
+            cursorRef.current = chosen.length;
+            setInputValue(chosen);
+            setCursorPosition(chosen.length);
+            handleSubmit(chosen);
+            return;
+          }
+        }
+        handleSubmit(inputRef.current);
+        return;
+      }
+
+      if (key.ctrl && key.leftArrow) {
+        const nextCursor = Math.max(0, cursorRef.current - 1);
+        cursorRef.current = nextCursor;
+        setCursorPosition(nextCursor);
+        return;
+      }
+
+      if (key.ctrl && key.rightArrow) {
+        const nextCursor = Math.min(inputRef.current.length, cursorRef.current + 1);
+        cursorRef.current = nextCursor;
+        setCursorPosition(nextCursor);
+        return;
+      }
+
+      if (key.leftArrow) {
+        const nextCursor = Math.max(0, cursorRef.current - 1);
+        cursorRef.current = nextCursor;
+        setCursorPosition(nextCursor);
+        return;
+      }
+
+      if (key.rightArrow) {
+        const nextCursor = Math.min(inputRef.current.length, cursorRef.current + 1);
+        cursorRef.current = nextCursor;
+        setCursorPosition(nextCursor);
+        return;
+      }
+
+      // Handle autocomplete navigation
+      if (showAutocomplete && (key.upArrow || (key.shift && key.leftArrow))) {
+        const filteredCommands = commandHandler.getFilteredCommands(inputRef.current);
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : filteredCommands.length - 1));
+        return;
+      }
+
+      if (showAutocomplete && (key.downArrow || (key.shift && key.rightArrow))) {
+        const filteredCommands = commandHandler.getFilteredCommands(inputRef.current);
+        setSelectedIndex((prev) => (prev < filteredCommands.length - 1 ? prev + 1 : 0));
+        return;
+      }
+
+      if (key.tab) {
+        const filteredCommands = commandHandler.getFilteredCommands(inputRef.current);
+        if (selectedIndex < filteredCommands.length) {
+          const selectedCommand = filteredCommands[selectedIndex];
+          inputRef.current = selectedCommand;
+          cursorRef.current = selectedCommand.length;
+          setInputValue(selectedCommand);
+          setShowAutocomplete(false);
+          setSelectedIndex(0);
+          setCursorPosition(selectedCommand.length);
+          setAutoCompleteTriggered(true);
+        }
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        if (cursorRef.current > 0) {
+          const currentValue = inputRef.current;
+          const currentCursor = cursorRef.current;
+          const newValue = currentValue.slice(0, currentCursor - 1) + currentValue.slice(currentCursor);
+          const nextCursor = Math.max(0, currentCursor - 1);
+          inputRef.current = newValue;
+          cursorRef.current = nextCursor;
+          setInputValue(newValue);
+          setCursorPosition(nextCursor);
+          setSelectedIndex(0);
+          setAutoCompleteTriggered(false);
+          setShowAutocomplete(shouldShowAutocomplete(newValue));
+        }
+        return;
+      }
+
+      if (input && input.length === 1) {
+        const currentValue = inputRef.current;
+        const currentCursor = cursorRef.current;
+        const newValue = currentValue.slice(0, currentCursor) + input + currentValue.slice(currentCursor);
+        const nextCursor = currentCursor + 1;
+        inputRef.current = newValue;
+        cursorRef.current = nextCursor;
+        setInputValue(newValue);
+        setCursorPosition(nextCursor);
+        setSelectedIndex(0);
+        setAutoCompleteTriggered(false);
+        setShowAutocomplete(shouldShowAutocomplete(newValue));
+      }
+    },
+    { isActive }
+  );
+
+  // Register with command handler on mount, unregister on unmount
+  useEffect(() => {
+    const unregister = commandHandler.registerInputPane(addLog, handleSubmit);
+    commandHandler.setExitOnEmptyInput(exitOnEmptyInput);
+
+    return unregister;
+  }, [commandHandler, addLog, handleSubmit, exitOnEmptyInput]);
+
+  const displayValue = inputValue || '';
+  const beforeCursor = displayValue.slice(0, cursorPosition);
+  const afterCursor = displayValue.slice(cursorPosition);
+
+  const filteredCommands = commandHandler.getFilteredCommands(inputValue);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color="green">&gt; </Text>
+        <Text>{beforeCursor}</Text>
+        <Text backgroundColor="white" color="black">
+          {' '}
+        </Text>
+        <Text>{afterCursor}</Text>
+      </Box>
+
+      <AutocompletePane
+        commands={filteredCommands}
+        input={inputValue}
+        selectedIndex={selectedIndex}
+        onSelect={(index: number) => {
+          if (index < filteredCommands.length) {
+            const selectedCommand = filteredCommands[index];
+            inputRef.current = selectedCommand;
+            cursorRef.current = selectedCommand.length;
+            setInputValue(selectedCommand);
+            setShowAutocomplete(false);
+            setSelectedIndex(0);
+            setCursorPosition(selectedCommand.length);
+            setAutoCompleteTriggered(true);
+          }
+        }}
+        visible={showAutocomplete}
+      />
+    </Box>
+  );
+};
+
+export default InputPane;