@hookbase/cli 1.0.0 → 1.0.2

package/dist/tui/views/Outbound.js

@@ -0,0 +1,543 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import SelectInput from 'ink-select-input';
+import Spinner from 'ink-spinner';
+import * as api from '../../lib/api.js';
+function CreateApplication({ onBack, onCreated }) {
+    const [step, setStep] = useState('name');
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [error, setError] = useState(null);
+    const [createdApp, setCreatedApp] = useState(null);
+    useInput((input, key) => {
+        if (key.escape && step !== 'creating') {
+            onBack();
+        }
+    });
+    const handleCreate = async () => {
+        setStep('creating');
+        try {
+            const result = await api.createWebhookApplication({
+                name: name.trim(),
+                description: description.trim() || undefined,
+            });
+            if (result.error) {
+                setError(result.error);
+                setStep('name');
+            }
+            else {
+                setCreatedApp(result.data?.data || result.data?.application || null);
+                setStep('done');
+                setTimeout(onCreated, 1500);
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to create');
+            setStep('name');
+        }
+    };
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Create Application" }), _jsx(Text, { dimColor: true, children: " - Esc to cancel" })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 2, paddingY: 1, children: [step === 'name' && (_jsxs(Box, { children: [_jsx(Text, { children: "Name: " }), _jsx(TextInput, { value: name, onChange: setName, onSubmit: () => name.trim() && setStep('description'), placeholder: "My Webhook App" })] })), step === 'description' && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["Name: ", name] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Description (optional, Enter to skip): " }), _jsx(TextInput, { value: description, onChange: setDescription, onSubmit: handleCreate, placeholder: "" })] })] })), step === 'creating' && (_jsxs(Box, { children: [_jsx(Text, { color: "green", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Creating application..." })] })), step === 'done' && createdApp && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "green", bold: true, children: "Application created!" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "ID: " }), _jsx(Text, { children: createdApp.id })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Name: " }), _jsx(Text, { children: createdApp.name })] })] })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) }))] })] }));
+}
+function CreateEndpoint({ applications, onBack, onCreated }) {
+    const [step, setStep] = useState('app');
+    const [selectedAppId, setSelectedAppId] = useState('');
+    const [url, setUrl] = useState('');
+    const [error, setError] = useState(null);
+    const [createdEndpoint, setCreatedEndpoint] = useState(null);
+    const [secret, setSecret] = useState(null);
+    useInput((input, key) => {
+        if (key.escape && step !== 'creating') {
+            onBack();
+        }
+    });
+    const appItems = applications.map(a => ({
+        label: a.name,
+        value: a.id,
+    }));
+    const handleAppSelect = (item) => {
+        setSelectedAppId(item.value);
+        setStep('url');
+    };
+    const handleCreate = async () => {
+        if (!url.trim())
+            return;
+        setStep('creating');
+        try {
+            const result = await api.createWebhookEndpoint({
+                applicationId: selectedAppId,
+                url: url.trim(),
+            });
+            if (result.error) {
+                setError(result.error);
+                setStep('url');
+            }
+            else {
+                const resData = result.data?.data || result.data;
+                setCreatedEndpoint(resData || null);
+                setSecret(resData?.secret || result.data?.secret || null);
+                setStep('done');
+                setTimeout(onCreated, 3000);
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to create');
+            setStep('url');
+        }
+    };
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Create Endpoint" }), _jsx(Text, { dimColor: true, children: " - Esc to cancel" })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 2, paddingY: 1, children: [step === 'app' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: "Select application:" }), appItems.length === 0 ? (_jsx(Text, { color: "yellow", children: "No applications. Create an application first." })) : (_jsx(SelectInput, { items: appItems, onSelect: handleAppSelect }))] })), step === 'url' && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["App: ", applications.find(a => a.id === selectedAppId)?.name] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Endpoint URL: " }), _jsx(TextInput, { value: url, onChange: setUrl, onSubmit: handleCreate, placeholder: "https://api.example.com/webhook" })] })] })), step === 'creating' && (_jsxs(Box, { children: [_jsx(Text, { color: "green", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Creating endpoint..." })] })), step === 'done' && createdEndpoint && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "green", bold: true, children: "Endpoint created!" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "ID: " }), _jsx(Text, { children: createdEndpoint.id })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "URL: " }), _jsx(Text, { color: "blue", children: createdEndpoint.url })] }), secret && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "yellow", bold: true, children: "Save this secret - it will not be shown again:" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "cyan", bold: true, children: secret }) })] }))] })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) }))] })] }));
+}
+// Helper to get active status from app (API uses isDisabled, not is_active)
+function getAppIsActive(app) {
+    if ('isDisabled' in app)
+        return !app.isDisabled;
+    if ('is_disabled' in app)
+        return !app.is_disabled;
+    if ('is_active' in app)
+        return !!app.is_active;
+    return true;
+}
+function getDate(obj, ...keys) {
+    for (const k of keys) {
+        if (obj[k])
+            return new Date(obj[k]).toLocaleString();
+    }
+    return '-';
+}
+function AppDetail({ appId, applications, onBack, onRefresh }) {
+    const app = applications.find((a) => a.id === appId);
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [toggling, setToggling] = useState(false);
+    const [message, setMessage] = useState(null);
+    const [localActive, setLocalActive] = useState(null);
+    const busy = useRef(false);
+    const isActive = localActive !== null ? localActive : (app ? getAppIsActive(app) : false);
+    useInput(async (input, key) => {
+        if (busy.current)
+            return;
+        if (key.escape || input === 'b') {
+            if (confirmDelete) {
+                setConfirmDelete(false);
+            }
+            else {
+                onBack();
+            }
+        }
+        if (input === 't' && !confirmDelete && app) {
+            busy.current = true;
+            setToggling(true);
+            const newDisabled = isActive;
+            try {
+                const result = await api.updateWebhookApplication(appId, { isDisabled: newDisabled });
+                if (result.error) {
+                    setMessage(`Error: ${result.error}`);
+                }
+                else {
+                    setLocalActive(!newDisabled);
+                    setMessage(!newDisabled ? 'Application enabled' : 'Application disabled');
+                    onRefresh();
+                }
+            }
+            catch (err) {
+                setMessage('Failed to toggle');
+            }
+            setToggling(false);
+            setTimeout(() => { busy.current = false; }, 300);
+        }
+        if (input === 'd' && !confirmDelete) {
+            setConfirmDelete(true);
+        }
+        if (input === 'y' && confirmDelete) {
+            busy.current = true;
+            setDeleting(true);
+            try {
+                const result = await api.deleteWebhookApplication(appId);
+                if (result.error) {
+                    setMessage(`Error: ${result.error}`);
+                    setConfirmDelete(false);
+                    setTimeout(() => { busy.current = false; }, 300);
+                }
+                else {
+                    setMessage('Application deleted');
+                    setTimeout(() => { onRefresh(); onBack(); }, 1500);
+                }
+            }
+            catch (err) {
+                setMessage('Failed to delete');
+                setConfirmDelete(false);
+                setTimeout(() => { busy.current = false; }, 300);
+            }
+            setDeleting(false);
+        }
+        if (input === 'n' && confirmDelete) {
+            setConfirmDelete(false);
+        }
+    });
+    if (!app) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "red", children: "Application not found" }), _jsx(Text, { dimColor: true, children: "Press Esc to go back" })] }));
+    }
+    const a = app;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Application Details" }), _jsx(Text, { dimColor: true, children: " - Esc: back | t: toggle | d: delete" })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 1, children: [_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "ID:" }) }), _jsx(Text, { children: app.id })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Name:" }) }), _jsx(Text, { bold: true, children: app.name })] }), (a.uid || a.externalId) && (_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "UID:" }) }), _jsx(Text, { children: a.uid || a.externalId })] })), (a.description || a.metadata) && (_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Description:" }) }), _jsx(Text, { children: a.description || '-' })] })), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Status:" }) }), _jsx(Text, { color: isActive ? 'green' : 'red', children: isActive ? 'Active' : 'Disabled' })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Endpoints:" }) }), _jsx(Text, { children: a.endpoint_count ?? a.endpointCount ?? 0 })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Messages:" }) }), _jsx(Text, { children: a.message_count ?? a.messageCount ?? 0 })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Created:" }) }), _jsx(Text, { dimColor: true, children: getDate(a, 'createdAt', 'created_at') })] }), toggling && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "yellow", children: [_jsx(Spinner, { type: "dots" }), " Updating..."] }) })), confirmDelete && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "red", bold: true, children: "Delete this application?" }), _jsx(Text, { children: "Press 'y' to confirm, 'n' or Esc to cancel" })] })), deleting && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "yellow", children: [_jsx(Spinner, { type: "dots" }), " Deleting..."] }) })), message && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: message.startsWith('Error') ? 'red' : 'green', children: message }) }))] })] }));
+}
+function EndpointDetail({ endpointId, endpoints, onBack, onRefresh }) {
+    const endpoint = endpoints.find((e) => e.id === endpointId);
+    const [testing, setTesting] = useState(false);
+    const [testResult, setTestResult] = useState(null);
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [message, setMessage] = useState(null);
+    const busy = useRef(false);
+    useInput(async (input, key) => {
+        if (busy.current)
+            return;
+        if (key.escape || input === 'b') {
+            if (confirmDelete) {
+                setConfirmDelete(false);
+            }
+            else {
+                onBack();
+            }
+        }
+        if (input === 't' && !confirmDelete) {
+            busy.current = true;
+            setTesting(true);
+            try {
+                const result = await api.testWebhookEndpoint(endpointId);
+                if (result.error) {
+                    setTestResult({ success: false, status: 0, time: 0, error: result.error });
+                }
+                else {
+                    const d = result.data?.data || result.data;
+                    setTestResult({
+                        success: d?.success === true,
+                        status: (d?.statusCode ?? d?.status_code ?? 0),
+                        time: (d?.duration ?? d?.responseTime ?? d?.response_time ?? 0),
+                        error: d?.error,
+                    });
+                }
+            }
+            catch (err) {
+                setTestResult({ success: false, status: 0, time: 0, error: 'Test failed' });
+            }
+            setTesting(false);
+            setTimeout(() => { busy.current = false; }, 300);
+        }
+        if (input === 'd' && !confirmDelete) {
+            setConfirmDelete(true);
+        }
+        if (input === 'y' && confirmDelete) {
+            busy.current = true;
+            setDeleting(true);
+            try {
+                const result = await api.deleteWebhookEndpoint(endpointId);
+                if (result.error) {
+                    setMessage(`Error: ${result.error}`);
+                    setConfirmDelete(false);
+                    setTimeout(() => { busy.current = false; }, 300);
+                }
+                else {
+                    setMessage('Endpoint deleted');
+                    setTimeout(() => { onRefresh(); onBack(); }, 1500);
+                }
+            }
+            catch (err) {
+                setMessage('Failed to delete');
+                setConfirmDelete(false);
+            }
+            setDeleting(false);
+        }
+        if (input === 'n' && confirmDelete) {
+            setConfirmDelete(false);
+        }
+    });
+    if (!endpoint) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "red", children: "Endpoint not found" }), _jsx(Text, { dimColor: true, children: "Press Esc to go back" })] }));
+    }
+    const ep = endpoint;
+    const epActive = ep.is_active || ep.isActive || !ep.isDisabled;
+    const eventTypes = Array.isArray(ep.event_types || ep.eventTypes)
+        ? (ep.event_types || ep.eventTypes).join(', ')
+        : '*';
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Endpoint Details" }), _jsx(Text, { dimColor: true, children: " - Esc: back | t: test | d: delete" })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 1, children: [_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "ID:" }) }), _jsx(Text, { children: endpoint.id })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "URL:" }) }), _jsx(Text, { color: "blue", children: endpoint.url })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Application:" }) }), _jsx(Text, { children: ep.application_name || ep.applicationName || ep.application_id || ep.applicationId })] }), (ep.description) && (_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Description:" }) }), _jsx(Text, { children: ep.description })] })), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Status:" }) }), _jsx(Text, { color: epActive ? 'green' : 'red', children: epActive ? 'Active' : 'Disabled' })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Circuit:" }) }), (() => {
+                                const state = ep.circuit_state || ep.circuitState;
+                                const color = state === 'closed' ? 'green' : state === 'open' ? 'red' : 'yellow';
+                                return _jsx(Text, { color: color, children: state || 'unknown' });
+                            })()] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Event Types:" }) }), _jsx(Text, { children: eventTypes })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Timeout:" }) }), _jsxs(Text, { children: [ep.timeout_ms || ep.timeoutMs || 30000, "ms"] })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Messages:" }) }), _jsx(Text, { children: ep.message_count ?? ep.messageCount ?? 0 })] }), (ep.success_rate !== undefined || ep.successRate !== undefined) && (_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Success Rate:" }) }), _jsxs(Text, { children: [((ep.success_rate ?? ep.successRate) * 100).toFixed(1), "%"] })] })), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Created:" }) }), _jsx(Text, { dimColor: true, children: getDate(ep, 'createdAt', 'created_at') })] }), testing && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "yellow", children: [_jsx(Spinner, { type: "dots" }), " Testing..."] }) })), testResult && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Test Result:" }), testResult.error ? (_jsxs(Text, { color: "red", children: ["Error: ", testResult.error] })) : (_jsxs(Text, { color: testResult.success ? 'green' : 'red', children: [testResult.success ? 'Passed' : 'Failed', " - Status: ", testResult.status > 0 ? testResult.status : 'N/A', " | Time: ", testResult.time, "ms"] }))] })), confirmDelete && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "red", bold: true, children: "Delete this endpoint?" }), _jsx(Text, { children: "Press 'y' to confirm, 'n' or Esc to cancel" })] })), deleting && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "yellow", children: [_jsx(Spinner, { type: "dots" }), " Deleting..."] }) })), message && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: message.startsWith('Error') ? 'red' : 'green', children: message }) }))] })] }));
+}
+export function OutboundView({ subView, onNavigate, onRefresh }) {
+    const [activeSubTab, setActiveSubTab] = useState('apps');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [applications, setApplications] = useState([]);
+    const [endpoints, setEndpoints] = useState([]);
+    const [messages, setMessages] = useState([]);
+    const [dlqMessages, setDlqMessages] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [statusMessage, setStatusMessage] = useState(null);
+    const SUB_TABS = [
+        { key: 'apps', label: 'Applications' },
+        { key: 'endpoints', label: 'Endpoints' },
+        { key: 'messages', label: 'Messages' },
+        { key: 'dlq', label: 'DLQ' },
+    ];
+    const fetchData = async (isInitial = false) => {
+        if (isInitial) {
+            setLoading(true);
+        }
+        setError(null);
+        try {
+            const [appsRes, endpointsRes, messagesRes, dlqRes] = await Promise.all([
+                api.getWebhookApplications(),
+                api.getWebhookEndpoints(),
+                api.getWebhookMessages({ limit: 50 }),
+                api.getDlqMessages({ limit: 50 }),
+            ]);
+            if (appsRes.error)
+                throw new Error(appsRes.error);
+            if (endpointsRes.error)
+                throw new Error(endpointsRes.error);
+            // API returns { data: [...] } for all list endpoints
+            setApplications(appsRes.data?.data || appsRes.data?.applications || []);
+            setEndpoints(endpointsRes.data?.data || endpointsRes.data?.endpoints || []);
+            setMessages(messagesRes.data?.data || messagesRes.data?.messages || []);
+            setDlqMessages(dlqRes.data?.data || dlqRes.data?.messages || []);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to fetch data');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        fetchData(true);
+    }, []);
+    const getCurrentListLength = () => {
+        switch (activeSubTab) {
+            case 'apps': return applications.length + 1; // +1 for create item
+            case 'endpoints': return endpoints.length + 1; // +1 for create item
+            case 'messages': return messages.length;
+            case 'dlq': return dlqMessages.length;
+            default: return 0;
+        }
+    };
+    const getCurrentDataList = () => {
+        switch (activeSubTab) {
+            case 'apps': return applications;
+            case 'endpoints': return endpoints;
+            case 'messages': return messages;
+            case 'dlq': return dlqMessages;
+            default: return [];
+        }
+    };
+    useInput((input, key) => {
+        if (subView)
+            return;
+        const listLen = getCurrentListLength();
+        // Sub-tab navigation with [ / ] or left/right arrows
+        if (input === '[' || input === ']' || key.leftArrow || key.rightArrow) {
+            const currentIdx = SUB_TABS.findIndex(t => t.key === activeSubTab);
+            const direction = (input === ']' || key.rightArrow) ? 1 : -1;
+            const newIdx = (currentIdx + direction + SUB_TABS.length) % SUB_TABS.length;
+            setActiveSubTab(SUB_TABS[newIdx].key);
+            setSelectedIndex(0);
+            return;
+        }
+        // List navigation
+        if (key.downArrow || input === 'j') {
+            setSelectedIndex(prev => Math.min(prev + 1, listLen - 1));
+        }
+        if (key.upArrow || input === 'k') {
+            setSelectedIndex(prev => Math.max(prev - 1, 0));
+        }
+        // View details / select create
+        if (key.return && listLen > 0) {
+            if ((activeSubTab === 'apps' || activeSubTab === 'endpoints') && selectedIndex === 0) {
+                onNavigate(activeSubTab === 'apps' ? 'create-app' : 'create-endpoint');
+                return;
+            }
+            const dataList = getCurrentDataList();
+            const dataIdx = (activeSubTab === 'apps' || activeSubTab === 'endpoints') ? selectedIndex - 1 : selectedIndex;
+            if (dataIdx >= 0 && dataIdx < dataList.length) {
+                const item = dataList[dataIdx];
+                onNavigate(`${activeSubTab}:${item.id}`);
+            }
+        }
+        // Create new
+        if (input === 'n') {
+            if (activeSubTab === 'apps') {
+                onNavigate('create-app');
+                return;
+            }
+            if (activeSubTab === 'endpoints') {
+                onNavigate('create-endpoint');
+                return;
+            }
+        }
+        // Refresh
+        if (input === 'r') {
+            fetchData();
+        }
+        // Test endpoint (offset by 1 for create item)
+        if (input === 't' && activeSubTab === 'endpoints' && selectedIndex > 0 && endpoints.length > 0) {
+            const endpoint = endpoints[selectedIndex - 1];
+            if (endpoint)
+                testEndpoint(endpoint.id);
+        }
+        // Retry message/DLQ
+        if (input === 'y') {
+            if (activeSubTab === 'messages' && messages.length > 0) {
+                retryMessage(messages[selectedIndex].id);
+            }
+            else if (activeSubTab === 'dlq' && dlqMessages.length > 0) {
+                retryDlqMessage(dlqMessages[selectedIndex].id);
+            }
+        }
+    });
+    const testEndpoint = async (endpointId) => {
+        setStatusMessage('Testing endpoint...');
+        const result = await api.testWebhookEndpoint(endpointId);
+        if (result.error) {
+            setStatusMessage(`Test failed: ${result.error}`);
+        }
+        else if (result.data?.success) {
+            const d = result.data?.data || result.data;
+            setStatusMessage(`Test passed: ${d.statusCode || d.status_code || '?'} (${d.duration ?? d.responseTime ?? 0}ms)`);
+        }
+        else {
+            setStatusMessage(`Test failed: ${result.data?.error || 'Unknown error'}`);
+        }
+        setTimeout(() => setStatusMessage(null), 3000);
+    };
+    const retryMessage = async (messageId) => {
+        setStatusMessage('Retrying message...');
+        const result = await api.retryWebhookMessage(messageId);
+        if (result.error) {
+            setStatusMessage(`Retry failed: ${result.error}`);
+        }
+        else {
+            setStatusMessage('Message queued for retry');
+            fetchData();
+        }
+        setTimeout(() => setStatusMessage(null), 3000);
+    };
+    const retryDlqMessage = async (messageId) => {
+        setStatusMessage('Retrying DLQ message...');
+        const result = await api.retryDlqMessage(messageId);
+        if (result.error) {
+            setStatusMessage(`Retry failed: ${result.error}`);
+        }
+        else {
+            setStatusMessage('DLQ message queued for retry');
+            fetchData();
+        }
+        setTimeout(() => setStatusMessage(null), 3000);
+    };
+    const formatStatus = (status) => {
+        switch (status) {
+            case 'delivered': return _jsx(Text, { color: "green", children: status });
+            case 'pending': return _jsx(Text, { color: "yellow", children: status });
+            case 'processing': return _jsx(Text, { color: "cyan", children: status });
+            case 'failed': return _jsx(Text, { color: "red", children: status });
+            case 'exhausted': return _jsx(Text, { color: "red", children: status });
+            default: return _jsx(Text, { dimColor: true, children: status });
+        }
+    };
+    const formatCircuitState = (state) => {
+        switch (state) {
+            case 'closed': return _jsx(Text, { color: "green", children: "closed" });
+            case 'open': return _jsx(Text, { color: "red", children: "open" });
+            case 'half_open': return _jsx(Text, { color: "yellow", children: "half_open" });
+            default: return _jsx(Text, { dimColor: true, children: "-" });
+        }
+    };
+    if (loading) {
+        return (_jsxs(Box, { children: [_jsx(Text, { color: "green", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Loading outbound webhooks..." })] }));
+    }
+    if (error) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "red", children: ["Error: ", error] }), _jsx(Text, { dimColor: true, children: "Press 'r' to retry" })] }));
+    }
+    // Render create views
+    if (subView === 'create-app') {
+        return (_jsx(CreateApplication, { onBack: () => onNavigate(null), onCreated: () => { fetchData(); onNavigate(null); } }));
+    }
+    if (subView === 'create-endpoint') {
+        return (_jsx(CreateEndpoint, { applications: applications, onBack: () => onNavigate(null), onCreated: () => { fetchData(); onNavigate(null); } }));
+    }
+    // Render detail view
+    if (subView) {
+        const [type, id] = subView.split(':');
+        if (type === 'apps') {
+            return (_jsx(AppDetail, { appId: id, applications: applications, onBack: () => onNavigate(null), onRefresh: fetchData }));
+        }
+        if (type === 'endpoints') {
+            return (_jsx(EndpointDetail, { endpointId: id, endpoints: endpoints, onBack: () => onNavigate(null), onRefresh: fetchData }));
+        }
+        if (type === 'messages') {
+            const message = messages.find(m => m.id === id);
+            if (!message)
+                return _jsx(Text, { color: "red", children: "Message not found" });
+            const m = message;
+            const eventType = m.event_type || m.eventType || '-';
+            const respStatus = m.response_status || m.responseStatus;
+            const errorMsg = m.error_message || m.errorMessage;
+            const nextRetry = m.next_retry_at || m.nextRetryAt;
+            const deliveredAt = m.delivered_at || m.deliveredAt;
+            const createdAt = m.created_at || m.createdAt || '';
+            const endpointId = m.endpoint_id || m.endpointId || '-';
+            const appId = m.application_id || m.applicationId || '-';
+            const ep = endpoints.find(e => e.id === endpointId);
+            return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Message Details" }), _jsx(Text, { dimColor: true, children: " - Esc: back | y: retry" })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 1, children: [_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "ID:" }) }), _jsx(Text, { children: message.id })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Event Type:" }) }), _jsx(Text, { children: eventType })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Endpoint:" }) }), _jsx(Text, { color: "blue", children: ep ? ep.url : endpointId })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Application:" }) }), _jsx(Text, { children: appId })] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Status:" }) }), formatStatus(message.status)] }), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Attempts:" }) }), _jsxs(Text, { children: [m.attempt_count ?? m.attemptCount ?? 0, "/", m.max_attempts ?? m.maxAttempts ?? 5] })] }), respStatus && (_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Response:" }) }), _jsx(Text, { color: respStatus >= 200 && respStatus < 300 ? 'green' : 'red', children: respStatus })] })), errorMsg && (_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Error:" }) }), _jsx(Text, { color: "red", children: errorMsg })] })), nextRetry && (_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Next Retry:" }) }), _jsx(Text, { color: "yellow", children: new Date(nextRetry).toLocaleString() })] })), deliveredAt && (_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Delivered:" }) }), _jsx(Text, { color: "green", children: new Date(deliveredAt).toLocaleString() })] })), _jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { dimColor: true, children: "Created:" }) }), _jsx(Text, { dimColor: true, children: new Date(createdAt).toLocaleString() })] })] })] }));
+        }
+        if (type === 'dlq') {
+            const dlqMessage = dlqMessages.find(m => m.id === id);
+            if (!dlqMessage)
+                return _jsx(Text, { color: "red", children: "DLQ message not found" });
+            const d = dlqMessage;
+            const eventType = d.event_type || d.eventType || '-';
+            const reason = d.reason || '-';
+            const errorMsg = d.error_message || d.errorMessage;
+            const lastResp = d.last_response_status || d.lastResponseStatus;
+            const origId = d.original_message_id || d.originalMessageId || '-';
+            const endpointId = d.endpoint_id || d.endpointId || '-';
+            const createdAt = d.created_at || d.createdAt || '';
+            const ep = endpoints.find(e => e.id === endpointId);
+            return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "DLQ Message Details" }), _jsx(Text, { dimColor: true, children: " - Esc: back | y: retry" })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "red", paddingX: 2, paddingY: 1, children: [_jsxs(Box, { children: [_jsx(Box, { width: 18, children: _jsx(Text, { dimColor: true, children: "ID:" }) }), _jsx(Text, { children: dlqMessage.id })] }), _jsxs(Box, { children: [_jsx(Box, { width: 18, children: _jsx(Text, { dimColor: true, children: "Original Msg:" }) }), _jsx(Text, { dimColor: true, children: origId })] }), _jsxs(Box, { children: [_jsx(Box, { width: 18, children: _jsx(Text, { dimColor: true, children: "Event Type:" }) }), _jsx(Text, { children: eventType })] }), _jsxs(Box, { children: [_jsx(Box, { width: 18, children: _jsx(Text, { dimColor: true, children: "Endpoint:" }) }), _jsx(Text, { color: "blue", children: ep ? ep.url : endpointId })] }), _jsxs(Box, { children: [_jsx(Box, { width: 18, children: _jsx(Text, { dimColor: true, children: "Reason:" }) }), _jsx(Text, { color: "red", children: reason })] }), _jsxs(Box, { children: [_jsx(Box, { width: 18, children: _jsx(Text, { dimColor: true, children: "Attempts:" }) }), _jsx(Text, { children: d.attempt_count ?? d.attemptCount ?? 0 })] }), lastResp && (_jsxs(Box, { children: [_jsx(Box, { width: 18, children: _jsx(Text, { dimColor: true, children: "Last Response:" }) }), _jsx(Text, { color: "red", children: lastResp })] })), errorMsg && (_jsxs(Box, { children: [_jsx(Box, { width: 18, children: _jsx(Text, { dimColor: true, children: "Error:" }) }), _jsx(Text, { color: "red", children: errorMsg })] })), _jsxs(Box, { children: [_jsx(Box, { width: 18, children: _jsx(Text, { dimColor: true, children: "Created:" }) }), _jsx(Text, { dimColor: true, children: new Date(createdAt).toLocaleString() })] })] })] }));
+        }
+        return _jsx(Text, { color: "red", children: "Unknown view" });
+    }
+    // Render list view
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [SUB_TABS.map((tab) => (_jsx(Box, { marginRight: 2, children: _jsxs(Text, { bold: activeSubTab === tab.key, color: activeSubTab === tab.key ? 'cyan' : 'gray', children: [activeSubTab === tab.key ? '▸ ' : '  ', tab.label] }) }, tab.key))), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: true, children: "[]/\u2190\u2192: switch | \u2191/\u2193: select | Enter: view" })] }), statusMessage && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "yellow", children: statusMessage }) })), activeSubTab === 'apps' && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { bold: true, children: ["Applications (", applications.length, ")"] }), _jsx(Text, { dimColor: true, children: " | n: new | Enter: details" })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: selectedIndex === 0 ? 'cyan' : undefined, bold: selectedIndex === 0, children: selectedIndex === 0 ? '▶' : ' ' }) }), _jsx(Text, { color: "green", children: "+ New Application" })] }), applications.map((app, idx) => {
+                                const listIdx = idx + 1;
+                                const isSelected = listIdx === selectedIndex;
+                                return (_jsxs(Box, { children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, children: isSelected ? '▶' : ' ' }) }), _jsx(Box, { width: 24, children: _jsxs(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, children: [app.name.slice(0, 22), app.name.length > 22 ? '…' : ''] }) }), _jsx(Box, { width: 14, children: _jsxs(Text, { dimColor: true, children: [app.endpoint_count || 0, " endpoints"] }) }), _jsx(Box, { width: 10, children: _jsxs(Text, { dimColor: true, children: [app.message_count || 0, " msgs"] }) }), _jsx(Box, { width: 8, children: _jsx(Text, { color: getAppIsActive(app) ? 'green' : 'red', children: getAppIsActive(app) ? 'Active' : 'Off' }) })] }, app.id));
+                            })] })] })), activeSubTab === 'endpoints' && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { bold: true, children: ["Endpoints (", endpoints.length, ")"] }), _jsx(Text, { dimColor: true, children: " | n: new | t: test | Enter: details" })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: selectedIndex === 0 ? 'cyan' : undefined, bold: selectedIndex === 0, children: selectedIndex === 0 ? '▶' : ' ' }) }), _jsx(Text, { color: "green", children: "+ New Endpoint" })] }), endpoints.map((ep, idx) => {
+                                const listIdx = idx + 1;
+                                const isSelected = listIdx === selectedIndex;
+                                return (_jsxs(Box, { children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, children: isSelected ? '▶' : ' ' }) }), _jsx(Box, { width: 46, children: _jsxs(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, children: [ep.url.slice(0, 44), ep.url.length > 44 ? '…' : ''] }) }), _jsx(Box, { width: 12, children: formatCircuitState(ep.circuitState || ep.circuit_state) }), _jsx(Box, { width: 8, children: _jsx(Text, { color: ep.is_active ? 'green' : 'red', children: ep.is_active ? 'Active' : 'Off' }) })] }, ep.id));
+                            })] })] })), activeSubTab === 'messages' && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { bold: true, children: ["Recent Messages (", messages.length, ")"] }), _jsx(Text, { dimColor: true, children: " | Enter: details | y: retry" })] }), messages.length === 0 ? (_jsx(Text, { dimColor: true, children: "No messages. Send events with: hookbase outbound send" })) : (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsxs(Box, { borderBottom: true, marginBottom: 0, children: [_jsx(Box, { width: 2, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: 10, children: _jsx(Text, { bold: true, dimColor: true, children: "Time" }) }), _jsx(Box, { width: 22, children: _jsx(Text, { bold: true, dimColor: true, children: "Event Type" }) }), _jsx(Box, { width: 12, children: _jsx(Text, { bold: true, dimColor: true, children: "Status" }) }), _jsx(Box, { width: 10, children: _jsx(Text, { bold: true, dimColor: true, children: "Response" }) }), _jsx(Box, { width: 12, children: _jsx(Text, { bold: true, dimColor: true, children: "Attempts" }) }), _jsx(Box, { width: 14, children: _jsx(Text, { bold: true, dimColor: true, children: "ID" }) })] }), messages.slice(0, 15).map((msg, idx) => {
+                                const m = msg;
+                                const isSelected = idx === selectedIndex;
+                                const createdAt = m.created_at || m.createdAt || '';
+                                const d = createdAt ? new Date(createdAt) : null;
+                                const time = d ? `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}` : '-';
+                                const eventType = m.event_type || m.eventType || '-';
+                                const respStatus = m.response_status || m.responseStatus;
+                                const attempts = `${m.attempt_count ?? m.attemptCount ?? 0}/${m.max_attempts ?? m.maxAttempts ?? 5}`;
+                                return (_jsxs(Box, { children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, children: isSelected ? '▶' : ' ' }) }), _jsx(Box, { width: 10, children: _jsx(Text, { dimColor: true, children: time }) }), _jsx(Box, { width: 22, children: _jsx(Text, { color: isSelected ? 'cyan' : undefined, children: eventType.slice(0, 20) }) }), _jsx(Box, { width: 12, children: formatStatus(msg.status) }), _jsx(Box, { width: 10, children: _jsx(Text, { color: respStatus >= 200 && respStatus < 300 ? 'green' : respStatus ? 'red' : 'gray', children: respStatus || '-' }) }), _jsx(Box, { width: 12, children: _jsx(Text, { dimColor: true, children: attempts }) }), _jsxs(Text, { dimColor: true, children: [msg.id.slice(0, 12), "\u2026"] })] }, msg.id));
+                            })] }))] })), activeSubTab === 'dlq' && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { bold: true, children: ["Dead Letter Queue (", dlqMessages.length, ")"] }), _jsx(Text, { dimColor: true, children: " | Enter: details | y: retry" })] }), dlqMessages.length === 0 ? (_jsx(Text, { color: "green", children: "No messages in DLQ" })) : (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsxs(Box, { borderBottom: true, marginBottom: 0, children: [_jsx(Box, { width: 2, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: 10, children: _jsx(Text, { bold: true, dimColor: true, children: "Time" }) }), _jsx(Box, { width: 20, children: _jsx(Text, { bold: true, dimColor: true, children: "Event Type" }) }), _jsx(Box, { width: 20, children: _jsx(Text, { bold: true, dimColor: true, children: "Reason" }) }), _jsx(Box, { width: 10, children: _jsx(Text, { bold: true, dimColor: true, children: "Response" }) }), _jsx(Box, { width: 10, children: _jsx(Text, { bold: true, dimColor: true, children: "Attempts" }) }), _jsx(Box, { width: 14, children: _jsx(Text, { bold: true, dimColor: true, children: "ID" }) })] }), dlqMessages.slice(0, 15).map((msg, idx) => {
+                                const m = msg;
+                                const isSelected = idx === selectedIndex;
+                                const createdAt = m.created_at || m.createdAt || '';
+                                const d = createdAt ? new Date(createdAt) : null;
+                                const time = d ? `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}` : '-';
+                                const eventType = m.event_type || m.eventType || '-';
+                                const reason = m.reason || '-';
+                                const lastResp = m.last_response_status || m.lastResponseStatus;
+                                const attempts = m.attempt_count ?? m.attemptCount ?? 0;
+                                return (_jsxs(Box, { children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, children: isSelected ? '▶' : ' ' }) }), _jsx(Box, { width: 10, children: _jsx(Text, { dimColor: true, children: time }) }), _jsx(Box, { width: 20, children: _jsx(Text, { color: isSelected ? 'cyan' : undefined, children: eventType.slice(0, 18) }) }), _jsx(Box, { width: 20, children: _jsx(Text, { color: "red", children: reason.slice(0, 18) }) }), _jsx(Box, { width: 10, children: _jsx(Text, { color: lastResp ? 'red' : 'gray', children: lastResp || '-' }) }), _jsx(Box, { width: 10, children: _jsx(Text, { dimColor: true, children: attempts }) }), _jsxs(Text, { dimColor: true, children: [msg.id.slice(0, 12), "\u2026"] })] }, msg.id));
+                            })] }))] }))] }));
+}
+//# sourceMappingURL=Outbound.js.map