@positronic/cli 0.0.55 → 0.0.57

package/dist/src/components/watch.js

@@ -6,6 +6,9 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -19,6 +22,9 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -46,6 +52,9 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -64,6 +73,9 @@ function _object_spread(target) {
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
 function _unsupported_iterable_to_array(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _array_like_to_array(o, minLen);
@@ -74,12 +86,19 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import React, { useState, useEffect, useRef } from 'react';
 import { Text, Box, useStdout, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
 import { EventSource } from 'eventsource';
-import { BRAIN_EVENTS, STATUS } from '@positronic/core';
+import { BRAIN_EVENTS, STATUS, reconstructBrainTree, createBrainExecutionMachine, sendEvent } from '@positronic/core';
 import { useBrainMachine } from '../hooks/useBrainMachine.js';
 import { getApiBaseUrl, isApiLocalDevMode } from '../commands/helpers.js';
-import { useApiDelete } from '../hooks/useApi.js';
 import { ErrorComponent } from './error.js';
+import { EventsView } from './events-view.js';
+import { StateView } from './state-view.js';
+import { AgentChatView } from './agent-chat-view.js';
+import { SelectList } from './select-list.js';
+import { getAgentLoops } from '../utils/agent-utils.js';
+import { handleKeyboardInput } from './watch-keyboard.js';
+import { useWatchMachine, machineStateToViewMode, isConfirmingKill, isKillingState, isPausingState, isResumingState, isSendingMessageState } from './watch-machine.js';
 // Get the index of the currently running step (or last completed if none running)
 var getCurrentStepIndex = function(steps) {
     var runningIndex = steps.findIndex(function(s) {
@@ -200,9 +219,25 @@ var BrainSection = function(param) {
     })));
 };
 export var Watch = function(param) {
-    var runId = param.runId, _param_manageScreenBuffer = param.manageScreenBuffer, manageScreenBuffer = _param_manageScreenBuffer === void 0 ? true : _param_manageScreenBuffer, _param_footer = param.footer, footer = _param_footer === void 0 ? 'x kill • esc quit' : _param_footer;
+    var runId = param.runId, _param_manageScreenBuffer = param.manageScreenBuffer, manageScreenBuffer = _param_manageScreenBuffer === void 0 ? true : _param_manageScreenBuffer, footer = param.footer, _param_startWithEvents = param.startWithEvents, startWithEvents = _param_startWithEvents === void 0 ? false : _param_startWithEvents;
     var write = useStdout().write;
     var exit = useApp().exit;
+    // UI navigation state machine - handles view transitions and related context
+    var _useWatchMachine = _sliced_to_array(useWatchMachine(runId, startWithEvents), 2), watchState = _useWatchMachine[0], sendWatch = _useWatchMachine[1];
+    // Derive viewMode from machine state
+    var viewMode = machineStateToViewMode(watchState.name);
+    // Read navigation and async operation state from machine context
+    var _watchState_context = watchState.context, previousViewMode = _watchState_context.previousView, stateSnapshot = _watchState_context.stateSnapshot, stateTitle = _watchState_context.stateTitle, stateScrollOffset = _watchState_context.stateScrollOffset, selectedAgentId = _watchState_context.selectedAgentId, agentChatScrollOffset = _watchState_context.agentChatScrollOffset, eventsSelectedIndex = _watchState_context.eventsSelectedIndex, killError = _watchState_context.killError, isKilled = _watchState_context.isKilled, pauseResumeMessage = _watchState_context.pauseResumeMessage, messageText = _watchState_context.messageText, messageSentFeedback = _watchState_context.messageFeedback;
+    // Derive async operation flags from machine state
+    var confirmingKill = isConfirmingKill(watchState.name);
+    var isKilling = isKillingState(watchState.name);
+    var isPausing = isPausingState(watchState.name);
+    var isResuming = isResumingState(watchState.name);
+    var isSendingMessage = isSendingMessageState(watchState.name);
+    // Events array (large, not navigation state)
+    var _useState = _sliced_to_array(useState([]), 2), events = _useState[0], setEvents = _useState[1];
+    // Events view mode (delegated to EventsView component)
+    var _useState1 = _sliced_to_array(useState('auto'), 2), eventsViewMode = _useState1[0], setEventsViewMode = _useState1[1];
     // Use state machine to track brain execution state
     // Machine is recreated when runId changes, giving us fresh context
     var _useBrainMachine = _sliced_to_array(useBrainMachine(runId), 2), current = _useBrainMachine[0], send = _useBrainMachine[1];
@@ -216,16 +251,15 @@ export var Watch = function(param) {
         send
     ]);
     // Read brain state directly from machine context - useMachine handles re-renders
-    var _current_context = current.context, rootBrain = _current_context.rootBrain, isComplete = _current_context.isComplete;
+    var _current_context = current.context, brains = _current_context.brains, brainIdStack = _current_context.brainIdStack, isComplete = _current_context.isComplete;
+    // Reconstruct the tree for UI display - this is O(depth) but depth is tiny
+    var rootBrain = reconstructBrainTree(brains, brainIdStack);
     // Additional state for connection and errors (not part of the brain state machine)
-    var _useState = _sliced_to_array(useState(undefined), 2), brainError = _useState[0], setBrainError = _useState[1];
-    var _useState1 = _sliced_to_array(useState(null), 2), connectionError = _useState1[0], setConnectionError = _useState1[1];
-    var _useState2 = _sliced_to_array(useState(false), 2), isConnected = _useState2[0], setIsConnected = _useState2[1];
-    // Kill state
-    var _useState3 = _sliced_to_array(useState(false), 2), confirmingKill = _useState3[0], setConfirmingKill = _useState3[1];
-    var _useState4 = _sliced_to_array(useState(false), 2), isKilling = _useState4[0], setIsKilling = _useState4[1];
-    var _useState5 = _sliced_to_array(useState(false), 2), isKilled = _useState5[0], setIsKilled = _useState5[1];
-    var _useApiDelete = useApiDelete('brain'), killBrain = _useApiDelete.execute, killError = _useApiDelete.error;
+    var _useState2 = _sliced_to_array(useState(undefined), 2), brainError = _useState2[0], setBrainError = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(null), 2), connectionError = _useState3[0], setConnectionError = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(false), 2), isConnected = _useState4[0], setIsConnected = _useState4[1];
+    // Track paused status from brain state machine
+    var isPaused = current.context.status === STATUS.PAUSED;
     // Enter alternate screen buffer on mount, exit on unmount
     // Skip in test environment or when parent manages screen buffer
     useEffect(function() {
@@ -258,6 +292,16 @@ export var Watch = function(param) {
         es.onmessage = function(event) {
             try {
                 var eventData = JSON.parse(event.data);
+                // Store event for events view (keep last 500 events to prevent memory issues)
+                setEvents(function(prev) {
+                    var newEvents = _to_consumable_array(prev).concat([
+                        {
+                            timestamp: new Date(),
+                            event: eventData
+                        }
+                    ]);
+                    return newEvents.slice(-500);
+                });
                 // Send event to state machine - useMachine handles re-renders automatically
                 // Use ref to ensure we always call the latest send function
                 sendRef.current(eventData);
@@ -281,28 +325,177 @@ export var Watch = function(param) {
     }, [
         runId
     ]);
-    // Keyboard handling
+    // Handler for viewing state at a specific event index (called from EventsView)
+    var handleViewStateAtEvent = function(eventIndex) {
+        // Store selected index before transitioning
+        sendWatch({
+            type: 'SET_EVENTS_SELECTED_INDEX',
+            index: eventIndex
+        });
+        // Use the brain state machine to reconstruct state at this point
+        var machine = createBrainExecutionMachine();
+        for(var i = 0; i <= eventIndex && i < events.length; i++){
+            sendEvent(machine, events[i].event);
+        }
+        // Transition to state view with the reconstructed state
+        sendWatch({
+            type: 'GO_TO_STATE',
+            stateSnapshot: machine.context.currentState,
+            stateTitle: "State at event #".concat(eventIndex + 1),
+            fromView: 'events'
+        });
+    };
+    // Handler for sending a USER_MESSAGE signal
+    var handleSendMessage = function() {
+        if (!messageText.trim() || isSendingMessage) return;
+        // Trigger the machine's sending-message invoke state
+        sendWatch({
+            type: 'SEND_MESSAGE'
+        });
+    };
+    // Auto-clear message feedback after success
+    useEffect(function() {
+        if (messageSentFeedback === 'success') {
+            var timer = setTimeout(function() {
+                sendWatch({
+                    type: 'CLEAR_FEEDBACK'
+                });
+            }, 1000);
+            return function() {
+                return clearTimeout(timer);
+            };
+        }
+    }, [
+        messageSentFeedback,
+        sendWatch
+    ]);
+    // Auto-clear pause/resume message after showing
+    useEffect(function() {
+        if (pauseResumeMessage) {
+            var timer = setTimeout(function() {
+                sendWatch({
+                    type: 'CLEAR_PAUSE_RESUME_MESSAGE'
+                });
+            }, 2000);
+            return function() {
+                return clearTimeout(timer);
+            };
+        }
+    }, [
+        pauseResumeMessage,
+        sendWatch
+    ]);
+    // Build keyboard context for the handler
+    var brainTitle = rootBrain === null || rootBrain === void 0 ? void 0 : rootBrain.brainTitle;
+    var agentLoops = getAgentLoops(events, brainTitle);
+    var hasAgents = agentLoops.length > 0;
+    // Keyboard handling - uses extracted handler for event mapping
     useInput(function(input, key) {
-        if (confirmingKill) {
-            if (input === 'y') {
-                setConfirmingKill(false);
-                setIsKilling(true);
-                killBrain("/brains/runs/".concat(runId)).then(function() {
-                    setIsKilled(true);
-                }).finally(function() {
-                    setIsKilling(false);
+        var keyboardContext = {
+            viewMode: viewMode,
+            eventsViewMode: eventsViewMode,
+            confirmingKill: confirmingKill,
+            isKilling: isKilling,
+            isKilled: isKilled,
+            isComplete: isComplete,
+            isPaused: isPaused,
+            isPausing: isPausing,
+            isResuming: isResuming,
+            hasAgents: hasAgents,
+            manageScreenBuffer: manageScreenBuffer
+        };
+        var event = handleKeyboardInput(input, key, keyboardContext);
+        if (!event) return;
+        // Handle each event type - forward to the state machine
+        switch(event.type){
+            case 'CONFIRM_KILL':
+                sendWatch({
+                    type: 'CONFIRM_KILL'
                 });
-            } else if (input === 'n' || key.escape) {
-                setConfirmingKill(false);
-            }
-        } else {
-            if (input === 'x' && !isKilling && !isKilled && !isComplete) {
-                setConfirmingKill(true);
-            } else if ((input === 'q' || key.escape) && manageScreenBuffer) {
-                // Only handle quit when standalone (manageScreenBuffer=true)
-                // When embedded, parent handles q/escape
+                break;
+            case 'CANCEL_KILL':
+                sendWatch({
+                    type: 'CANCEL_KILL'
+                });
+                break;
+            case 'GO_BACK':
+                sendWatch({
+                    type: 'GO_BACK'
+                });
+                break;
+            case 'CANCEL_MESSAGE_INPUT':
+                sendWatch({
+                    type: 'GO_BACK'
+                });
+                break;
+            case 'GO_TO_EVENTS':
+                sendWatch({
+                    type: 'GO_TO_EVENTS'
+                });
+                break;
+            case 'GO_TO_PROGRESS':
+                sendWatch({
+                    type: 'GO_TO_PROGRESS'
+                });
+                break;
+            case 'GO_TO_STATE':
+                {
+                    var _current_context_currentState;
+                    var currentState = (_current_context_currentState = current.context.currentState) !== null && _current_context_currentState !== void 0 ? _current_context_currentState : {};
+                    sendWatch({
+                        type: 'GO_TO_STATE',
+                        stateSnapshot: currentState,
+                        stateTitle: 'Current State',
+                        fromView: 'progress'
+                    });
+                    break;
+                }
+            case 'INITIATE_KILL':
+                sendWatch({
+                    type: 'INITIATE_KILL'
+                });
+                break;
+            case 'GO_TO_AGENTS':
+                {
+                    var fromView = viewMode === 'events' ? 'events' : 'progress';
+                    if (agentLoops.length === 1) {
+                        // Go directly to chat view for single agent
+                        sendWatch({
+                            type: 'GO_TO_AGENTS',
+                            selectedAgentId: agentLoops[0].stepId,
+                            fromView: fromView
+                        });
+                    } else {
+                        // Show picker for multiple agents
+                        sendWatch({
+                            type: 'GO_TO_AGENTS',
+                            fromView: fromView
+                        });
+                    }
+                    break;
+                }
+            case 'GO_TO_MESSAGE_INPUT':
+                {
+                    var fromView1 = viewMode === 'events' ? 'events' : 'progress';
+                    sendWatch({
+                        type: 'GO_TO_MESSAGE_INPUT',
+                        fromView: fromView1
+                    });
+                    break;
+                }
+            case 'PAUSE':
+                sendWatch({
+                    type: 'PAUSE'
+                });
+                break;
+            case 'RESUME':
+                sendWatch({
+                    type: 'RESUME'
+                });
+                break;
+            case 'QUIT':
                 exit();
-            }
+                break;
         }
     });
     // Prepare error props using destructuring
@@ -317,12 +510,154 @@ export var Watch = function(param) {
     // Prepare kill error props
     var killErrorProps = killError ? {
         title: 'Kill Error',
-        message: killError.message,
-        details: killError.details
+        message: killError.message
     } : null;
+    // Build footer based on current mode
+    var getFooter = function() {
+        var canSendMessage = hasAgents && !isComplete;
+        if (viewMode === 'state') {
+            return 'j/k scroll | space/shift+space page | b back';
+        } else if (viewMode === 'agent-chat') {
+            return 'j/k scroll | space/shift+space page | b back';
+        } else if (viewMode === 'agent-picker') {
+            return 'j/k select | Enter view | b back';
+        } else if (viewMode === 'message-input') {
+            return 'Enter send | Esc cancel';
+        } else if (viewMode === 'events') {
+            if (eventsViewMode === 'detail') {
+                return 'j/k scroll • b back';
+            } else if (eventsViewMode === 'navigating') {
+                var msgPart = canSendMessage ? ' | m message' : '';
+                return "j/k select | Enter detail | s state | a agents".concat(msgPart, " | b back | esc auto-scroll");
+            } else {
+                var msgPart1 = canSendMessage ? ' | m message' : '';
+                return "j/k select | a agents".concat(msgPart1, " | b back | x kill | esc quit");
+            }
+        } else {
+            var msgPart2 = canSendMessage ? ' | m message' : '';
+            var pauseResumePart = isPaused ? ' | r resume' : !isComplete ? ' | p pause' : '';
+            return "s state | e events | a agents".concat(pauseResumePart).concat(msgPart2, " | x kill | esc quit");
+        }
+    };
+    var displayFooter = footer !== null && footer !== void 0 ? footer : getFooter();
     return /*#__PURE__*/ React.createElement(Box, {
         flexDirection: "column"
-    }, !isConnected && !rootBrain ? /*#__PURE__*/ React.createElement(Text, null, "Connecting to watch service...") : !rootBrain ? /*#__PURE__*/ React.createElement(Text, null, "Waiting for brain to start...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(BrainSection, {
+    }, !isConnected && !rootBrain ? /*#__PURE__*/ React.createElement(Text, null, "Connecting to watch service...") : viewMode === 'state' && stateSnapshot !== null ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(StateView, {
+        state: stateSnapshot,
+        title: stateTitle,
+        scrollOffset: stateScrollOffset,
+        onScrollChange: function(offset) {
+            return sendWatch({
+                type: 'SET_STATE_SCROLL_OFFSET',
+                offset: offset
+            });
+        },
+        isActive: viewMode === 'state'
+    }), connectionErrorProps && /*#__PURE__*/ React.createElement(ErrorComponent, {
+        error: connectionErrorProps
+    }), brainErrorProps && /*#__PURE__*/ React.createElement(ErrorComponent, {
+        error: brainErrorProps
+    })) : viewMode === 'agent-picker' ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(SelectList, {
+        items: agentLoops.map(function(agent) {
+            return {
+                id: agent.stepId,
+                label: agent.label,
+                description: "".concat(agent.rawResponseEvents.length, " response(s)")
+            };
+        }),
+        header: "Select an agent to view:",
+        onSelect: function(item) {
+            sendWatch({
+                type: 'AGENT_SELECTED',
+                agentId: item.id
+            });
+        },
+        onCancel: function() {
+            return sendWatch({
+                type: 'GO_BACK'
+            });
+        },
+        footer: "j/k select | Enter view | b back"
+    }), connectionErrorProps && /*#__PURE__*/ React.createElement(ErrorComponent, {
+        error: connectionErrorProps
+    }), brainErrorProps && /*#__PURE__*/ React.createElement(ErrorComponent, {
+        error: brainErrorProps
+    })) : viewMode === 'agent-chat' && selectedAgentId ? function() {
+        var selectedAgent = agentLoops.find(function(a) {
+            return a.stepId === selectedAgentId;
+        });
+        if (!selectedAgent) {
+            return /*#__PURE__*/ React.createElement(Text, null, "Agent not found");
+        }
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(AgentChatView, {
+            label: selectedAgent.label,
+            agentStartEvent: selectedAgent.startEvent,
+            rawResponseEvents: selectedAgent.rawResponseEvents,
+            scrollOffset: agentChatScrollOffset,
+            onScrollChange: function(offset) {
+                return sendWatch({
+                    type: 'SET_AGENT_CHAT_SCROLL_OFFSET',
+                    offset: offset
+                });
+            },
+            isActive: viewMode === 'agent-chat'
+        }), connectionErrorProps && /*#__PURE__*/ React.createElement(ErrorComponent, {
+            error: connectionErrorProps
+        }), brainErrorProps && /*#__PURE__*/ React.createElement(ErrorComponent, {
+            error: brainErrorProps
+        }));
+    }() : viewMode === 'events' ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(EventsView, {
+        events: events,
+        totalTokens: current.context.totalTokens,
+        isActive: viewMode === 'events',
+        onModeChange: setEventsViewMode,
+        onViewState: handleViewStateAtEvent,
+        selectedIndex: eventsSelectedIndex,
+        onSelectedIndexChange: function(index) {
+            return sendWatch({
+                type: 'SET_EVENTS_SELECTED_INDEX',
+                index: index
+            });
+        }
+    }), connectionErrorProps && /*#__PURE__*/ React.createElement(ErrorComponent, {
+        error: connectionErrorProps
+    }), brainErrorProps && /*#__PURE__*/ React.createElement(ErrorComponent, {
+        error: brainErrorProps
+    })) : viewMode === 'message-input' ? /*#__PURE__*/ React.createElement(Box, {
+        flexDirection: "column"
+    }, /*#__PURE__*/ React.createElement(Box, {
+        marginBottom: 1
+    }, /*#__PURE__*/ React.createElement(Text, {
+        bold: true
+    }, "Send message to agent:")), /*#__PURE__*/ React.createElement(Box, null, /*#__PURE__*/ React.createElement(Text, {
+        color: "cyan"
+    }, "> "), /*#__PURE__*/ React.createElement(TextInput, {
+        value: messageText,
+        onChange: function(text) {
+            return sendWatch({
+                type: 'SET_MESSAGE_TEXT',
+                text: text
+            });
+        },
+        onSubmit: handleSendMessage,
+        focus: true
+    })), isSendingMessage && /*#__PURE__*/ React.createElement(Box, {
+        marginTop: 1
+    }, /*#__PURE__*/ React.createElement(Text, {
+        color: "yellow"
+    }, "Sending...")), messageSentFeedback === 'success' && /*#__PURE__*/ React.createElement(Box, {
+        marginTop: 1
+    }, /*#__PURE__*/ React.createElement(Text, {
+        color: "green"
+    }, "Message sent!")), messageSentFeedback === 'error' && /*#__PURE__*/ React.createElement(Box, {
+        marginTop: 1
+    }, /*#__PURE__*/ React.createElement(Text, {
+        color: "red"
+    }, "Failed to send message")), connectionErrorProps && /*#__PURE__*/ React.createElement(ErrorComponent, {
+        error: connectionErrorProps
+    }), brainErrorProps && /*#__PURE__*/ React.createElement(ErrorComponent, {
+        error: brainErrorProps
+    })) : !rootBrain ? /*#__PURE__*/ React.createElement(Text, null, "Waiting for brain to start...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(BrainSection, {
         brain: rootBrain
     }), confirmingKill && /*#__PURE__*/ React.createElement(Box, {
         marginTop: 1
@@ -339,7 +674,26 @@ export var Watch = function(param) {
         paddingX: 1
     }, /*#__PURE__*/ React.createElement(Text, {
         color: "red"
-    }, "Brain killed.")), isComplete && !connectionError && !brainError && !isKilled && /*#__PURE__*/ React.createElement(Box, {
+    }, "Brain killed.")), isPaused && !isKilled && /*#__PURE__*/ React.createElement(Box, {
+        marginTop: 1,
+        borderStyle: "round",
+        borderColor: "cyan",
+        paddingX: 1
+    }, /*#__PURE__*/ React.createElement(Text, {
+        color: "cyan"
+    }, "Brain paused. Press 'r' to resume.")), isPausing && /*#__PURE__*/ React.createElement(Box, {
+        marginTop: 1
+    }, /*#__PURE__*/ React.createElement(Text, {
+        color: "yellow"
+    }, "Sending pause signal...")), isResuming && /*#__PURE__*/ React.createElement(Box, {
+        marginTop: 1
+    }, /*#__PURE__*/ React.createElement(Text, {
+        color: "yellow"
+    }, "Sending resume signal...")), pauseResumeMessage && !isPausing && !isResuming && /*#__PURE__*/ React.createElement(Box, {
+        marginTop: 1
+    }, /*#__PURE__*/ React.createElement(Text, {
+        color: "cyan"
+    }, pauseResumeMessage)), isComplete && !connectionError && !brainError && !isKilled && /*#__PURE__*/ React.createElement(Box, {
         marginTop: 1,
         borderStyle: "round",
         borderColor: "green",
@@ -356,5 +710,5 @@ export var Watch = function(param) {
         marginTop: 1
     }, /*#__PURE__*/ React.createElement(Text, {
         dimColor: true
-    }, footer)));
+    }, displayFooter)));
 };