@pokit/tabs-opentui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Daniel Grant
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/adapter.d.ts

@@ -0,0 +1,26 @@
+/**
+ * OpenTUI-based Tabs Adapter
+ *
+ * Implements the TabsAdapter interface using OpenTUI (React for CLI).
+ * Also provides an event-driven adapter that renders based on EventBus events.
+ */
+import type { TabsAdapter, EventBus } from '@pokit/core';
+/**
+ * Create a tabs adapter using OpenTUI
+ */
+export declare function createTabsAdapter(): TabsAdapter;
+export type EventAdapterOptions = {
+    onExit?: (code: number) => void;
+};
+/**
+ * Create an event-driven adapter that renders based on EventBus events.
+ * This adapter builds a state tree from events and renders it using OpenTUI.
+ *
+ * @param bus - The EventBus to listen to
+ * @param options - Options for the adapter
+ * @returns Object with unmount function to stop the adapter
+ */
+export declare function createEventAdapter(bus: EventBus, options?: EventAdapterOptions): {
+    unmount: () => void;
+};
+//# sourceMappingURL=adapter.d.ts.map

package/dist/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,WAAW,EAAwB,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK/E;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,WAAW,CAyG/C;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,QAAQ,EACb,OAAO,GAAE,mBAAwB,GAChC;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAuGzB"}

package/dist/adapter.js

@@ -0,0 +1,188 @@
+/**
+ * OpenTUI-based Tabs Adapter
+ *
+ * Implements the TabsAdapter interface using OpenTUI (React for CLI).
+ * Also provides an event-driven adapter that renders based on EventBus events.
+ */
+import * as React from 'react';
+import { createCliRenderer } from '@opentui/core';
+import { createRoot } from '@opentui/react';
+import { TabsApp } from './tabs-app.js';
+import { EventDrivenApp } from './event-driven-app.js';
+import { TabsErrorBoundary, restoreTerminal } from './error-boundary.js';
+/**
+ * Create a tabs adapter using OpenTUI
+ */
+export function createTabsAdapter() {
+    return {
+        async run(items, options) {
+            if (!process.stdout.isTTY) {
+                throw new Error('Tabbed view requires stdout to be a TTY');
+            }
+            if (!process.stdin.isTTY) {
+                throw new Error('Tabbed view requires stdin to be a TTY for keyboard input');
+            }
+            if (items.length === 0) {
+                return;
+            }
+            // Ensure stdin is not paused - previous CLI operations (prompts, spinners)
+            // may have left it in a paused state
+            if (process.stdin.isPaused()) {
+                process.stdin.resume();
+            }
+            // Enable raw mode before OpenTUI starts - this ensures stdin is ready
+            // to receive escape sequence responses for capability detection
+            process.stdin.setRawMode(true);
+            // Let OpenTUI handle alternate screen via its config
+            const renderer = await createCliRenderer({
+                exitOnCtrlC: false,
+                useAlternateScreen: true,
+                useMouse: true, // Enable mouse for scroll wheel support
+                useKittyKeyboard: {}, // Enable Kitty keyboard protocol for better key handling
+            });
+            // Disable stdout interception to prevent output mangling with scrolling
+            renderer.disableStdoutInterception();
+            const root = createRoot(renderer);
+            // Start the render loop explicitly
+            renderer.start();
+            return new Promise((resolve) => {
+                let resolved = false;
+                // Cleanup function to restore terminal and resolve
+                const cleanup = () => {
+                    if (resolved)
+                        return;
+                    resolved = true;
+                    // Remove signal handlers
+                    process.removeListener('SIGTERM', handleSignal);
+                    process.removeListener('SIGQUIT', handleSignal);
+                    process.removeListener('uncaughtException', handleUncaughtException);
+                    try {
+                        root.unmount();
+                        renderer.destroy();
+                    }
+                    catch {
+                        // Ignore errors during cleanup
+                    }
+                    restoreTerminal();
+                    resolve();
+                };
+                // Signal handler for graceful shutdown
+                const handleSignal = () => {
+                    cleanup();
+                    process.exit(0);
+                };
+                // Handle uncaught exceptions
+                const handleUncaughtException = (error) => {
+                    restoreTerminal();
+                    console.error('\n[TabsUI] Uncaught exception:', error);
+                    cleanup();
+                    process.exit(1);
+                };
+                // Register signal handlers
+                process.on('SIGTERM', handleSignal);
+                process.on('SIGQUIT', handleSignal);
+                process.on('uncaughtException', handleUncaughtException);
+                // Handle fatal errors from error boundary
+                const handleFatalError = () => {
+                    cleanup();
+                };
+                const handleExit = () => {
+                    cleanup();
+                };
+                // Use React.createElement to bypass OpenTUI's JSX type constraints for class components
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                root.render(React.createElement(TabsErrorBoundary, { onFatalError: handleFatalError }, React.createElement(TabsApp, { items, options, onExit: handleExit })));
+            });
+        },
+    };
+}
+/**
+ * Create an event-driven adapter that renders based on EventBus events.
+ * This adapter builds a state tree from events and renders it using OpenTUI.
+ *
+ * @param bus - The EventBus to listen to
+ * @param options - Options for the adapter
+ * @returns Object with unmount function to stop the adapter
+ */
+export function createEventAdapter(bus, options = {}) {
+    if (!process.stdout.isTTY) {
+        throw new Error('Event-driven tabs view requires stdout to be a TTY');
+    }
+    if (!process.stdin.isTTY) {
+        throw new Error('Event-driven tabs view requires stdin to be a TTY for keyboard input');
+    }
+    let root = null;
+    let renderer = null;
+    let isCleanedUp = false;
+    // Cleanup function to restore terminal
+    const cleanup = () => {
+        if (isCleanedUp)
+            return;
+        isCleanedUp = true;
+        // Remove signal handlers
+        process.removeListener('SIGTERM', handleSignal);
+        process.removeListener('SIGQUIT', handleSignal);
+        process.removeListener('uncaughtException', handleUncaughtException);
+        try {
+            root?.unmount();
+            renderer?.destroy();
+        }
+        catch {
+            // Ignore errors during cleanup
+        }
+        restoreTerminal();
+    };
+    // Signal handler for graceful shutdown
+    const handleSignal = () => {
+        cleanup();
+        process.exit(0);
+    };
+    // Handle uncaught exceptions
+    const handleUncaughtException = (error) => {
+        restoreTerminal();
+        console.error('\n[TabsUI] Uncaught exception:', error);
+        cleanup();
+        process.exit(1);
+    };
+    // Register signal handlers
+    process.on('SIGTERM', handleSignal);
+    process.on('SIGQUIT', handleSignal);
+    process.on('uncaughtException', handleUncaughtException);
+    const init = async () => {
+        // Let OpenTUI handle alternate screen and raw mode via its config
+        renderer = await createCliRenderer({
+            exitOnCtrlC: false,
+            useAlternateScreen: true,
+            useMouse: false,
+            useKittyKeyboard: {}, // Enable Kitty keyboard protocol for better key handling
+        });
+        // Check if cleanup was requested during async init
+        if (isCleanedUp) {
+            renderer.destroy();
+            return;
+        }
+        // Disable stdout interception to prevent output mangling with scrolling
+        renderer.disableStdoutInterception();
+        root = createRoot(renderer);
+        // Start the render loop explicitly
+        renderer.start();
+        const handleExit = (code) => {
+            cleanup();
+            options.onExit?.(code);
+        };
+        // Handle fatal errors from error boundary
+        const handleFatalError = () => {
+            cleanup();
+        };
+        // Use React.createElement to bypass OpenTUI's JSX type constraints for class components
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        root.render(React.createElement(TabsErrorBoundary, { onFatalError: handleFatalError }, React.createElement(EventDrivenApp, { bus, onExit: handleExit })));
+    };
+    init().catch((error) => {
+        console.error('Failed to initialize event adapter:', error);
+        restoreTerminal();
+    });
+    return {
+        unmount: cleanup,
+    };
+}

package/dist/error-boundary.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Error Boundary for Tabs UI (OpenTUI)
+ *
+ * Catches React errors and ensures terminal state is restored before displaying error.
+ * This prevents the terminal from being left in a corrupted state (alternate screen,
+ * hidden cursor, raw mode) when React rendering crashes.
+ */
+import * as React from 'react';
+export type ErrorBoundaryProps = {
+    children?: React.ReactNode;
+    onFatalError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+};
+type ErrorBoundaryState = {
+    hasError: boolean;
+    error: Error | null;
+};
+/**
+ * Restore terminal to a clean state.
+ * Called on errors and signal handlers to ensure terminal isn't left corrupted.
+ */
+export declare function restoreTerminal(): void;
+/**
+ * Internal React Error Boundary class that ensures terminal cleanup on crashes.
+ * For OpenTUI, we use a simple fallback since OpenTUI components may not
+ * render correctly after an error.
+ */
+declare class ErrorBoundaryClass extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+/**
+ * Export the error boundary class.
+ * Note: When using in JSX with OpenTUI, you may need to use React.createElement directly
+ * due to OpenTUI's JSX type constraints.
+ */
+export declare const TabsErrorBoundary: typeof ErrorBoundaryClass;
+export {};
+//# sourceMappingURL=error-boundary.d.ts.map

package/dist/error-boundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../src/error-boundary.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;CACnE,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAgBtC;AAED;;;;GAIG;AACH,cAAM,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBAC1E,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAejE,MAAM,IAAI,KAAK,CAAC,SAAS;CAe1B;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,2BAAqB,CAAC"}

package/dist/error-boundary.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/**
+ * Error Boundary for Tabs UI (OpenTUI)
+ *
+ * Catches React errors and ensures terminal state is restored before displaying error.
+ * This prevents the terminal from being left in a corrupted state (alternate screen,
+ * hidden cursor, raw mode) when React rendering crashes.
+ */
+import * as React from 'react';
+/**
+ * Restore terminal to a clean state.
+ * Called on errors and signal handlers to ensure terminal isn't left corrupted.
+ */
+export function restoreTerminal() {
+    // Exit alternate screen buffer
+    process.stdout.write('\x1b[?1049l');
+    // Show cursor (in case it was hidden)
+    process.stdout.write('\x1b[?25h');
+    // Reset all attributes (colors, styles)
+    process.stdout.write('\x1b[0m');
+    // Try to restore raw mode if stdin is a TTY
+    if (process.stdin.isTTY && process.stdin.isRaw) {
+        try {
+            process.stdin.setRawMode(false);
+        }
+        catch {
+            // Ignore errors - stdin may already be closed
+        }
+    }
+}
+/**
+ * Internal React Error Boundary class that ensures terminal cleanup on crashes.
+ * For OpenTUI, we use a simple fallback since OpenTUI components may not
+ * render correctly after an error.
+ */
+class ErrorBoundaryClass extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        // Restore terminal state immediately
+        restoreTerminal();
+        // Log error details for debugging
+        console.error('\n[TabsUI] Fatal error caught by error boundary:');
+        console.error(error);
+        if (errorInfo.componentStack) {
+            console.error('\nComponent stack:', errorInfo.componentStack);
+        }
+        // Notify parent if callback provided
+        this.props.onFatalError?.(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            // For OpenTUI, render a simple box with the error message
+            // The terminal should already be restored at this point
+            return (_jsxs("box", { flexDirection: "column", padding: 1, children: [_jsx("text", { fg: "#FF0000", children: "TabsUI encountered a fatal error" }), _jsx("text", { fg: "#888888", children: this.state.error?.message ?? 'Unknown error' }), _jsx("text", { fg: "#666666", children: "Press Ctrl+C to exit" })] }));
+        }
+        return this.props.children;
+    }
+}
+/**
+ * Export the error boundary class.
+ * Note: When using in JSX with OpenTUI, you may need to use React.createElement directly
+ * due to OpenTUI's JSX type constraints.
+ */
+export const TabsErrorBoundary = ErrorBoundaryClass;

package/dist/event-driven-app.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Event-Driven CLI App for OpenTUI
+ *
+ * A React component that renders CLI state based on EventBus events.
+ * Supports different layouts (tabs, parallel, sequence) based on group layout hints.
+ */
+import type { EventBus } from '@pokit/core';
+type EventDrivenAppProps = {
+    bus: EventBus;
+    onExit: (code: number) => void;
+};
+export declare function EventDrivenApp({ bus, onExit }: EventDrivenAppProps): React.ReactNode;
+export {};
+//# sourceMappingURL=event-driven-app.d.ts.map

package/dist/event-driven-app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-driven-app.d.ts","sourceRoot":"","sources":["../src/event-driven-app.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK5C,KAAK,mBAAmB,GAAG;IACzB,GAAG,EAAE,QAAQ,CAAC;IACd,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAwHF,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,SAAS,CAkGpF"}

package/dist/event-driven-app.js

@@ -0,0 +1,129 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+/**
+ * Event-Driven CLI App for OpenTUI
+ *
+ * A React component that renders CLI state based on EventBus events.
+ * Supports different layouts (tabs, parallel, sequence) based on group layout hints.
+ */
+import { useState, useCallback } from 'react';
+import { useKeyboard, useTerminalDimensions } from '@opentui/react';
+import { findTabsGroup, getTabsGroupActivities } from '@pokit/tabs-core';
+import { useEventBus } from './use-event-bus.js';
+function getStatusIndicator({ status, isActive, }) {
+    switch (status) {
+        case 'running':
+            return { color: isActive ? '#00FFFF' : '#008B8B', icon: '\u25CF' };
+        case 'success':
+            return { color: isActive ? '#00FF00' : '#008000', icon: '\u2713' };
+        case 'failure':
+            return { color: isActive ? '#FF0000' : '#8B0000', icon: '\u2717' };
+    }
+}
+function ActivityTabBar({ activities, activeIndex, }) {
+    return (_jsx("box", { flexDirection: "row", gap: 1, flexWrap: "wrap", children: activities.map((activity, i) => {
+            const isActive = i === activeIndex;
+            const { color, icon } = getStatusIndicator({
+                status: activity.status,
+                isActive,
+            });
+            return (_jsxs("box", { flexDirection: "row", children: [_jsxs("text", { fg: color, children: [" ", icon, " "] }), _jsx("box", { style: isActive ? { backgroundColor: '#444' } : {}, children: _jsxs("text", { fg: isActive ? '#FFF' : '#888', children: [' ', activity.label, " (", i + 1, ")", ' '] }) })] }, activity.id));
+        }) }));
+}
+function ActivityView({ activity, viewHeight }) {
+    const logs = activity.logs.slice(-viewHeight);
+    return (_jsxs("box", { flexDirection: "column", height: viewHeight, overflow: "hidden", children: [activity.message && _jsx("text", { fg: "#00FFFF", children: activity.message }), activity.progress !== undefined && _jsxs("text", { fg: "#FFFF00", children: ["Progress: ", activity.progress, "%"] }), logs.map((log, i) => {
+                let color;
+                switch (log.level) {
+                    case 'error':
+                        color = '#FF0000';
+                        break;
+                    case 'warn':
+                        color = '#FFFF00';
+                        break;
+                    case 'success':
+                        color = '#00FF00';
+                        break;
+                    case 'info':
+                        color = '#0000FF';
+                        break;
+                    default:
+                        color = undefined;
+                }
+                return (_jsx("text", { fg: color, children: log.message }, i));
+            }), Array.from({
+                length: Math.max(0, viewHeight -
+                    logs.length -
+                    (activity.message ? 1 : 0) -
+                    (activity.progress !== undefined ? 1 : 0)),
+            }).map((_, i) => (_jsx("text", { children: " " }, `empty-${i}`)))] }));
+}
+function StatusBar({ activityCount, quitConfirmPending, }) {
+    if (quitConfirmPending) {
+        return (_jsx("box", { children: _jsx("box", { style: { backgroundColor: '#FFFF00' }, children: _jsx("text", { fg: "#000000", children: " Press q again to quit, any other key to cancel " }) }) }));
+    }
+    return (_jsx("box", { children: _jsxs("text", { fg: "#666666", children: ["[Tab/1-", activityCount, "] switch | [q]uit"] }) }));
+}
+export function EventDrivenApp({ bus, onExit }) {
+    const state = useEventBus(bus);
+    const { height: rows } = useTerminalDimensions();
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [quitConfirmPending, setQuitConfirmPending] = useState(false);
+    const terminalHeight = rows ?? 24;
+    const viewHeight = Math.max(5, terminalHeight - 6);
+    const tabsGroup = findTabsGroup(state);
+    const activities = tabsGroup
+        ? getTabsGroupActivities(state, tabsGroup.id)
+        : Array.from(state.activities.values());
+    const activeActivity = activities[activeIndex];
+    const switchTab = useCallback((newIndex) => {
+        if (newIndex >= 0 && newIndex < activities.length) {
+            setActiveIndex(newIndex);
+        }
+    }, [activities.length]);
+    const handleQuitRequest = useCallback(() => {
+        setQuitConfirmPending((prev) => !prev);
+    }, []);
+    const handleQuit = useCallback(() => {
+        onExit(state.exitCode ?? 0);
+    }, [onExit, state.exitCode]);
+    useKeyboard((event) => {
+        const { name, ctrl, shift } = event;
+        if (quitConfirmPending) {
+            if (name === 'q') {
+                handleQuit();
+            }
+            else {
+                handleQuitRequest();
+            }
+            return;
+        }
+        if (name === 'q') {
+            handleQuitRequest();
+            return;
+        }
+        if (name === 'c' && ctrl) {
+            handleQuit();
+            return;
+        }
+        const num = parseInt(name, 10);
+        if (num >= 1 && num <= activities.length) {
+            switchTab(num - 1);
+            return;
+        }
+        if (name === 'tab' && shift) {
+            switchTab((activeIndex - 1 + activities.length) % activities.length);
+            return;
+        }
+        if (name === 'tab') {
+            switchTab((activeIndex + 1) % activities.length);
+            return;
+        }
+    });
+    if (activities.length === 0) {
+        return (_jsxs("box", { flexDirection: "column", padding: 1, children: [_jsx("text", { children: "Waiting for activities..." }), state.appName && (_jsxs("text", { fg: "#666666", children: [state.appName, state.version ? ` v${state.version}` : ''] }))] }));
+    }
+    if (!activeActivity) {
+        return _jsx("text", { children: "No active activity" });
+    }
+    return (_jsxs("box", { flexDirection: "column", padding: 1, children: [_jsx(ActivityTabBar, { activities: activities, activeIndex: activeIndex }), _jsx("box", { border: ['top', 'bottom'], borderStyle: "single", borderColor: "#666666", children: _jsx(ActivityView, { activity: activeActivity, viewHeight: viewHeight }) }), _jsx(StatusBar, { activityCount: activities.length, quitConfirmPending: quitConfirmPending })] }));
+}

package/dist/help-overlay.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Help Overlay for OpenTUI
+ *
+ * Displays keyboard shortcuts in a modal overlay.
+ */
+export type HelpOverlayProps = {
+    onClose: () => void;
+};
+export declare function HelpOverlay(_props: HelpOverlayProps): React.ReactNode;
+//# sourceMappingURL=help-overlay.d.ts.map

package/dist/help-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"help-overlay.d.ts","sourceRoot":"","sources":["../src/help-overlay.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,WAAW,CAAC,MAAM,EAAE,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAoCrE"}

package/dist/help-overlay.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/**
+ * Help Overlay for OpenTUI
+ *
+ * Displays keyboard shortcuts in a modal overlay.
+ */
+import { HELP_CONTENT } from '@pokit/tabs-core';
+export function HelpOverlay(_props) {
+    return (_jsxs("box", { flexDirection: "column", border: ['top', 'bottom', 'left', 'right'], borderStyle: "single", borderColor: "#0000FF", padding: 1, children: [_jsx("box", { justifyContent: "center", marginBottom: 1, children: _jsx("text", { fg: "#FFFFFF", children: "Keyboard Help" }) }), HELP_CONTENT.map((group, i) => (_jsxs("box", { flexDirection: "column", marginBottom: i < HELP_CONTENT.length - 1 ? 1 : 0, children: [_jsx("text", { fg: "#00FFFF", children: group.title }), group.shortcuts.map(({ key, description }) => (_jsxs("box", { flexDirection: "row", children: [_jsx("box", { width: 16, children: _jsx("text", { fg: "#FFFF00", children: key }) }), _jsx("text", { children: description })] }, key)))] }, group.title))), _jsx("box", { marginTop: 1, justifyContent: "center", children: _jsx("text", { fg: "#666666", children: "Press ? or Escape to close" }) })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @pokit/tabs-opentui
+ *
+ * OpenTUI-based tabs adapter for CLI applications.
+ * Implements the TabsAdapter interface using OpenTUI (React for CLI).
+ */
+export { createTabsAdapter, createEventAdapter } from './adapter.js';
+export type { EventAdapterOptions } from './adapter.js';
+export type { ScrollBoxRenderable } from '@opentui/core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+/**
+ * @pokit/tabs-opentui
+ *
+ * OpenTUI-based tabs adapter for CLI applications.
+ * Implements the TabsAdapter interface using OpenTUI (React for CLI).
+ */
+export { createTabsAdapter, createEventAdapter } from './adapter.js';

package/dist/tabbed-view.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Tabbed View Components for OpenTUI
+ *
+ * UI components for the tabbed terminal interface using OpenTUI primitives.
+ */
+import type { ScrollBoxRenderable } from '@opentui/core';
+import type { TabProcess } from '@pokit/tabs-core';
+type TabbedViewProps = {
+    tabs: TabProcess[];
+    activeIndex: number;
+    onActiveIndexChange: (index: number) => void;
+    onQuit: () => void;
+    onQuitRequest: () => void;
+    onRestart: (index: number) => void;
+    onKill: (index: number) => void;
+    quitConfirmPending: boolean;
+    focusMode: boolean;
+    onEnterFocusMode: () => void;
+    onExitFocusMode: () => void;
+    onSendInput: (data: string) => void;
+    scrollRef?: (ref: ScrollBoxRenderable | null) => void;
+    helpVisible: boolean;
+    onToggleHelp: () => void;
+    onCloseHelp: () => void;
+};
+export declare function TabbedView({ tabs, activeIndex, onActiveIndexChange, onQuit, onQuitRequest, onRestart, onKill, quitConfirmPending, focusMode, onEnterFocusMode, onExitFocusMode, onSendInput, scrollRef, helpVisible, onToggleHelp, onCloseHelp, }: TabbedViewProps): React.ReactNode;
+export {};
+//# sourceMappingURL=tabbed-view.d.ts.map

package/dist/tabbed-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbed-view.d.ts","sourceRoot":"","sources":["../src/tabbed-view.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAY,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAWnD,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AA6JF,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,aAAa,EACb,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,WAAW,GACZ,EAAE,eAAe,GAAG,KAAK,CAAC,SAAS,CA+FnC"}

package/dist/tabbed-view.js

@@ -0,0 +1,129 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+/**
+ * Tabbed View Components for OpenTUI
+ *
+ * UI components for the tabbed terminal interface using OpenTUI primitives.
+ */
+import { useKeyboard, useTerminalDimensions } from '@opentui/react';
+import { useTabsState, useKeyboardCallbackRefs, processKeyEvent, executeKeyboardAction, } from '@pokit/tabs-core';
+import { HelpOverlay } from './help-overlay.js';
+function getStatusIndicator({ status, isActive, }) {
+    switch (status) {
+        case 'running':
+            return { color: isActive ? '#00FFFF' : '#008B8B', icon: '\u25CF' };
+        case 'done':
+            return { color: isActive ? '#00FF00' : '#008000', icon: '\u2713' };
+        case 'error':
+            return { color: isActive ? '#FF0000' : '#8B0000', icon: '\u2717' };
+        case 'stopped':
+            return { color: isActive ? '#FFFF00' : '#808000', icon: '\u25A0' };
+    }
+}
+function TabBar({ tabs, activeIndex, focusMode, }) {
+    return (_jsxs("box", { flexDirection: "row", gap: 1, flexWrap: "wrap", children: [tabs.map((tab, i) => {
+                const isActive = i === activeIndex;
+                const { color, icon } = getStatusIndicator({
+                    status: tab.status,
+                    isActive,
+                });
+                return (_jsxs("box", { flexDirection: "row", children: [_jsxs("text", { fg: color, children: [" ", icon, " "] }), _jsx("box", { style: isActive ? { backgroundColor: '#444' } : {}, children: _jsxs("text", { fg: isActive ? '#FFF' : '#888', children: [' ', tab.label, " (", i + 1, ")", ' '] }) })] }, tab.id));
+            }), focusMode && (_jsx("box", { style: { backgroundColor: '#FFFF00' }, children: _jsx("text", { fg: "#000000", children: " INPUT MODE " }) }))] }));
+}
+function OutputView({ lines, viewHeight, isActive, scrollRef, }) {
+    return (_jsx("scrollbox", { ref: scrollRef, height: viewHeight, scrollY: true, focused: isActive, viewportCulling: false, children: lines.map((line, i) => (_jsx("text", { children: line || ' ' }, i))) }));
+}
+function StatusBar({ tabCount, quitConfirmPending, focusMode, showHelpHint, }) {
+    if (quitConfirmPending) {
+        return (_jsx("box", { children: _jsx("box", { style: { backgroundColor: '#FFFF00' }, children: _jsx("text", { fg: "#000000", children: " Press q again to quit, any other key to cancel " }) }) }));
+    }
+    if (focusMode) {
+        return (_jsxs("box", { flexDirection: "row", children: [_jsx("box", { style: { backgroundColor: '#00FFFF' }, children: _jsx("text", { fg: "#000000", children: " INPUT MODE " }) }), _jsx("text", { fg: "#666666", children: " Press Esc to exit input mode" })] }));
+    }
+    return (_jsx("box", { children: _jsxs("text", { fg: "#666666", children: ["[", '\u2191\u2193', "] scroll | [Tab/1-", tabCount, "] switch | [i]nput | [r]estart | [k]ill | [q]uit", showHelpHint && ' | Press ? for help'] }) }));
+}
+/**
+ * Normalize OpenTUI's KeyEvent to the shared NormalizedKeyEvent format.
+ */
+function normalizeOpenTUIKeyEvent(event) {
+    const { name, ctrl, shift, meta, sequence } = event;
+    // Map OpenTUI key names to normalized names
+    let normalizedName;
+    if (name === 'escape')
+        normalizedName = 'escape';
+    else if (name === 'return')
+        normalizedName = 'return';
+    else if (name === 'tab')
+        normalizedName = 'tab';
+    else if (name === 'backspace')
+        normalizedName = 'backspace';
+    else if (name === 'delete')
+        normalizedName = 'delete';
+    else if (name === 'up')
+        normalizedName = 'up';
+    else if (name === 'down')
+        normalizedName = 'down';
+    else if (name === 'left')
+        normalizedName = 'left';
+    else if (name === 'right')
+        normalizedName = 'right';
+    else if (name === 'pageup')
+        normalizedName = 'pageup';
+    else if (name === 'pagedown')
+        normalizedName = 'pagedown';
+    else
+        normalizedName = name;
+    return {
+        char: sequence || undefined,
+        name: normalizedName,
+        ctrl,
+        shift,
+        meta,
+    };
+}
+export function TabbedView({ tabs, activeIndex, onActiveIndexChange, onQuit, onQuitRequest, onRestart, onKill, quitConfirmPending, focusMode, onEnterFocusMode, onExitFocusMode, onSendInput, scrollRef, helpVisible, onToggleHelp, onCloseHelp, }) {
+    const { height: rows } = useTerminalDimensions();
+    const terminalHeight = rows ?? 24;
+    const viewHeight = Math.max(5, terminalHeight - 6);
+    // Use shared tabs state hook
+    // Note: OpenTUI's scrollbox handles scrolling natively, so we don't use scrollBy here
+    const { showHelpHint, switchTab, nextTab, prevTab, scrollBy } = useTabsState({
+        tabs,
+        activeIndex,
+        onActiveIndexChange,
+        viewHeight,
+    });
+    // Use shared callback refs hook
+    const callbacks = {
+        onQuit,
+        onQuitRequest,
+        onRestart,
+        onKill,
+        onEnterFocusMode,
+        onExitFocusMode,
+        onSendInput,
+        onToggleHelp,
+        onCloseHelp,
+    };
+    const callbackRefs = useKeyboardCallbackRefs(callbacks);
+    useKeyboard((event) => {
+        const normalizedEvent = normalizeOpenTUIKeyEvent(event);
+        const action = processKeyEvent(normalizedEvent, {
+            helpVisible,
+            focusMode,
+            quitConfirmPending,
+            activeIndex,
+            tabCount: tabs.length,
+        }, viewHeight);
+        // For OpenTUI, we skip scroll actions since native scrollbox handles them
+        if (action.type === 'scroll') {
+            // OpenTUI's scrollbox handles up/down/pageup/pagedown natively
+            return;
+        }
+        executeKeyboardAction(action, callbackRefs, scrollBy, switchTab, nextTab, prevTab);
+    });
+    const activeTab = tabs[activeIndex];
+    if (!activeTab) {
+        return _jsx("text", { children: "No tabs available" });
+    }
+    return (_jsxs("box", { flexDirection: "column", padding: 1, children: [_jsx(TabBar, { tabs: tabs, activeIndex: activeIndex, focusMode: focusMode }), _jsx("box", { border: ['top', 'bottom'], borderStyle: "single", borderColor: "#666666", height: viewHeight + 2, children: _jsx(OutputView, { lines: activeTab.output, viewHeight: viewHeight, isActive: true, scrollRef: scrollRef }) }), _jsx(StatusBar, { tabCount: tabs.length, quitConfirmPending: quitConfirmPending, focusMode: focusMode, showHelpHint: showHelpHint }), helpVisible && (_jsx("box", { position: "absolute", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", children: _jsx(HelpOverlay, { onClose: onCloseHelp }) }))] }));
+}

package/dist/tabs-app.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Tabs App for OpenTUI
+ *
+ * Wires ProcessManager from core to React state.
+ */
+import type { TabSpec } from '@pokit/tabs-core';
+import type { TabsOptions } from '@pokit/core';
+type TabsAppProps = {
+    items: TabSpec[];
+    options: TabsOptions;
+    onExit: (code: number) => void;
+};
+export declare function TabsApp({ items, options, onExit }: TabsAppProps): React.ReactNode;
+export {};
+//# sourceMappingURL=tabs-app.d.ts.map

package/dist/tabs-app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-app.d.ts","sourceRoot":"","sources":["../src/tabs-app.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAYH,OAAO,KAAK,EAAE,OAAO,EAAc,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAS/C,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAOF,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,YAAY,GAAG,KAAK,CAAC,SAAS,CAiWjF"}

package/dist/tabs-app.js

@@ -0,0 +1,296 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+/**
+ * Tabs App for OpenTUI
+ *
+ * Wires ProcessManager from core to React state.
+ */
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { spawn } from 'node:child_process';
+import stripAnsi from 'strip-ansi';
+import { TabbedView } from './tabbed-view.js';
+import { OutputBuffer, MAX_OUTPUT_LINES, MAX_LINE_LENGTH, BUFFER_WARNING_THRESHOLD, } from '@pokit/tabs-core';
+const OUTPUT_BATCH_MS = 16;
+/** How many pixels from bottom to consider "near bottom" for auto-scroll */
+const NEAR_BOTTOM_THRESHOLD = 50;
+/** Delay before scrolling to allow React to render new content */
+const SCROLL_DELAY_MS = 50;
+export function TabsApp({ items, options, onExit }) {
+    // Ring buffers for storing all output per tab (with O(1) operations)
+    const ringBuffersRef = useRef(new Map());
+    // Initialize ring buffers for each tab
+    const getOrCreateRingBuffer = useCallback((tabId) => {
+        let buffer = ringBuffersRef.current.get(tabId);
+        if (!buffer) {
+            buffer = new OutputBuffer({
+                maxLines: MAX_OUTPUT_LINES,
+                maxLineLength: MAX_LINE_LENGTH,
+                warnAtPercentage: BUFFER_WARNING_THRESHOLD,
+                tabId,
+                // Optional: could add onPressure callback here for UI feedback
+            });
+            ringBuffersRef.current.set(tabId, buffer);
+        }
+        return buffer;
+    }, []);
+    const [tabs, setTabs] = useState(() => items.map((item, i) => ({
+        id: `tab-${i}`,
+        label: item.label,
+        exec: item.exec,
+        output: [],
+        status: 'running',
+    })));
+    const [quitConfirmPending, setQuitConfirmPending] = useState(false);
+    const [focusMode, setFocusMode] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [helpVisible, setHelpVisible] = useState(false);
+    const processesRef = useRef([]);
+    const batchBuffersRef = useRef(new Map());
+    const flushScheduledRef = useRef(false);
+    const scrollBoxRef = useRef(null);
+    /**
+     * Check if the scrollbox is near the bottom.
+     * Returns true if within NEAR_BOTTOM_THRESHOLD pixels of bottom, or if content fits in viewport.
+     */
+    const checkIfNearBottom = useCallback(() => {
+        const scroll = scrollBoxRef.current;
+        if (!scroll)
+            return true;
+        const maxScrollTop = Math.max(0, scroll.scrollHeight - scroll.viewport.height);
+        if (maxScrollTop <= 0)
+            return true; // Content fits in viewport
+        const distanceFromBottom = maxScrollTop - scroll.scrollTop;
+        return distanceFromBottom <= NEAR_BOTTOM_THRESHOLD;
+    }, []);
+    /**
+     * Scroll to bottom immediately (synchronous). Used for tab switches to avoid visible snap.
+     */
+    const scrollToBottomImmediate = useCallback(() => {
+        const scroll = scrollBoxRef.current;
+        if (scroll) {
+            scroll.scrollTo(scroll.scrollHeight);
+        }
+    }, []);
+    /**
+     * Scroll to bottom with delay. Called after content updates to let React render first.
+     */
+    const scrollToBottom = useCallback(() => {
+        setTimeout(() => {
+            scrollToBottomImmediate();
+        }, SCROLL_DELAY_MS);
+    }, [scrollToBottomImmediate]);
+    const handleScrollRef = useCallback((ref) => {
+        scrollBoxRef.current = ref;
+        // Initial scroll to bottom when ref is set - immediate to avoid snap
+        if (ref) {
+            scrollToBottomImmediate();
+        }
+    }, [scrollToBottomImmediate]);
+    const flushOutput = useCallback(() => {
+        flushScheduledRef.current = false;
+        const buffersSnapshot = batchBuffersRef.current;
+        batchBuffersRef.current = new Map();
+        if (buffersSnapshot.size === 0)
+            return;
+        const updates = [];
+        for (const [index, buffer] of buffersSnapshot.entries()) {
+            if (buffer.lines.length > 0) {
+                updates.push({ index, lines: buffer.lines });
+            }
+        }
+        if (updates.length === 0)
+            return;
+        // Check if near bottom BEFORE updating state (while old content is rendered)
+        const wasNearBottom = checkIfNearBottom();
+        setTabs((prev) => {
+            const next = [...prev];
+            for (const { index, lines } of updates) {
+                const tab = next[index];
+                if (!tab)
+                    continue;
+                // Push to ring buffer and get output with dropped indicator
+                const ringBuffer = getOrCreateRingBuffer(tab.id);
+                ringBuffer.push(...lines);
+                next[index] = { ...tab, output: ringBuffer.toArray() };
+            }
+            return next;
+        });
+        // If we were near bottom, scroll to bottom after content updates
+        if (wasNearBottom) {
+            scrollToBottom();
+        }
+    }, [checkIfNearBottom, scrollToBottom, getOrCreateRingBuffer]);
+    const scheduleFlush = useCallback(() => {
+        if (flushScheduledRef.current)
+            return;
+        flushScheduledRef.current = true;
+        setTimeout(flushOutput, OUTPUT_BATCH_MS);
+    }, [flushOutput]);
+    const appendOutput = useCallback((index, data) => {
+        const rawText = data.toString('utf-8');
+        // Strip ALL ANSI sequences to prevent rendering artifacts
+        // We lose colors but gain reliable scrolling
+        const text = stripAnsi(rawText)
+            // Also convert lone carriage returns to newlines (progress bars)
+            .replace(/\r(?!\n)/g, '\n');
+        const lines = text.split(/\r?\n/).filter((line, idx, arr) => {
+            return line || idx < arr.length - 1;
+        });
+        if (lines.length === 0)
+            return;
+        let buffer = batchBuffersRef.current.get(index);
+        if (!buffer) {
+            buffer = { lines: [] };
+            batchBuffersRef.current.set(index, buffer);
+        }
+        buffer.lines.push(...lines);
+        scheduleFlush();
+    }, [scheduleFlush]);
+    const spawnProcess = useCallback((index) => {
+        const item = items[index];
+        if (!item)
+            return null;
+        const proc = spawn('sh', ['-c', item.exec], {
+            cwd: options.cwd,
+            env: {
+                ...options.env,
+                FORCE_COLOR: '1',
+            },
+            stdio: ['pipe', 'pipe', 'pipe'],
+        });
+        const handleData = (data) => appendOutput(index, data);
+        proc.stdout?.on('data', handleData);
+        proc.stderr?.on('data', handleData);
+        proc.on('close', (code) => {
+            flushOutput();
+            setTabs((prev) => {
+                const next = [...prev];
+                const tab = next[index];
+                if (!tab)
+                    return prev;
+                next[index] = {
+                    ...tab,
+                    status: code === 0 ? 'done' : 'error',
+                    exitCode: code ?? undefined,
+                };
+                return next;
+            });
+        });
+        proc.on('error', (err) => {
+            setTabs((prev) => {
+                const next = [...prev];
+                const tab = next[index];
+                if (!tab)
+                    return prev;
+                next[index] = {
+                    ...tab,
+                    status: 'error',
+                    output: [...tab.output, `Error: ${err.message}`],
+                };
+                return next;
+            });
+        });
+        return proc;
+    }, [items, options.cwd, options.env, appendOutput, flushOutput]);
+    useEffect(() => {
+        const procs = items.map((_, i) => spawnProcess(i));
+        processesRef.current = procs;
+        return () => {
+            for (const proc of processesRef.current) {
+                if (proc && !proc.killed) {
+                    proc.kill('SIGTERM');
+                }
+            }
+        };
+    }, [items, spawnProcess]);
+    const killAll = useCallback(() => {
+        for (const proc of processesRef.current) {
+            if (proc && !proc.killed) {
+                proc.kill('SIGTERM');
+            }
+        }
+    }, []);
+    const handleRestart = useCallback((index) => {
+        const existingProc = processesRef.current[index];
+        if (existingProc && !existingProc.killed) {
+            existingProc.kill('SIGTERM');
+        }
+        // Clear both batch buffer and ring buffer
+        batchBuffersRef.current.delete(index);
+        const tabId = `tab-${index}`;
+        ringBuffersRef.current.get(tabId)?.clear();
+        setTabs((prev) => {
+            const next = [...prev];
+            const tab = next[index];
+            if (!tab)
+                return prev;
+            next[index] = {
+                ...tab,
+                output: ['Restarting...', ''],
+                status: 'running',
+                exitCode: undefined,
+            };
+            return next;
+        });
+        // Scroll to bottom after restart since output is cleared
+        scrollToBottom();
+        setTimeout(() => {
+            const newProc = spawnProcess(index);
+            processesRef.current[index] = newProc;
+        }, 100);
+    }, [spawnProcess, scrollToBottom]);
+    const handleKill = useCallback((index) => {
+        const proc = processesRef.current[index];
+        if (proc && !proc.killed) {
+            proc.kill('SIGTERM');
+        }
+        setTabs((prev) => {
+            const next = [...prev];
+            const tab = next[index];
+            if (!tab)
+                return prev;
+            if (tab.status !== 'running')
+                return prev;
+            next[index] = {
+                ...tab,
+                status: 'stopped',
+                output: [...tab.output, '', 'Stopped'],
+            };
+            return next;
+        });
+    }, []);
+    const handleQuitRequest = useCallback(() => {
+        setQuitConfirmPending((prev) => !prev);
+    }, []);
+    const handleQuit = useCallback(() => {
+        killAll();
+        onExit(0);
+    }, [killAll, onExit]);
+    const handleEnterFocusMode = useCallback(() => {
+        const proc = processesRef.current[activeIndex];
+        if (proc && !proc.killed && proc.stdin) {
+            setFocusMode(true);
+        }
+    }, [activeIndex]);
+    const handleExitFocusMode = useCallback(() => {
+        setFocusMode(false);
+    }, []);
+    const handleSendInput = useCallback((data) => {
+        const proc = processesRef.current[activeIndex];
+        if (proc && !proc.killed && proc.stdin) {
+            proc.stdin.write(data);
+        }
+    }, [activeIndex]);
+    const handleActiveIndexChange = useCallback((index) => {
+        setActiveIndex(index);
+        setFocusMode(false);
+        // Scroll to bottom when switching tabs
+        scrollToBottom();
+    }, [scrollToBottom]);
+    const handleToggleHelp = useCallback(() => {
+        setHelpVisible((prev) => !prev);
+    }, []);
+    const handleCloseHelp = useCallback(() => {
+        setHelpVisible(false);
+    }, []);
+    return (_jsx(TabbedView, { tabs: tabs, activeIndex: activeIndex, onActiveIndexChange: handleActiveIndexChange, onQuit: handleQuit, onQuitRequest: handleQuitRequest, onRestart: handleRestart, onKill: handleKill, quitConfirmPending: quitConfirmPending, focusMode: focusMode, onEnterFocusMode: handleEnterFocusMode, onExitFocusMode: handleExitFocusMode, onSendInput: handleSendInput, scrollRef: handleScrollRef, helpVisible: helpVisible, onToggleHelp: handleToggleHelp, onCloseHelp: handleCloseHelp }));
+}

package/dist/use-event-bus.d.ts

@@ -0,0 +1,12 @@
+/**
+ * React Hook for EventBus
+ *
+ * Provides a hook to subscribe to EventBus events and manage state.
+ */
+import type { EventBus } from '@pokit/core';
+import type { EventDrivenState } from '@pokit/tabs-core';
+/**
+ * Hook to subscribe to EventBus and manage state
+ */
+export declare function useEventBus(bus: EventBus): EventDrivenState;
+//# sourceMappingURL=use-event-bus.d.ts.map

package/dist/use-event-bus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-event-bus.d.ts","sourceRoot":"","sources":["../src/use-event-bus.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAY,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGzD;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,QAAQ,GAAG,gBAAgB,CAa3D"}

package/dist/use-event-bus.js

@@ -0,0 +1,21 @@
+/**
+ * React Hook for EventBus
+ *
+ * Provides a hook to subscribe to EventBus events and manage state.
+ */
+import { useState, useEffect, useCallback } from 'react';
+import { createInitialState, reducer } from '@pokit/tabs-core';
+/**
+ * Hook to subscribe to EventBus and manage state
+ */
+export function useEventBus(bus) {
+    const [state, setState] = useState(createInitialState);
+    const handleEvent = useCallback((event) => {
+        setState((prevState) => reducer(prevState, event));
+    }, []);
+    useEffect(() => {
+        const unsubscribe = bus.on(handleEvent);
+        return unsubscribe;
+    }, [bus, handleEvent]);
+    return state;
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@pokit/tabs-opentui",
+  "version": "0.0.1",
+  "description": "OpenTUI-based tab renderer for pok CLI applications",
+  "keywords": [
+    "cli",
+    "command-line",
+    "typescript",
+    "bun",
+    "terminal",
+    "pok",
+    "pokjs",
+    "tabs",
+    "opentui",
+    "react",
+    "tui"
+  ],
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/notation-dev/openpok.git",
+    "directory": "packages/tabs-opentui"
+  },
+  "homepage": "https://github.com/notation-dev/openpok#readme",
+  "bugs": {
+    "url": "https://github.com/notation-dev/openpok/issues"
+  },
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@opentui/core": "^0.1.63",
+    "@opentui/react": "^0.1.63",
+    "react": "^19.2.0",
+    "strip-ansi": "^7.1.2"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": "^19.2.0",
+    "@pokit/core": "0.0.1",
+    "@pokit/tabs-core": "0.0.1"
+  },
+  "peerDependencies": {
+    "@pokit/core": "0.0.1",
+    "@pokit/tabs-core": "0.0.1"
+  },
+  "engines": {
+    "bun": ">=1.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @pokit/tabs-opentui
+ *
+ * OpenTUI-based tabs adapter for CLI applications.
+ * Implements the TabsAdapter interface using OpenTUI (React for CLI).
+ */
+
+export { createTabsAdapter, createEventAdapter } from './adapter.js';
+export type { EventAdapterOptions } from './adapter.js';
+export type { ScrollBoxRenderable } from '@opentui/core';