@beast01/tcurl 1.0.0

package/dist/components/RequestEditor.js

@@ -0,0 +1,276 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { HTTP_METHODS } from '../types.js';
+import { methodColor } from '../theme.js';
+import { TextEditor } from './TextEditor.js';
+import { headersToText, textToHeaders, queryToText, textToQuery } from '../lib/kv.js';
+const BODY_MODES = ['none', 'raw', 'json', 'form'];
+const AUTH_TYPES = ['none', 'bearer', 'basic'];
+export function RequestEditor({ theme, request, isActive, onChange, onSend, onBack, }) {
+    const [focus, setFocus] = useState(0);
+    const [editingKey, setEditingKey] = useState(null);
+    const fields = buildFields(request, theme);
+    const editing = editingKey !== null;
+    useInput((input, key) => {
+        if (key.escape) {
+            onBack();
+            return;
+        }
+        if (key.upArrow || (key.shift && key.tab)) {
+            setFocus((f) => (f - 1 + fields.length) % fields.length);
+            return;
+        }
+        if (key.downArrow || key.tab) {
+            setFocus((f) => (f + 1) % fields.length);
+            return;
+        }
+        const field = fields[focus];
+        if (!field)
+            return;
+        if (key.leftArrow || key.rightArrow) {
+            const dir = key.leftArrow ? -1 : 1;
+            applyCycle(field.key, dir);
+            return;
+        }
+        if (key.return || input === ' ') {
+            activate(field);
+            return;
+        }
+    }, { isActive: isActive && !editing });
+    function update(patch) {
+        onChange({ ...request, ...patch, updatedAt: Date.now() });
+    }
+    function applyCycle(fieldKey, dir) {
+        if (fieldKey === 'method') {
+            const idx = HTTP_METHODS.indexOf(request.method);
+            const next = HTTP_METHODS[(idx + dir + HTTP_METHODS.length) % HTTP_METHODS.length];
+            update({ method: next });
+        }
+        else if (fieldKey === 'bodyMode') {
+            const idx = BODY_MODES.indexOf(request.bodyMode);
+            update({ bodyMode: BODY_MODES[(idx + dir + BODY_MODES.length) % BODY_MODES.length] });
+        }
+        else if (fieldKey === 'authType') {
+            const idx = AUTH_TYPES.indexOf(request.auth.type);
+            const next = AUTH_TYPES[(idx + dir + AUTH_TYPES.length) % AUTH_TYPES.length];
+            update({ auth: { ...request.auth, type: next } });
+        }
+        else if (fieldKey === 'followRedirects') {
+            update({ followRedirects: !request.followRedirects });
+        }
+        else if (fieldKey === 'rejectUnauthorized') {
+            update({ rejectUnauthorized: !request.rejectUnauthorized });
+        }
+    }
+    function activate(field) {
+        switch (field.type) {
+            case 'cycle':
+                applyCycle(field.key, 1);
+                break;
+            case 'toggle':
+                applyCycle(field.key, 1);
+                break;
+            case 'action':
+                if (field.key === 'send')
+                    onSend();
+                break;
+            case 'text':
+            case 'masked':
+            case 'multiline':
+                setEditingKey(field.key);
+                break;
+        }
+    }
+    function commitEdit(fieldKey, value) {
+        switch (fieldKey) {
+            case 'name':
+                update({ name: value || 'Untitled request' });
+                break;
+            case 'url':
+                update({ url: value });
+                break;
+            case 'authToken':
+                update({ auth: { ...request.auth, token: value } });
+                break;
+            case 'authPassword':
+                update({ auth: { ...request.auth, password: value } });
+                break;
+            case 'body':
+                update({ body: value });
+                break;
+            case 'headers':
+                update({ headers: textToHeaders(value) });
+                break;
+            case 'query':
+                update({ query: textToQuery(value) });
+                break;
+            case 'timeout': {
+                const n = parseInt(value, 10);
+                update({ timeoutMs: Number.isFinite(n) && n >= 0 ? n : request.timeoutMs });
+                break;
+            }
+        }
+        setEditingKey(null);
+    }
+    if (editing) {
+        const ed = editorConfigFor(editingKey, request);
+        return (React.createElement(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1 },
+            React.createElement(TextEditor, { theme: theme, label: ed.label, initialValue: ed.value, multiline: ed.multiline, masked: ed.masked, onSubmit: (v) => commitEdit(editingKey, v), onCancel: () => setEditingKey(null) })));
+    }
+    return (React.createElement(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: isActive ? theme.borderActive : theme.border, paddingX: 1 },
+        React.createElement(Text, { color: theme.accentAlt, bold: true }, "Edit request"),
+        React.createElement(Box, { height: 1 }),
+        fields.map((f, i) => {
+            const focused = i === focus;
+            if (f.type === 'action') {
+                return (React.createElement(Box, { key: f.key, marginTop: 1 },
+                    React.createElement(Text, { backgroundColor: focused ? theme.success : undefined, color: focused ? theme.bg : theme.success, bold: true },
+                        focused ? ' ▶ ' : '   ',
+                        f.label,
+                        '  ')));
+            }
+            return (React.createElement(Box, { key: f.key },
+                React.createElement(Text, { color: focused ? theme.accent : theme.fgDim },
+                    focused ? '❯ ' : '  ',
+                    f.label.padEnd(13)),
+                React.createElement(Text, { color: f.color ?? (focused ? theme.fg : theme.fgDim), wrap: "truncate-end" }, f.display)));
+        }),
+        React.createElement(Box, { height: 1 }),
+        React.createElement(Text, { color: theme.muted }, "\u2191\u2193 move \u00B7 \u2190\u2192/Space change \u00B7 Enter edit \u00B7 Esc back")));
+}
+function buildFields(request, theme) {
+    const fields = [
+        { key: 'name', label: 'Name', type: 'text', display: request.name },
+        {
+            key: 'method',
+            label: 'Method',
+            type: 'cycle',
+            display: request.method,
+            color: methodColor(request.method, theme),
+        },
+        { key: 'url', label: 'URL', type: 'text', display: request.url || '(empty)' },
+        { key: 'authType', label: 'Auth', type: 'cycle', display: request.auth.type },
+    ];
+    if (request.auth.type === 'bearer') {
+        fields.push({
+            key: 'authToken',
+            label: 'Token',
+            type: 'masked',
+            display: mask(request.auth.token),
+        });
+    }
+    else if (request.auth.type === 'basic') {
+        fields.push({
+            key: 'authToken',
+            label: 'Username',
+            type: 'text',
+            display: request.auth.token || '(empty)',
+        });
+        fields.push({
+            key: 'authPassword',
+            label: 'Password',
+            type: 'masked',
+            display: mask(request.auth.password),
+        });
+    }
+    fields.push({
+        key: 'bodyMode',
+        label: 'Body type',
+        type: 'cycle',
+        display: request.bodyMode,
+    });
+    if (request.bodyMode !== 'none') {
+        fields.push({
+            key: 'body',
+            label: 'Body',
+            type: 'multiline',
+            display: preview(request.body),
+        });
+    }
+    fields.push({
+        key: 'headers',
+        label: 'Headers',
+        type: 'multiline',
+        display: preview(headersToText(request.headers)),
+    });
+    fields.push({
+        key: 'query',
+        label: 'Query',
+        type: 'multiline',
+        display: preview(queryToText(request.query)),
+    });
+    fields.push({
+        key: 'timeout',
+        label: 'Timeout ms',
+        type: 'text',
+        display: String(request.timeoutMs),
+    });
+    fields.push({
+        key: 'followRedirects',
+        label: 'Redirects',
+        type: 'toggle',
+        display: request.followRedirects ? 'follow' : 'manual',
+    });
+    fields.push({
+        key: 'rejectUnauthorized',
+        label: 'TLS verify',
+        type: 'toggle',
+        display: request.rejectUnauthorized ? 'on' : 'off (insecure)',
+        color: request.rejectUnauthorized ? undefined : theme.warning,
+    });
+    fields.push({ key: 'send', label: 'Send request  ▶', type: 'action', display: '' });
+    return fields;
+}
+function editorConfigFor(key, request) {
+    switch (key) {
+        case 'name':
+            return { label: 'Name', value: request.name, multiline: false, masked: false };
+        case 'url':
+            return { label: 'URL', value: request.url, multiline: false, masked: false };
+        case 'authToken':
+            return {
+                label: request.auth.type === 'basic' ? 'Username' : 'Token',
+                value: request.auth.token,
+                multiline: false,
+                masked: request.auth.type === 'bearer',
+            };
+        case 'authPassword':
+            return { label: 'Password', value: request.auth.password, multiline: false, masked: true };
+        case 'body':
+            return { label: 'Body', value: request.body, multiline: true, masked: false };
+        case 'headers':
+            return {
+                label: 'Headers (Key: Value per line)',
+                value: headersToText(request.headers),
+                multiline: true,
+                masked: false,
+            };
+        case 'query':
+            return {
+                label: 'Query (key=value per line)',
+                value: queryToText(request.query),
+                multiline: true,
+                masked: false,
+            };
+        case 'timeout':
+            return {
+                label: 'Timeout (ms, 0 = none)',
+                value: String(request.timeoutMs),
+                multiline: false,
+                masked: false,
+            };
+        default:
+            return { label: key, value: '', multiline: false, masked: false };
+    }
+}
+function mask(s) {
+    return s ? '•'.repeat(Math.min(s.length, 24)) : '(empty)';
+}
+function preview(s) {
+    if (!s)
+        return '(empty)';
+    const firstLine = s.split('\n')[0];
+    const lines = s.split('\n').length;
+    const suffix = lines > 1 ? ` … +${lines - 1} lines` : '';
+    return (firstLine.length > 40 ? firstLine.slice(0, 39) + '…' : firstLine) + suffix;
+}

package/dist/components/RequestList.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { methodColor } from '../theme.js';
+export function RequestList({ theme, requests, selectedIndex }) {
+    return (React.createElement(Box, { flexDirection: "row", flexGrow: 1 },
+        React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border, paddingX: 1, width: "45%", marginRight: 1 },
+            React.createElement(Text, { color: theme.accentAlt, bold: true },
+                "Saved requests (",
+                requests.length,
+                ")"),
+            React.createElement(Box, { height: 1 }),
+            requests.length === 0 ? (React.createElement(Text, { color: theme.muted }, "No requests yet. Press \"n\" to create one.")) : (requests.map((r, i) => {
+                const selected = i === selectedIndex;
+                return (React.createElement(Box, { key: r.id },
+                    React.createElement(Text, { backgroundColor: selected ? theme.selectionBg : undefined, color: selected ? theme.fg : theme.fgDim },
+                        selected ? '❯ ' : '  ',
+                        React.createElement(Text, { color: methodColor(r.method, theme), bold: true }, r.method.padEnd(6)),
+                        ' ',
+                        truncate(r.name, 24))));
+            }))),
+        React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border, paddingX: 1, flexGrow: 1 }, requests[selectedIndex] ? (React.createElement(RequestDetail, { theme: theme, request: requests[selectedIndex] })) : (React.createElement(Text, { color: theme.muted }, "Select or create a request.")))));
+}
+function RequestDetail({ theme, request, }) {
+    const enabledHeaders = request.headers.filter((h) => h.enabled);
+    const enabledQuery = request.query.filter((q) => q.enabled);
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { color: theme.fg, bold: true }, request.name),
+        React.createElement(Box, { height: 1 }),
+        React.createElement(Text, null,
+            React.createElement(Text, { color: methodColor(request.method, theme), bold: true }, request.method),
+            ' ',
+            React.createElement(Text, { color: theme.fg }, request.url || '(no url)')),
+        React.createElement(Box, { height: 1 }),
+        React.createElement(Field, { theme: theme, label: "Auth", value: request.auth.type }),
+        React.createElement(Field, { theme: theme, label: "Body", value: request.bodyMode }),
+        React.createElement(Field, { theme: theme, label: "Headers", value: String(enabledHeaders.length) }),
+        React.createElement(Field, { theme: theme, label: "Query", value: String(enabledQuery.length) }),
+        React.createElement(Field, { theme: theme, label: "Timeout", value: request.timeoutMs ? `${request.timeoutMs} ms` : 'none' }),
+        React.createElement(Field, { theme: theme, label: "Redirects", value: request.followRedirects ? 'follow' : 'manual' }),
+        React.createElement(Field, { theme: theme, label: "TLS verify", value: request.rejectUnauthorized ? 'on' : 'off (insecure)' })));
+}
+function Field({ theme, label, value }) {
+    return (React.createElement(Text, null,
+        React.createElement(Text, { color: theme.fgDim }, label.padEnd(11)),
+        React.createElement(Text, { color: theme.fg }, value)));
+}
+function truncate(s, n) {
+    return s.length > n ? s.slice(0, n - 1) + '…' : s;
+}

package/dist/components/ResponseViewer.js

@@ -0,0 +1,83 @@
+import React, { useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { statusColor } from '../theme.js';
+import { prettyBody, formatBytes, formatDuration, wrapLines } from '../lib/format.js';
+export function ResponseViewer({ theme, response, isActive, onBack, width, height, }) {
+    const [tab, setTab] = useState('body');
+    const [scroll, setScroll] = useState(0);
+    const viewport = Math.max(4, height - 8);
+    const innerWidth = Math.max(20, width - 6);
+    const lines = useMemo(() => {
+        if (tab === 'headers') {
+            return Object.entries(response.headers).map(([k, v]) => `${k}: ${v}`);
+        }
+        const pretty = prettyBody(response.body, response.contentType);
+        return wrapLines(pretty, innerWidth);
+    }, [tab, response, innerWidth]);
+    const maxScroll = Math.max(0, lines.length - viewport);
+    const clampedScroll = Math.min(scroll, maxScroll);
+    useInput((input, key) => {
+        if (key.escape || input === 'q' || key.backspace) {
+            onBack();
+            return;
+        }
+        if (input === 'h' || input === 'b' || key.tab) {
+            setTab((t) => (t === 'body' ? 'headers' : 'body'));
+            setScroll(0);
+            return;
+        }
+        if (key.upArrow || input === 'k')
+            setScroll((s) => Math.max(0, s - 1));
+        if (key.downArrow || input === 'j')
+            setScroll((s) => Math.min(maxScroll, s + 1));
+        if (key.pageUp)
+            setScroll((s) => Math.max(0, s - viewport));
+        if (key.pageDown)
+            setScroll((s) => Math.min(maxScroll, s + viewport));
+        if (input === 'g')
+            setScroll(0);
+        if (input === 'G')
+            setScroll(maxScroll);
+    }, { isActive });
+    const visible = lines.slice(clampedScroll, clampedScroll + viewport);
+    const sc = statusColor(response.status, theme);
+    return (React.createElement(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: isActive ? theme.borderActive : theme.border, paddingX: 1 },
+        response.error ? (React.createElement(Text, { color: theme.error, bold: true },
+            "\u2716 ",
+            response.error)) : (React.createElement(Box, { justifyContent: "space-between" },
+            React.createElement(Text, null,
+                React.createElement(Text, { color: sc, bold: true },
+                    response.status,
+                    " ",
+                    response.statusText),
+                React.createElement(Text, { color: theme.fgDim },
+                    '  ',
+                    formatDuration(response.durationMs),
+                    " \u00B7 ",
+                    formatBytes(response.sizeBytes),
+                    " \u00B7",
+                    ' ',
+                    response.contentType)),
+            React.createElement(Text, { color: theme.muted }, truncate(response.finalUrl, 40)))),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Tabs, { theme: theme, tab: tab, headerCount: Object.keys(response.headers).length })),
+        React.createElement(Box, { flexDirection: "column", marginTop: 1, minHeight: viewport }, visible.length === 0 ? (React.createElement(Text, { color: theme.muted }, "(empty)")) : (visible.map((line, i) => (React.createElement(Text, { key: i, color: theme.fg }, line.length === 0 ? ' ' : line))))),
+        React.createElement(Box, { justifyContent: "space-between" },
+            React.createElement(Text, { color: theme.muted }, lines.length > viewport
+                ? `line ${clampedScroll + 1}-${Math.min(clampedScroll + viewport, lines.length)} / ${lines.length}`
+                : `${lines.length} lines`),
+            React.createElement(Text, { color: theme.muted }, "\u2191\u2193 scroll \u00B7 Tab headers/body \u00B7 g/G top/bottom \u00B7 Esc back"))));
+}
+function Tabs({ theme, tab, headerCount, }) {
+    const item = (id, label) => (React.createElement(Text, { backgroundColor: tab === id ? theme.selectionBg : undefined, color: tab === id ? theme.accent : theme.fgDim, bold: tab === id },
+        ' ',
+        label,
+        ' '));
+    return (React.createElement(Text, null,
+        item('body', 'Body'),
+        '  ',
+        item('headers', `Headers (${headerCount})`)));
+}
+function truncate(s, n) {
+    return s.length > n ? '…' + s.slice(s.length - n + 1) : s;
+}

package/dist/components/Spinner.js

@@ -0,0 +1,13 @@
+import React, { useEffect, useState } from 'react';
+import { Text } from 'ink';
+const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+export function Spinner({ theme, label }) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const t = setInterval(() => setFrame((f) => (f + 1) % FRAMES.length), 80);
+        return () => clearInterval(t);
+    }, []);
+    return (React.createElement(Text, { color: theme.accent },
+        FRAMES[frame],
+        label ? ` ${label}` : ''));
+}

package/dist/components/StatusBar.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+export function StatusBar({ theme, hints }) {
+    return (React.createElement(Box, { paddingX: 1, flexWrap: "wrap" }, hints.map((h, i) => (React.createElement(Text, { key: i },
+        React.createElement(Text, { color: theme.accent, bold: true }, h.key),
+        React.createElement(Text, { color: theme.fgDim }, ' ' + h.label),
+        i < hints.length - 1 ? React.createElement(Text, { color: theme.muted }, '   ') : null)))));
+}

package/dist/components/TextEditor.js

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+/**
+ * A self-contained text editor supporting single- and multi-line input.
+ * Enter submits (single-line) or inserts a newline (multi-line).
+ * Ctrl+S submits, Esc cancels. Arrow keys move the cursor.
+ */
+export function TextEditor({ initialValue, multiline = false, masked = false, theme, label, onSubmit, onCancel, }) {
+    const [value, setValue] = useState(initialValue);
+    const [cursor, setCursor] = useState(initialValue.length);
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        // Ctrl+S always submits.
+        if (key.ctrl && input === 's') {
+            onSubmit(value);
+            return;
+        }
+        if (key.return) {
+            if (multiline) {
+                insert('\n');
+            }
+            else {
+                onSubmit(value);
+            }
+            return;
+        }
+        if (key.leftArrow) {
+            setCursor((c) => Math.max(0, c - 1));
+            return;
+        }
+        if (key.rightArrow) {
+            setCursor((c) => Math.min(value.length, c + 1));
+            return;
+        }
+        if (key.upArrow || key.downArrow) {
+            moveVertical(key.upArrow ? -1 : 1);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            if (cursor > 0) {
+                setValue((v) => v.slice(0, cursor - 1) + v.slice(cursor));
+                setCursor((c) => Math.max(0, c - 1));
+            }
+            return;
+        }
+        // Ignore other control keys (tab, etc.).
+        if (key.tab || key.ctrl || key.meta)
+            return;
+        if (input)
+            insert(input);
+    });
+    function insert(text) {
+        setValue((v) => v.slice(0, cursor) + text + v.slice(cursor));
+        setCursor((c) => c + text.length);
+    }
+    function moveVertical(dir) {
+        const before = value.slice(0, cursor);
+        const lines = before.split('\n');
+        const col = lines[lines.length - 1].length;
+        const allLines = value.split('\n');
+        const curLineIdx = lines.length - 1;
+        const targetIdx = curLineIdx + dir;
+        if (targetIdx < 0 || targetIdx >= allLines.length)
+            return;
+        let offset = 0;
+        for (let i = 0; i < targetIdx; i++)
+            offset += allLines[i].length + 1;
+        offset += Math.min(col, allLines[targetIdx].length);
+        setCursor(offset);
+    }
+    const display = masked ? '•'.repeat(value.length) : value;
+    // Insert a visible cursor block.
+    const withCursor = display.slice(0, cursor) +
+        (cursor < display.length ? `█` : '█') +
+        display.slice(cursor + (cursor < display.length ? 1 : 0));
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, null,
+            React.createElement(Text, { color: theme.accent, bold: true },
+                '✎ ',
+                label)),
+        React.createElement(Box, { borderStyle: "round", borderColor: theme.borderActive, paddingX: 1, flexDirection: "column", minHeight: multiline ? 6 : 1 },
+            React.createElement(Text, { color: theme.fg }, withCursor.length ? withCursor : '█')),
+        React.createElement(Box, null,
+            React.createElement(Text, { color: theme.muted }, multiline
+                ? 'Enter: newline · Ctrl+S: save · Esc: cancel'
+                : 'Enter: save · Esc: cancel'))));
+}