dexto 1.3.0 → 1.5.0

package/dist/cli/ink-cli/contexts/ScrollProvider.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { getBoundingBox } from 'ink';
+import { useMouse } from './MouseContext.js';
+const ScrollContext = createContext(null);
+/**
+ * Find scrollable components under the mouse cursor
+ */
+const findScrollableCandidates = (mouseEvent, scrollables) => {
+    const candidates = [];
+    for (const entry of scrollables.values()) {
+        if (!entry.ref.current || !entry.hasFocus()) {
+            continue;
+        }
+        const boundingBox = getBoundingBox(entry.ref.current);
+        if (!boundingBox)
+            continue;
+        const { x, y, width, height } = boundingBox;
+        // Check if mouse is inside this component
+        // Add 1 to width to include scrollbar column
+        const isInside = mouseEvent.col >= x &&
+            mouseEvent.col < x + width + 1 &&
+            mouseEvent.row >= y &&
+            mouseEvent.row < y + height;
+        if (isInside) {
+            candidates.push({ ...entry, area: width * height });
+        }
+    }
+    // Sort by smallest area first (innermost component)
+    candidates.sort((a, b) => a.area - b.area);
+    return candidates;
+};
+/**
+ * Hook to detect text selection attempts (click + drag)
+ * Returns a handler to process mouse events for drag detection
+ */
+function useDragDetection(onSelectionAttempt) {
+    const isLeftButtonDownRef = useRef(false);
+    const selectionHintShownRef = useRef(false);
+    const handleDragDetection = useCallback((event) => {
+        if (event.name === 'left-press') {
+            isLeftButtonDownRef.current = true;
+            selectionHintShownRef.current = false;
+        }
+        else if (event.name === 'left-release') {
+            isLeftButtonDownRef.current = false;
+        }
+        else if (event.name === 'move' && isLeftButtonDownRef.current) {
+            // User is dragging (trying to select text)
+            // Only show hint once per drag operation
+            if (!selectionHintShownRef.current && onSelectionAttempt) {
+                selectionHintShownRef.current = true;
+                onSelectionAttempt();
+            }
+        }
+    }, [onSelectionAttempt]);
+    return handleDragDetection;
+}
+export const ScrollProvider = ({ children, onSelectionAttempt }) => {
+    const [scrollables, setScrollables] = useState(new Map());
+    // Drag detection for selection hint
+    const handleDragDetection = useDragDetection(onSelectionAttempt);
+    const register = useCallback((entry) => {
+        setScrollables((prev) => new Map(prev).set(entry.id, entry));
+    }, []);
+    const unregister = useCallback((id) => {
+        setScrollables((prev) => {
+            const next = new Map(prev);
+            next.delete(id);
+            return next;
+        });
+    }, []);
+    const scrollablesRef = useRef(scrollables);
+    useEffect(() => {
+        scrollablesRef.current = scrollables;
+    }, [scrollables]);
+    // Batch scroll events to prevent jitter
+    const pendingScrollsRef = useRef(new Map());
+    const flushScheduledRef = useRef(false);
+    const scheduleFlush = useCallback(() => {
+        if (!flushScheduledRef.current) {
+            flushScheduledRef.current = true;
+            setTimeout(() => {
+                flushScheduledRef.current = false;
+                for (const [id, delta] of pendingScrollsRef.current.entries()) {
+                    const entry = scrollablesRef.current.get(id);
+                    if (entry) {
+                        entry.scrollBy(delta);
+                    }
+                }
+                pendingScrollsRef.current.clear();
+            }, 0);
+        }
+    }, []);
+    const handleScroll = useCallback((direction, mouseEvent) => {
+        const delta = direction === 'up' ? -1 : 1;
+        const candidates = findScrollableCandidates(mouseEvent, scrollablesRef.current);
+        for (const candidate of candidates) {
+            const { scrollTop, scrollHeight, innerHeight } = candidate.getScrollState();
+            const pendingDelta = pendingScrollsRef.current.get(candidate.id) || 0;
+            const effectiveScrollTop = scrollTop + pendingDelta;
+            // Epsilon for floating point comparison
+            const canScrollUp = effectiveScrollTop > 0.001;
+            const canScrollDown = effectiveScrollTop < scrollHeight - innerHeight - 0.001;
+            if (direction === 'up' && canScrollUp) {
+                pendingScrollsRef.current.set(candidate.id, pendingDelta + delta);
+                scheduleFlush();
+                return true;
+            }
+            if (direction === 'down' && canScrollDown) {
+                pendingScrollsRef.current.set(candidate.id, pendingDelta + delta);
+                scheduleFlush();
+                return true;
+            }
+        }
+        return false;
+    }, [scheduleFlush]);
+    // Subscribe to mouse events
+    useMouse(useCallback((event) => {
+        // Handle scroll events
+        if (event.name === 'scroll-up') {
+            return handleScroll('up', event);
+        }
+        else if (event.name === 'scroll-down') {
+            return handleScroll('down', event);
+        }
+        // Detect selection attempts (click + drag)
+        handleDragDetection(event);
+        return false;
+    }, [handleScroll, handleDragDetection]), { isActive: true });
+    const contextValue = useMemo(() => ({ register, unregister }), [register, unregister]);
+    return _jsx(ScrollContext.Provider, { value: contextValue, children: children });
+};
+let nextId = 0;
+/**
+ * Hook to register a component as scrollable
+ */
+export const useScrollable = (entry, isActive) => {
+    const context = useContext(ScrollContext);
+    if (!context) {
+        throw new Error('useScrollable must be used within a ScrollProvider');
+    }
+    const [id] = useState(() => `scrollable-${nextId++}`);
+    // Store entry in ref to avoid re-registration on every render
+    // when callers don't memoize the entry object
+    const entryRef = useRef(entry);
+    entryRef.current = entry;
+    useEffect(() => {
+        if (isActive) {
+            // Build entry object, conditionally including scrollTo to satisfy exactOptionalPropertyTypes
+            const registrationEntry = {
+                id,
+                ref: entryRef.current.ref,
+                getScrollState: () => entryRef.current.getScrollState(),
+                scrollBy: (delta) => entryRef.current.scrollBy(delta),
+                hasFocus: () => entryRef.current.hasFocus(),
+            };
+            if (entryRef.current.scrollTo) {
+                registrationEntry.scrollTo = (scrollTop, duration) => {
+                    entryRef.current.scrollTo?.(scrollTop, duration);
+                };
+            }
+            context.register(registrationEntry);
+            return () => {
+                context.unregister(id);
+            };
+        }
+        return;
+    }, [context, id, isActive]);
+};

package/dist/cli/ink-cli/contexts/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Context providers for ink-cli
+ */
+export { KeypressProvider, useKeypressContext, type Key, type KeypressHandler, type KeypressProviderProps, } from './KeypressContext.js';
+export { MouseProvider, useMouseContext, useMouse, type MouseEvent, type MouseEventName, type MouseHandler, type MouseProviderProps, } from './MouseContext.js';
+export { ScrollProvider, useScrollable, type ScrollState, type ScrollableEntry, } from './ScrollProvider.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/cli/ink-cli/contexts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/contexts/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACH,gBAAgB,EAChB,kBAAkB,EAClB,KAAK,GAAG,EACR,KAAK,eAAe,EACpB,KAAK,qBAAqB,GAC7B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACH,aAAa,EACb,eAAe,EACf,QAAQ,EACR,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,kBAAkB,GAC1B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACH,cAAc,EACd,aAAa,EACb,KAAK,WAAW,EAChB,KAAK,eAAe,GACvB,MAAM,qBAAqB,CAAC"}

package/dist/cli/ink-cli/contexts/index.js

@@ -0,0 +1,6 @@
+/**
+ * Context providers for ink-cli
+ */
+export { KeypressProvider, useKeypressContext, } from './KeypressContext.js';
+export { MouseProvider, useMouseContext, useMouse, } from './MouseContext.js';
+export { ScrollProvider, useScrollable, } from './ScrollProvider.js';

package/dist/cli/ink-cli/hooks/index.d.ts

@@ -3,4 +3,9 @@
  */
 export { useAgentEvents } from './useAgentEvents.js';
 export { useKeyboardShortcuts } from './useKeyboardShortcuts.js';
+export { useInputOrchestrator, createApprovalInputHandler, createSelectorInputHandler, createAutocompleteInputHandler, createMainInputHandler, type InputHandler, type InputHandlers, type UseInputOrchestratorProps, type ApprovalHandlerProps, type SelectorHandlerProps, type AutocompleteHandlerProps, type MainInputHandlerProps, } from './useInputOrchestrator.js';
+export { useKeypress } from './useKeypress.js';
+export { useTerminalSize, type TerminalSize } from './useTerminalSize.js';
+export { useCLIState, type UseCLIStateProps, type CLIStateReturn, type UIState, type InputState, type SessionState, } from './useCLIState.js';
+export type { Key } from './useInputOrchestrator.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/cli/ink-cli/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EACH,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,EAC1B,8BAA8B,EAC9B,sBAAsB,EACtB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,yBAAyB,EAC9B,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,GAC7B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EACH,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,OAAO,EACZ,KAAK,UAAU,EACf,KAAK,YAAY,GACpB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/cli/ink-cli/hooks/index.js

@@ -3,6 +3,11 @@
  */
 export { useAgentEvents } from './useAgentEvents.js';
 export { useKeyboardShortcuts } from './useKeyboardShortcuts.js';
-// useInputHistory removed - history navigation now handled by MultiLineTextInput
+export { useInputOrchestrator, createApprovalInputHandler, createSelectorInputHandler, createAutocompleteInputHandler, createMainInputHandler, } from './useInputOrchestrator.js';
+export { useKeypress } from './useKeypress.js';
+export { useTerminalSize } from './useTerminalSize.js';
+export { useCLIState, } from './useCLIState.js';
+// useMouseScroll removed - mouse events now handled by MouseProvider/ScrollProvider
+// useInputHistory removed - history navigation now handled by TextBufferInput
 // useOverlayManager removed - overlay management now done via dispatch directly
 // useSessionSync removed - sessionId now managed in state directly

package/dist/cli/ink-cli/hooks/useAgentEvents.d.ts

@@ -1,19 +1,36 @@
 /**
- * Hook for managing agent event bus subscriptions
- * Transforms agent events into state actions
+ * Hook for managing agent event bus subscriptions for NON-STREAMING events.
+ *
+ * Streaming events (llm:thinking, llm:chunk, llm:response, llm:tool-call, llm:tool-result,
+ * llm:error, run:complete, message:dequeued) are handled via agent.stream() iterator in processStream.
+ *
+ * This hook handles:
+ * - approval:request - Tool/command confirmation requests
+ * - llm:switched - Model change notifications
+ * - session:reset - Conversation reset
+ * - session:created - New session creation (e.g., from /clear)
+ * - message:queued - New message added to queue
+ * - message:removed - Message removed from queue (e.g., up arrow edit)
+ *
+ * Uses AbortController pattern for cleanup.
  */
 import type React from 'react';
-import type { DextoAgent } from '@dexto/core';
-import type { CLIAction } from '../state/actions.js';
+import { type DextoAgent, type QueuedMessage } from '@dexto/core';
+import type { Message, UIState, SessionState } from '../state/types.js';
+import type { ApprovalRequest } from '../components/ApprovalPrompt.js';
 interface UseAgentEventsProps {
     agent: DextoAgent;
-    dispatch: React.Dispatch<CLIAction>;
-    isCancelling: boolean;
+    setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+    setUi: React.Dispatch<React.SetStateAction<UIState>>;
+    setSession: React.Dispatch<React.SetStateAction<SessionState>>;
+    setApproval: React.Dispatch<React.SetStateAction<ApprovalRequest | null>>;
+    setApprovalQueue: React.Dispatch<React.SetStateAction<ApprovalRequest[]>>;
+    setQueuedMessages: React.Dispatch<React.SetStateAction<QueuedMessage[]>>;
 }
 /**
- * Subscribes to agent event bus and dispatches state actions
- * Decouples event bus from UI components
+ * Subscribes to agent event bus for non-streaming events only.
+ * Streaming events are handled via agent.stream() iterator.
  */
-export declare function useAgentEvents({ agent, dispatch, isCancelling }: UseAgentEventsProps): void;
+export declare function useAgentEvents({ agent, setMessages, setUi, setSession, setApproval, setApprovalQueue, setQueuedMessages, }: UseAgentEventsProps): void;
 export {};
 //# sourceMappingURL=useAgentEvents.d.ts.map

package/dist/cli/ink-cli/hooks/useAgentEvents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAgentEvents.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/hooks/useAgentEvents.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAiB,MAAM,aAAa,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD,UAAU,mBAAmB;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,mBAAmB,GAAG,IAAI,CA0O3F"}
+{"version":3,"file":"useAgentEvents.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/hooks/useAgentEvents.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAuB,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AACvF,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAEvE,UAAU,mBAAmB;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IAC7D,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/D,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1E,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC;IAC1E,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;CAC5E;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,iBAAiB,GACpB,EAAE,mBAAmB,GAAG,IAAI,CAqH5B"}

package/dist/cli/ink-cli/hooks/useAgentEvents.js

@@ -1,213 +1,105 @@
 /**
- * Hook for managing agent event bus subscriptions
- * Transforms agent events into state actions
+ * Hook for managing agent event bus subscriptions for NON-STREAMING events.
+ *
+ * Streaming events (llm:thinking, llm:chunk, llm:response, llm:tool-call, llm:tool-result,
+ * llm:error, run:complete, message:dequeued) are handled via agent.stream() iterator in processStream.
+ *
+ * This hook handles:
+ * - approval:request - Tool/command confirmation requests
+ * - llm:switched - Model change notifications
+ * - session:reset - Conversation reset
+ * - session:created - New session creation (e.g., from /clear)
+ * - message:queued - New message added to queue
+ * - message:removed - Message removed from queue (e.g., up arrow edit)
+ *
+ * Uses AbortController pattern for cleanup.
  */
-import { useEffect, useRef } from 'react';
-import { ApprovalType as ApprovalTypeEnum } from '@dexto/core';
-import { generateMessageId } from '../utils/idGenerator.js';
+import { useEffect } from 'react';
+import { setMaxListeners } from 'events';
+import { getModelDisplayName } from '@dexto/core';
 /**
- * Subscribes to agent event bus and dispatches state actions
- * Decouples event bus from UI components
+ * Subscribes to agent event bus for non-streaming events only.
+ * Streaming events are handled via agent.stream() iterator.
  */
-export function useAgentEvents({ agent, dispatch, isCancelling }) {
-    // Use ref for isCancelling to avoid re-registering event handlers on every state change
-    // This prevents race conditions where events could be lost during handler re-registration
-    const isCancellingRef = useRef(isCancelling);
-    useEffect(() => {
-        isCancellingRef.current = isCancelling;
-    }, [isCancelling]);
+export function useAgentEvents({ agent, setMessages, setUi, setSession, setApproval, setApprovalQueue, setQueuedMessages, }) {
     useEffect(() => {
         const bus = agent.agentEventBus;
-        // Handle thinking event (when LLM starts processing)
-        // TODO: This event should be renamed to handle actual reasoning tokens (extended thinking)
-        // Currently it just indicates LLM request start, not reasoning token generation
-        // See: https://www.anthropic.com/news/3-5-models-and-computer-use (extended thinking)
-        const handleThinking = () => {
-            if (isCancellingRef.current)
-                return;
-            dispatch({ type: 'THINKING_START' });
-        };
-        // Handle streaming chunks
-        const handleChunk = (payload) => {
-            if (isCancellingRef.current)
-                return; // Ignore events during cancellation
-            // End thinking state when first chunk arrives
-            dispatch({ type: 'THINKING_END' });
-            if (payload.chunkType === 'text') {
-                dispatch({
-                    type: 'STREAMING_CHUNK',
-                    content: payload.content,
-                });
-            }
-        };
-        // Handle response completion
-        const handleResponse = (payload) => {
-            if (isCancellingRef.current)
-                return; // Ignore events during cancellation
-            dispatch({
-                type: 'STREAMING_END',
-                content: payload.content,
-            });
-            dispatch({
-                type: 'PROCESSING_END',
-            });
-        };
-        // Handle errors
-        const handleError = (payload) => {
-            dispatch({
-                type: 'STREAMING_CANCEL',
-            });
-            dispatch({
-                type: 'SUBMIT_ERROR',
-                errorMessage: payload.error.message,
-            });
-        };
-        // Handle tool calls
-        const handleToolCall = (payload) => {
-            if (isCancellingRef.current)
-                return; // Ignore events during cancellation
-            // Format args for display (compact, one-line)
-            let argsPreview = '';
-            try {
-                const argsStr = JSON.stringify(payload.args);
-                // Remove outer braces and limit length
-                const cleanArgs = argsStr.replace(/^\{|\}$/g, '').trim();
-                if (cleanArgs.length > 80) {
-                    argsPreview = ` • ${cleanArgs.slice(0, 80)}...`;
-                }
-                else if (cleanArgs.length > 0) {
-                    argsPreview = ` • ${cleanArgs}`;
-                }
-            }
-            catch {
-                argsPreview = '';
-            }
-            // Insert before streaming message so tools appear in correct order
-            // Use callId if available for matching with result later
-            const toolMessageId = payload.callId
-                ? `tool-${payload.callId}`
-                : generateMessageId('tool');
-            dispatch({
-                type: 'MESSAGE_INSERT_BEFORE_STREAMING',
-                message: {
-                    id: toolMessageId,
-                    role: 'tool',
-                    content: `${payload.toolName}${argsPreview}`,
-                    timestamp: new Date(),
-                    toolStatus: 'running',
-                },
-            });
-        };
-        // Handle tool results
-        const handleToolResult = (payload) => {
-            if (isCancellingRef.current)
-                return; // Ignore events during cancellation
-            // Format result preview (4-5 CLI lines, ~400 chars accounting for wrapping)
-            let resultPreview = '';
-            try {
-                const result = payload.sanitized || payload.rawResult;
-                if (result) {
-                    const resultStr = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
-                    // Limit to ~400 chars (roughly 4-5 terminal lines at 80-100 chars width)
-                    const maxChars = 400;
-                    if (resultStr.length > maxChars) {
-                        resultPreview = resultStr.slice(0, maxChars) + '\n...';
-                    }
-                    else {
-                        resultPreview = resultStr;
-                    }
-                }
-            }
-            catch {
-                resultPreview = '';
-            }
-            // Update the tool message with result preview and mark as finished
-            if (payload.callId) {
-                const toolMessageId = `tool-${payload.callId}`;
-                dispatch({
-                    type: 'MESSAGE_UPDATE',
-                    id: toolMessageId,
-                    update: {
-                        toolResult: resultPreview,
-                        toolStatus: 'finished',
-                    },
-                });
-            }
-        };
-        // Handle approval requests
-        const handleApprovalRequest = (event) => {
-            // Handle both tool confirmation and command confirmation approvals in ink-cli
-            if (event.type === ApprovalTypeEnum.TOOL_CONFIRMATION ||
-                event.type === ApprovalTypeEnum.COMMAND_CONFIRMATION) {
-                const approval = {
-                    approvalId: event.approvalId,
-                    type: event.type,
-                    timestamp: event.timestamp,
-                    metadata: event.metadata,
-                };
-                // Only include optional properties if they're defined
-                if (event.sessionId !== undefined) {
-                    approval.sessionId = event.sessionId;
-                }
-                if (event.timeout !== undefined) {
-                    approval.timeout = event.timeout;
-                }
-                dispatch({
-                    type: 'APPROVAL_REQUEST',
-                    approval,
-                });
-            }
-        };
-        // Subscribe to events
-        bus.on('llm:thinking', handleThinking);
-        bus.on('llm:chunk', handleChunk);
-        bus.on('llm:response', handleResponse);
-        bus.on('llm:error', handleError);
-        bus.on('llm:tool-call', handleToolCall);
-        bus.on('llm:tool-result', handleToolResult);
-        bus.on('approval:request', handleApprovalRequest);
+        const controller = new AbortController();
+        const { signal } = controller;
+        // Increase listener limit for safety
+        setMaxListeners(15, signal);
+        // NOTE: approval:request is now handled in processStream (via iterator) for proper
+        // event ordering. Direct bus subscription here caused a race condition where
+        // approval UI showed before text messages were added.
         // Handle model switch
-        const handleModelSwitch = (payload) => {
+        bus.on('llm:switched', (payload) => {
             if (payload.newConfig?.model) {
-                dispatch({
-                    type: 'MODEL_UPDATE',
-                    modelName: payload.newConfig.model,
-                });
+                setSession((prev) => ({
+                    ...prev,
+                    modelName: getModelDisplayName(payload.newConfig.model, payload.newConfig.provider),
+                }));
             }
-        };
+        }, { signal });
         // Handle conversation reset
-        const handleConversationReset = () => {
-            dispatch({ type: 'CONVERSATION_RESET' });
-        };
-        // Handle session creation (e.g., from /clear command)
-        // This maintains separation of concerns: commands emit events, UI handles state
-        const handleSessionCreated = (payload) => {
+        bus.on('session:reset', () => {
+            setMessages([]);
+            setApproval(null);
+            setApprovalQueue([]);
+            setQueuedMessages([]);
+            setUi((prev) => ({ ...prev, activeOverlay: 'none' }));
+        }, { signal });
+        // Handle session creation (e.g., from /new command if we add one)
+        bus.on('session:created', (payload) => {
             if (payload.switchTo) {
-                // Clear current messages and switch to new session
-                dispatch({ type: 'SESSION_CLEAR' });
-                dispatch({
-                    type: 'SESSION_SET',
-                    sessionId: payload.sessionId,
-                    hasActiveSession: true,
-                });
+                setMessages([]);
+                setApproval(null);
+                setApprovalQueue([]);
+                setQueuedMessages([]);
+                if (payload.sessionId === null) {
+                    setSession((prev) => ({ ...prev, id: null, hasActiveSession: false }));
+                }
+                else {
+                    setSession((prev) => ({
+                        ...prev,
+                        id: payload.sessionId,
+                        hasActiveSession: true,
+                    }));
+                }
+                setUi((prev) => ({ ...prev, activeOverlay: 'none' }));
             }
-        };
-        // Subscribe to events
-        bus.on('llm:switched', handleModelSwitch);
-        bus.on('session:reset', handleConversationReset);
-        bus.on('session:created', handleSessionCreated);
-        // Cleanup on unmount
+        }, { signal });
+        // Handle context cleared (from /clear command)
+        // Keep messages visible for user reference - only context sent to LLM is cleared
+        // Just clean up any pending approvals/overlays/queued messages
+        bus.on('context:cleared', () => {
+            setApproval(null);
+            setApprovalQueue([]);
+            setQueuedMessages([]);
+            setUi((prev) => ({ ...prev, activeOverlay: 'none' }));
+        }, { signal });
+        // Handle message queued - fetch full queue state from agent
+        bus.on('message:queued', (payload) => {
+            if (!payload.sessionId)
+                return;
+            // Fetch fresh queue state from agent to ensure consistency
+            agent
+                .getQueuedMessages(payload.sessionId)
+                .then((messages) => {
+                setQueuedMessages(messages);
+            })
+                .catch(() => {
+                // Silently ignore - queue state will sync on next event
+            });
+        }, { signal });
+        // Handle message removed from queue
+        bus.on('message:removed', (payload) => {
+            setQueuedMessages((prev) => prev.filter((m) => m.id !== payload.id));
+        }, { signal });
+        // Note: message:dequeued is handled in processStream (via iterator) for proper synchronization
+        // with streaming events. Don't handle it here via event bus.
+        // Cleanup: abort controller removes all listeners at once
         return () => {
-            bus.off('llm:thinking', handleThinking);
-            bus.off('llm:chunk', handleChunk);
-            bus.off('llm:response', handleResponse);
-            bus.off('llm:error', handleError);
-            bus.off('llm:tool-call', handleToolCall);
-            bus.off('llm:tool-result', handleToolResult);
-            bus.off('approval:request', handleApprovalRequest);
-            bus.off('llm:switched', handleModelSwitch);
-            bus.off('session:reset', handleConversationReset);
-            bus.off('session:created', handleSessionCreated);
+            controller.abort();
         };
-    }, [agent, dispatch]); // Note: isCancelling is accessed via ref to avoid re-registering handlers
+    }, [agent, setMessages, setUi, setSession, setApproval, setApprovalQueue, setQueuedMessages]);
 }

package/dist/cli/ink-cli/hooks/useBatchedScroll.d.ts

@@ -0,0 +1,14 @@
+/**
+ * useBatchedScroll Hook
+ * Prevents scroll jitter by batching multiple scroll updates in the same frame.
+ */
+/**
+ * A hook to manage batched scroll state updates.
+ * It allows multiple scroll operations within the same tick to accumulate
+ * by keeping track of a 'pending' state that resets after render.
+ */
+export declare function useBatchedScroll(currentScrollTop: number): {
+    getScrollTop: () => number;
+    setPendingScrollTop: (newScrollTop: number) => void;
+};
+//# sourceMappingURL=useBatchedScroll.d.ts.map

package/dist/cli/ink-cli/hooks/useBatchedScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBatchedScroll.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/hooks/useBatchedScroll.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,gBAAgB,EAAE,MAAM;;wCAgBE,MAAM;EAKhE"}

package/dist/cli/ink-cli/hooks/useBatchedScroll.js

@@ -0,0 +1,25 @@
+/**
+ * useBatchedScroll Hook
+ * Prevents scroll jitter by batching multiple scroll updates in the same frame.
+ */
+import { useRef, useEffect, useCallback } from 'react';
+/**
+ * A hook to manage batched scroll state updates.
+ * It allows multiple scroll operations within the same tick to accumulate
+ * by keeping track of a 'pending' state that resets after render.
+ */
+export function useBatchedScroll(currentScrollTop) {
+    const pendingScrollTopRef = useRef(null);
+    // We use a ref for currentScrollTop to allow getScrollTop to be stable
+    // and not depend on the currentScrollTop value directly in its dependency array.
+    const currentScrollTopRef = useRef(currentScrollTop);
+    useEffect(() => {
+        currentScrollTopRef.current = currentScrollTop;
+        pendingScrollTopRef.current = null;
+    });
+    const getScrollTop = useCallback(() => pendingScrollTopRef.current ?? currentScrollTopRef.current, []);
+    const setPendingScrollTop = useCallback((newScrollTop) => {
+        pendingScrollTopRef.current = newScrollTop;
+    }, []);
+    return { getScrollTop, setPendingScrollTop };
+}