@positronic/cli 0.0.56 → 0.0.57

package/dist/src/components/event-detail.js

@@ -0,0 +1,364 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+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 _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);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import React from 'react';
+import { Text, Box, useStdout, useInput } from 'ink';
+import { BRAIN_EVENTS } from '@positronic/core';
+function formatFullTimestamp(timestamp) {
+    return timestamp.toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+    });
+}
+function formatValue(value) {
+    if (typeof value === 'string') return value;
+    return JSON.stringify(value, null, 2);
+}
+function getStatusIcon(status) {
+    switch(status){
+        case 'complete':
+            return '✓';
+        case 'running':
+            return '•';
+        case 'error':
+            return '✗';
+        default:
+            return '○';
+    }
+}
+function getEventSymbol(event) {
+    switch(event.type){
+        case BRAIN_EVENTS.START:
+            return {
+                symbol: '[>]',
+                color: 'yellow'
+            };
+        case BRAIN_EVENTS.COMPLETE:
+            return {
+                symbol: '[ok]',
+                color: 'green'
+            };
+        case BRAIN_EVENTS.ERROR:
+            return {
+                symbol: '[!!]',
+                color: 'red'
+            };
+        case BRAIN_EVENTS.CANCELLED:
+            return {
+                symbol: '[x]',
+                color: 'red'
+            };
+        case BRAIN_EVENTS.STEP_START:
+            return {
+                symbol: '[.]',
+                color: 'yellow'
+            };
+        case BRAIN_EVENTS.STEP_COMPLETE:
+            return {
+                symbol: '[+]',
+                color: 'green'
+            };
+        case BRAIN_EVENTS.STEP_RETRY:
+            return {
+                symbol: '[?]',
+                color: 'yellow'
+            };
+        case BRAIN_EVENTS.STEP_STATUS:
+            return {
+                symbol: '[-]',
+                color: 'gray'
+            };
+        case BRAIN_EVENTS.WEBHOOK:
+            return {
+                symbol: '[~]',
+                color: 'cyan'
+            };
+        case BRAIN_EVENTS.WEBHOOK_RESPONSE:
+            return {
+                symbol: '[<]',
+                color: 'cyan'
+            };
+        case BRAIN_EVENTS.AGENT_START:
+            return {
+                symbol: '[A]',
+                color: 'yellow'
+            };
+        case BRAIN_EVENTS.AGENT_ITERATION:
+            return {
+                symbol: '[#]',
+                color: 'gray'
+            };
+        case BRAIN_EVENTS.AGENT_TOOL_CALL:
+            return {
+                symbol: '[T]',
+                color: 'white'
+            };
+        case BRAIN_EVENTS.AGENT_TOOL_RESULT:
+            return {
+                symbol: '[R]',
+                color: 'white'
+            };
+        case BRAIN_EVENTS.AGENT_ASSISTANT_MESSAGE:
+            return {
+                symbol: '[M]',
+                color: 'white'
+            };
+        case BRAIN_EVENTS.AGENT_COMPLETE:
+            return {
+                symbol: '[A]',
+                color: 'green'
+            };
+        case BRAIN_EVENTS.AGENT_TOKEN_LIMIT:
+            return {
+                symbol: '[!]',
+                color: 'red'
+            };
+        case BRAIN_EVENTS.AGENT_ITERATION_LIMIT:
+            return {
+                symbol: '[!]',
+                color: 'red'
+            };
+        case BRAIN_EVENTS.AGENT_WEBHOOK:
+            return {
+                symbol: '[W]',
+                color: 'cyan'
+            };
+        default:
+            return {
+                symbol: '[?]',
+                color: 'gray'
+            };
+    }
+}
+function getEventDetailContent(event) {
+    switch(event.type){
+        case BRAIN_EVENTS.AGENT_TOOL_CALL:
+            return [
+                "Tool: ".concat(event.toolName),
+                "Tool Call ID: ".concat(event.toolCallId),
+                "Step: ".concat(event.stepTitle),
+                '',
+                'Input:',
+                JSON.stringify(event.input, null, 2)
+            ].join('\n');
+        case BRAIN_EVENTS.AGENT_TOOL_RESULT:
+            return [
+                "Tool: ".concat(event.toolName),
+                "Tool Call ID: ".concat(event.toolCallId),
+                "Step: ".concat(event.stepTitle),
+                '',
+                'Result:',
+                formatValue(event.result)
+            ].join('\n');
+        case BRAIN_EVENTS.ERROR:
+            return [
+                "Brain: ".concat(event.brainTitle),
+                '',
+                "Error: ".concat(event.error.name),
+                "Message: ".concat(event.error.message),
+                '',
+                'Stack Trace:',
+                event.error.stack || '(no stack trace)'
+            ].join('\n');
+        case BRAIN_EVENTS.AGENT_COMPLETE:
+            return [
+                "Step: ".concat(event.stepTitle),
+                "Terminal Tool: ".concat(event.terminalToolName),
+                "Total Iterations: ".concat(event.totalIterations),
+                "Total Tokens: ".concat(event.totalTokens.toLocaleString()),
+                '',
+                'Result:',
+                JSON.stringify(event.result, null, 2)
+            ].join('\n');
+        case BRAIN_EVENTS.AGENT_ITERATION:
+            return [
+                "Step: ".concat(event.stepTitle),
+                "Iteration: ".concat(event.iteration),
+                "Tokens This Iteration: ".concat(event.tokensThisIteration.toLocaleString()),
+                "Total Tokens So Far: ".concat(event.totalTokens.toLocaleString())
+            ].join('\n');
+        case BRAIN_EVENTS.STEP_COMPLETE:
+            return [
+                "Step: ".concat(event.stepTitle),
+                "Step ID: ".concat(event.stepId),
+                '',
+                'State Patch:',
+                JSON.stringify(event.patch, null, 2)
+            ].join('\n');
+        case BRAIN_EVENTS.AGENT_START:
+            return [
+                "Step: ".concat(event.stepTitle),
+                "Step ID: ".concat(event.stepId),
+                '',
+                'Tools:'
+            ].concat(_to_consumable_array(event.tools && event.tools.length > 0 ? event.tools.map(function(t) {
+                return "  • ".concat(t);
+            }) : [
+                '  (none)'
+            ]), [
+                '',
+                'Prompt:',
+                event.prompt
+            ], _to_consumable_array(event.system ? [
+                '',
+                'System Prompt:',
+                event.system
+            ] : [])).join('\n');
+        case BRAIN_EVENTS.START:
+            return [
+                "Brain: ".concat(event.brainTitle)
+            ].concat(_to_consumable_array(event.brainDescription ? [
+                "Description: ".concat(event.brainDescription)
+            ] : []), [
+                "Run ID: ".concat(event.brainRunId),
+                '',
+                'Options:',
+                JSON.stringify(event.options, null, 2)
+            ]).join('\n');
+        case BRAIN_EVENTS.AGENT_TOKEN_LIMIT:
+            return [
+                "Step: ".concat(event.stepTitle),
+                "Total Tokens: ".concat(event.totalTokens.toLocaleString()),
+                "Max Tokens: ".concat(event.maxTokens.toLocaleString()),
+                '',
+                'Token limit exceeded. Agent stopped.'
+            ].join('\n');
+        case BRAIN_EVENTS.AGENT_ITERATION_LIMIT:
+            return [
+                "Step: ".concat(event.stepTitle),
+                "Iteration: ".concat(event.iteration),
+                "Max Iterations: ".concat(event.maxIterations),
+                "Total Tokens: ".concat(event.totalTokens.toLocaleString()),
+                '',
+                'Iteration limit reached. Agent stopped.'
+            ].join('\n');
+        case BRAIN_EVENTS.STEP_STATUS:
+            return [
+                'Steps:'
+            ].concat(_to_consumable_array(event.steps.map(function(s) {
+                return "  ".concat(getStatusIcon(s.status), " ").concat(s.title);
+            }))).join('\n');
+        case BRAIN_EVENTS.AGENT_ASSISTANT_MESSAGE:
+            return [
+                "Step: ".concat(event.stepTitle),
+                '',
+                'Message:',
+                event.content
+            ].join('\n');
+        case BRAIN_EVENTS.STEP_START:
+            return [
+                "Step: ".concat(event.stepTitle),
+                "Step ID: ".concat(event.stepId)
+            ].join('\n');
+        case BRAIN_EVENTS.STEP_RETRY:
+            return [
+                "Step: ".concat(event.stepTitle),
+                "Step ID: ".concat(event.stepId),
+                "Attempt: ".concat(event.attempt)
+            ].join('\n');
+        case BRAIN_EVENTS.COMPLETE:
+            return [
+                "Brain: ".concat(event.brainTitle),
+                '',
+                'Brain completed successfully.'
+            ].join('\n');
+        case BRAIN_EVENTS.CANCELLED:
+            return [
+                "Brain: ".concat(event.brainTitle),
+                '',
+                'Brain was cancelled.'
+            ].join('\n');
+        case BRAIN_EVENTS.WEBHOOK:
+            return [
+                'Waiting for webhook response...',
+                '',
+                'Wait For:',
+                JSON.stringify(event.waitFor, null, 2)
+            ].join('\n');
+        case BRAIN_EVENTS.WEBHOOK_RESPONSE:
+            return [
+                'Webhook Response:',
+                JSON.stringify(event.response, null, 2)
+            ].join('\n');
+        case BRAIN_EVENTS.AGENT_WEBHOOK:
+            return [
+                "Step: ".concat(event.stepTitle),
+                "Tool: ".concat(event.toolName),
+                "Tool Call ID: ".concat(event.toolCallId),
+                '',
+                'Agent waiting for webhook response...'
+            ].join('\n');
+        default:
+            // Show all fields for any event type
+            return JSON.stringify(event, null, 2);
+    }
+}
+export var EventDetail = function(param) {
+    var stored = param.stored, scrollOffset = param.scrollOffset, onScrollChange = param.onScrollChange, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? true : _param_isActive;
+    var stdout = useStdout().stdout;
+    var terminalHeight = (stdout === null || stdout === void 0 ? void 0 : stdout.rows) || 24;
+    var maxLines = Math.max(5, terminalHeight - 8);
+    var content = getEventDetailContent(stored.event);
+    var lines = content.split('\n');
+    var totalLines = lines.length;
+    var maxScroll = Math.max(0, totalLines - maxLines);
+    // Handle scrolling
+    useInput(function(input, key) {
+        if (!isActive) return;
+        if (key.upArrow || input === 'k') {
+            onScrollChange(Math.max(0, scrollOffset - 1));
+        } else if (key.downArrow || input === 'j') {
+            onScrollChange(Math.min(maxScroll, scrollOffset + 1));
+        }
+    }, {
+        isActive: isActive
+    });
+    var visibleLines = lines.slice(scrollOffset, scrollOffset + maxLines);
+    var _getEventSymbol = getEventSymbol(stored.event), symbol = _getEventSymbol.symbol, color = _getEventSymbol.color;
+    return /*#__PURE__*/ React.createElement(Box, {
+        flexDirection: "column"
+    }, /*#__PURE__*/ React.createElement(Box, {
+        marginBottom: 1
+    }, /*#__PURE__*/ React.createElement(Text, {
+        color: color
+    }, symbol, " "), /*#__PURE__*/ React.createElement(Text, {
+        bold: true
+    }, stored.event.type), /*#__PURE__*/ React.createElement(Text, {
+        dimColor: true
+    }, " • ", formatFullTimestamp(stored.timestamp))), /*#__PURE__*/ React.createElement(Box, {
+        flexDirection: "column",
+        marginLeft: 2
+    }, visibleLines.map(function(line, i) {
+        return /*#__PURE__*/ React.createElement(Text, {
+            key: scrollOffset + i
+        }, line);
+    })), totalLines > maxLines && /*#__PURE__*/ React.createElement(Box, {
+        marginTop: 1
+    }, /*#__PURE__*/ React.createElement(Text, {
+        dimColor: true
+    }, "Lines ", scrollOffset + 1, "-", Math.min(scrollOffset + maxLines, totalLines), " of ", totalLines)));
+};

package/dist/src/components/events-view.js

@@ -1,6 +1,53 @@
-import React from 'react';
-import { Text, Box, useStdout } from 'ink';
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+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 _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 _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import React, { useState, useEffect } from 'react';
+import { Text, Box, useStdout, useInput } from 'ink';
 import { BRAIN_EVENTS } from '@positronic/core';
+import { EventDetail } from './event-detail.js';
 // Format relative timestamp
 function formatTimestamp(timestamp) {
     var now = Date.now();
@@ -32,12 +79,6 @@ function formatEvent(event) {
                 text: 'Brain started: "'.concat(event.brainTitle, '"'),
                 color: 'yellow'
             };
-        case BRAIN_EVENTS.RESTART:
-            return {
-                symbol: '[>>]',
-                text: 'Brain restarted: "'.concat(event.brainTitle, '"'),
-                color: 'yellow'
-            };
         case BRAIN_EVENTS.COMPLETE:
             return {
                 symbol: '[ok]',
@@ -102,7 +143,8 @@ function formatEvent(event) {
             return {
                 symbol: '[#]',
                 text: "Agent iteration ".concat(event.iteration),
-                color: 'gray'
+                color: 'gray',
+                tokens: event.tokensThisIteration
             };
         case BRAIN_EVENTS.AGENT_TOOL_CALL:
             return {
@@ -125,14 +167,23 @@ function formatEvent(event) {
         case BRAIN_EVENTS.AGENT_COMPLETE:
             return {
                 symbol: '[A]',
-                text: 'Agent completed: "'.concat(event.terminalToolName, '" (').concat(event.totalIterations, " iterations)"),
-                color: 'green'
+                text: 'Agent completed: "'.concat(event.terminalToolName, '" (').concat(event.totalIterations, " iter)"),
+                color: 'green',
+                tokens: event.totalTokens
             };
         case BRAIN_EVENTS.AGENT_TOKEN_LIMIT:
             return {
                 symbol: '[!]',
                 text: "Token limit reached: ".concat(event.totalTokens, "/").concat(event.maxTokens),
-                color: 'red'
+                color: 'red',
+                tokens: event.totalTokens
+            };
+        case BRAIN_EVENTS.AGENT_ITERATION_LIMIT:
+            return {
+                symbol: '[!]',
+                text: "Iteration limit reached: ".concat(event.iteration, "/").concat(event.maxIterations),
+                color: 'red',
+                tokens: event.totalTokens
             };
         case BRAIN_EVENTS.AGENT_WEBHOOK:
             return {
@@ -140,6 +191,24 @@ function formatEvent(event) {
                 text: "Agent webhook: ".concat(event.toolName),
                 color: 'cyan'
             };
+        case BRAIN_EVENTS.AGENT_RAW_RESPONSE_MESSAGE:
+            return {
+                symbol: '[~]',
+                text: "Agent response (iteration ".concat(event.iteration, ")"),
+                color: 'gray'
+            };
+        case BRAIN_EVENTS.PAUSED:
+            return {
+                symbol: '[||]',
+                text: 'Brain paused: "'.concat(event.brainTitle, '"'),
+                color: 'cyan'
+            };
+        case BRAIN_EVENTS.RESUMED:
+            return {
+                symbol: '[>]',
+                text: 'Brain resumed: "'.concat(event.brainTitle, '"'),
+                color: 'green'
+            };
         default:
             return {
                 symbol: '[?]',
@@ -148,36 +217,163 @@ function formatEvent(event) {
             };
     }
 }
+// Calculate visible window with selection support
+function calculateVisibleWindow(eventsLength, selectedIndex, maxVisible) {
+    if (selectedIndex === null) {
+        // Auto-scroll: show most recent
+        return {
+            start: Math.max(0, eventsLength - maxVisible),
+            end: eventsLength
+        };
+    }
+    // Keep selection centered when possible
+    var half = Math.floor(maxVisible / 2);
+    var start = Math.max(0, selectedIndex - half);
+    var end = Math.min(eventsLength, start + maxVisible);
+    // Adjust if we hit the end
+    if (end === eventsLength) {
+        start = Math.max(0, end - maxVisible);
+    }
+    return {
+        start: start,
+        end: end
+    };
+}
 var EventLine = function(param) {
-    var stored = param.stored;
-    var _formatEvent = formatEvent(stored.event), symbol = _formatEvent.symbol, text = _formatEvent.text, color = _formatEvent.color;
+    var stored = param.stored, isSelected = param.isSelected;
+    var _formatEvent = formatEvent(stored.event), symbol = _formatEvent.symbol, text = _formatEvent.text, color = _formatEvent.color, tokens = _formatEvent.tokens;
     var timestamp = formatTimestamp(stored.timestamp);
     return /*#__PURE__*/ React.createElement(Box, null, /*#__PURE__*/ React.createElement(Text, {
+        color: isSelected ? 'cyan' : undefined
+    }, isSelected ? '› ' : '  '), /*#__PURE__*/ React.createElement(Text, {
         dimColor: true
     }, timestamp.padEnd(12), " "), /*#__PURE__*/ React.createElement(Text, {
-        color: color
-    }, symbol, " "), /*#__PURE__*/ React.createElement(Text, null, text));
+        color: isSelected ? 'cyan' : color
+    }, symbol, " "), /*#__PURE__*/ React.createElement(Text, {
+        color: isSelected ? 'cyan' : undefined
+    }, text), tokens !== undefined && /*#__PURE__*/ React.createElement(Text, {
+        dimColor: true
+    }, " (", tokens.toLocaleString(), " tokens)"));
 };
 export var EventsView = function(param) {
-    var events = param.events;
+    var events = param.events, _param_totalTokens = param.totalTokens, totalTokens = _param_totalTokens === void 0 ? 0 : _param_totalTokens, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? true : _param_isActive, onModeChange = param.onModeChange, onViewState = param.onViewState, controlledSelectedIndex = param.selectedIndex, onSelectedIndexChange = param.onSelectedIndexChange;
     var stdout = useStdout().stdout;
     var terminalHeight = (stdout === null || stdout === void 0 ? void 0 : stdout.rows) || 24;
-    // Reserve lines for header, footer, margins
-    var maxVisible = Math.max(5, terminalHeight - 6);
-    // Show most recent events at bottom (scrolling up)
-    var visibleEvents = events.slice(-maxVisible);
+    // Reserve lines for header, footer, margins, token total
+    var maxVisible = Math.max(5, terminalHeight - 8);
+    var _useState = _sliced_to_array(useState('list'), 2), mode = _useState[0], setMode = _useState[1];
+    var _useState1 = _sliced_to_array(useState(null), 2), internalSelectedIndex = _useState1[0], setInternalSelectedIndex = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(0), 2), scrollOffset = _useState2[0], setScrollOffset = _useState2[1];
+    // Use controlled value if provided, otherwise use internal state
+    var isControlled = controlledSelectedIndex !== undefined;
+    var selectedIndex = isControlled ? controlledSelectedIndex : internalSelectedIndex;
+    var setSelectedIndex = function(index) {
+        if (isControlled) {
+            onSelectedIndexChange === null || onSelectedIndexChange === void 0 ? void 0 : onSelectedIndexChange(index);
+        } else {
+            setInternalSelectedIndex(index);
+        }
+    };
+    // Notify parent of mode changes
+    useEffect(function() {
+        if (onModeChange) {
+            if (mode === 'detail') {
+                onModeChange('detail');
+            } else if (selectedIndex !== null) {
+                onModeChange('navigating');
+            } else {
+                onModeChange('auto');
+            }
+        }
+    }, [
+        mode,
+        selectedIndex,
+        onModeChange
+    ]);
+    // Keep selection valid when events change
+    useEffect(function() {
+        if (selectedIndex !== null && events.length > 0) {
+            if (selectedIndex >= events.length) {
+                setSelectedIndex(events.length - 1);
+            }
+        }
+    }, [
+        events.length,
+        selectedIndex
+    ]);
+    // Keyboard handling
+    useInput(function(input, key) {
+        if (!isActive) return;
+        if (mode === 'list') {
+            if (key.upArrow || input === 'k') {
+                if (selectedIndex === null) {
+                    // First navigation: start from last event
+                    if (events.length > 0) {
+                        setSelectedIndex(events.length - 1);
+                    }
+                } else if (selectedIndex > 0) {
+                    setSelectedIndex(selectedIndex - 1);
+                }
+            } else if (key.downArrow || input === 'j') {
+                if (selectedIndex === null) {
+                    if (events.length > 0) {
+                        setSelectedIndex(events.length - 1);
+                    }
+                } else if (selectedIndex < events.length - 1) {
+                    setSelectedIndex(selectedIndex + 1);
+                }
+            } else if (key.return && selectedIndex !== null && events.length > 0) {
+                setMode('detail');
+                setScrollOffset(0);
+            } else if (input === 's' && selectedIndex !== null && onViewState) {
+                // View state at selected event
+                onViewState(selectedIndex);
+            } else if (key.escape && selectedIndex !== null) {
+                // Return to auto-scroll mode
+                setSelectedIndex(null);
+            }
+        } else if (mode === 'detail') {
+            // Escape or 'b' to go back to list
+            if (key.escape || input === 'b') {
+                setMode('list');
+            }
+        }
+    }, {
+        isActive: isActive
+    });
+    // Detail view
+    if (mode === 'detail' && selectedIndex !== null && events[selectedIndex]) {
+        return /*#__PURE__*/ React.createElement(EventDetail, {
+            stored: events[selectedIndex],
+            scrollOffset: scrollOffset,
+            onScrollChange: setScrollOffset,
+            isActive: isActive
+        });
+    }
+    // List view
+    var _calculateVisibleWindow = calculateVisibleWindow(events.length, selectedIndex, maxVisible), start = _calculateVisibleWindow.start, end = _calculateVisibleWindow.end;
+    var visibleEvents = events.slice(start, end);
     return /*#__PURE__*/ React.createElement(Box, {
         flexDirection: "column"
     }, /*#__PURE__*/ React.createElement(Box, {
         marginBottom: 1
     }, /*#__PURE__*/ React.createElement(Text, {
         bold: true
-    }, "Events (", events.length, " total)")), visibleEvents.length === 0 ? /*#__PURE__*/ React.createElement(Text, {
+    }, "Events (", events.length, " total)"), selectedIndex !== null && /*#__PURE__*/ React.createElement(Text, {
+        dimColor: true
+    }, " • Selected: ", selectedIndex + 1)), visibleEvents.length === 0 ? /*#__PURE__*/ React.createElement(Text, {
         dimColor: true
     }, "Waiting for events...") : visibleEvents.map(function(stored, index) {
         return /*#__PURE__*/ React.createElement(EventLine, {
-            key: index,
-            stored: stored
+            key: start + index,
+            stored: stored,
+            isSelected: selectedIndex === start + index
         });
-    }));
+    }), totalTokens > 0 && /*#__PURE__*/ React.createElement(Box, {
+        marginTop: 1
+    }, /*#__PURE__*/ React.createElement(Text, {
+        dimColor: true
+    }, "Total tokens: "), /*#__PURE__*/ React.createElement(Text, {
+        bold: true
+    }, totalTokens.toLocaleString())));
 };