@gomjellie/lazyapi 0.0.1

package/dist/components/detail-view/DetailView.js

@@ -0,0 +1,266 @@
+/**
+ * API 상세 화면
+ */
+import React from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { useAppSelector, useAppDispatch } from '../../store/hooks.js';
+import { setMode, detailSetFocus, detailSetPanel, detailSetRequestTab, detailSetResponseTab, detailSetResponse, detailSetParam, } from '../../store/appSlice.js';
+import { useNavigation } from '../../hooks/useNavigation.js';
+import { useKeyPress } from '../../hooks/useKeyPress.js';
+import { useApiClient } from '../../hooks/useApiClient.js';
+import StatusBar from '../common/StatusBar.js';
+import KeybindingFooter from '../common/KeybindingFooter.js';
+import LeftPanel from './LeftPanel.js';
+import RightPanel from './RightPanel.js';
+import { getServerUrl } from '../../types/openapi.js';
+import { setCommandInput } from '../../store/appSlice.js';
+export default function DetailView() {
+    const detail = useAppSelector((state) => state.app.detail);
+    const document = useAppSelector((state) => state.app.document);
+    const mode = useAppSelector((state) => state.app.mode);
+    const commandInput = useAppSelector((state) => state.app.commandInput);
+    const dispatch = useAppDispatch();
+    const { goBack } = useNavigation();
+    const { executeRequest, loading } = useApiClient();
+    const { stdout } = useStdout();
+    // detail이 없는 경우를 대비한 기본값
+    const endpoint = detail?.endpoint;
+    const activePanel = detail?.activePanel || 'left';
+    const activeRequestTab = detail?.activeRequestTab || 'headers';
+    const activeResponseTab = detail?.activeResponseTab || 'body';
+    // 파라미터 필드 개수 계산
+    const pathParams = endpoint?.parameters.filter((p) => p.in === 'path') || [];
+    const queryParams = endpoint?.parameters.filter((p) => p.in === 'query') || [];
+    const headerParams = endpoint?.parameters.filter((p) => p.in === 'header') || [];
+    const bodyParams = endpoint?.parameters.filter((p) => p.in === 'body') || [];
+    const formDataParams = endpoint?.parameters.filter((p) => p.in === 'formData') || [];
+    const totalFields = pathParams.length +
+        queryParams.length +
+        headerParams.length +
+        bodyParams.length +
+        formDataParams.length;
+    const handleExecuteRequest = async () => {
+        if (!detail || !document)
+            return;
+        const baseURL = getServerUrl(document);
+        if (!baseURL)
+            return;
+        const response = await executeRequest(detail.endpoint, detail.parameterValues, detail.headers, detail.requestBody, baseURL);
+        if (response) {
+            // Detail 페이지에서 바로 결과 표시 (Result 페이지로 이동하지 않음)
+            dispatch(detailSetResponse(response));
+            // Response Body 탭으로 자동 전환
+            dispatch(detailSetResponseTab('body'));
+            // Response 패널로 포커스 이동
+            dispatch(detailSetPanel('response'));
+        }
+    };
+    const handleCommandSubmit = (cmd) => {
+        // 1. 종료 명령어 처리
+        if (cmd === 'q' || cmd === 'quit' || cmd === 'exit') {
+            process.exit(0);
+        }
+        // 2. 접두사 있는 명령어 처리 (pp1, qp1, h1, rb1, rs1, rq1...)
+        const match = cmd.match(/^(pp|qp|h|rb|rs|rq)(\d+)$/);
+        if (match) {
+            const type = match[1];
+            const index = parseInt(match[2], 10);
+            const targetIndex = index - 1;
+            if (type === 'pp') {
+                // Path Parameters
+                if (targetIndex >= 0 && targetIndex < pathParams.length) {
+                    dispatch(detailSetFocus(targetIndex));
+                    dispatch(detailSetPanel('left'));
+                }
+            }
+            else if (type === 'qp') {
+                // Query Parameters
+                const queryStartIndex = pathParams.length;
+                if (targetIndex >= 0 && targetIndex < queryParams.length) {
+                    dispatch(detailSetFocus(queryStartIndex + targetIndex));
+                    dispatch(detailSetPanel('left'));
+                }
+            }
+            else if (type === 'h') {
+                // Headers
+                const headerStartIndex = pathParams.length + queryParams.length;
+                if (targetIndex >= 0 && targetIndex < headerParams.length) {
+                    dispatch(detailSetFocus(headerStartIndex + targetIndex));
+                    dispatch(detailSetPanel('left'));
+                }
+            }
+            else if (type === 'rq') {
+                // Request Tabs
+                const tabs = ['headers', 'body', 'query'];
+                if (targetIndex >= 0 && targetIndex < tabs.length) {
+                    dispatch(detailSetRequestTab(tabs[targetIndex]));
+                    dispatch(detailSetPanel('request'));
+                }
+            }
+            else if (type === 'rb') {
+                // Request Body
+                const bodyStartIndex = pathParams.length + queryParams.length + headerParams.length;
+                // 만약 bodyParams가 있으면 그쪽으로, 아니면 requestBody(Raw)로
+                if (bodyParams.length > 0) {
+                    if (targetIndex >= 0 && targetIndex < bodyParams.length) {
+                        dispatch(detailSetFocus(bodyStartIndex + targetIndex));
+                        dispatch(detailSetPanel('left'));
+                    }
+                }
+                else if (endpoint?.requestBody) {
+                    // Form Data가 있으면 그 뒤
+                    const rawBodyIndex = bodyStartIndex + formDataParams.length;
+                    if (targetIndex === 0) { // rb1 only for raw body
+                        dispatch(detailSetFocus(rawBodyIndex));
+                        dispatch(detailSetPanel('left'));
+                    }
+                }
+            }
+            else if (type === 'rs') {
+                // Response Tabs
+                const tabs = [
+                    'body',
+                    'headers',
+                    'cookies',
+                    'curl',
+                ];
+                if (targetIndex >= 0 && targetIndex < tabs.length) {
+                    dispatch(detailSetResponseTab(tabs[targetIndex]));
+                    dispatch(detailSetPanel('response'));
+                }
+            }
+            dispatch(setMode('NORMAL'));
+            return;
+        }
+        // 2. 숫자만 있는 경우 (기존 동작 호환: 현재 포커스된 영역의 아이템 선택)
+        const index = parseInt(cmd, 10);
+        if (!isNaN(index)) {
+            dispatch(setMode('NORMAL'));
+            const targetIndex = index - 1;
+            if (activePanel === 'left') {
+                if (targetIndex >= 0 && targetIndex < totalFields) {
+                    dispatch(detailSetFocus(targetIndex));
+                }
+            }
+            else if (activePanel === 'request') {
+                const tabs = ['headers', 'body', 'query'];
+                if (targetIndex >= 0 && targetIndex < tabs.length) {
+                    dispatch(detailSetRequestTab(tabs[targetIndex]));
+                }
+            }
+            else if (activePanel === 'response') {
+                const tabs = [
+                    'body',
+                    'headers',
+                    'cookies',
+                    'curl',
+                ];
+                if (targetIndex >= 0 && targetIndex < tabs.length) {
+                    dispatch(detailSetResponseTab(tabs[targetIndex]));
+                }
+            }
+            return;
+        }
+        dispatch(setMode('NORMAL'));
+    };
+    // 키보드 입력 처리 (NORMAL 모드)
+    useKeyPress({
+        j: () => {
+            if (activePanel === 'left' && totalFields > 0) {
+                // 다음 필드로
+                const nextIndex = Math.min(detail.focusedFieldIndex + 1, totalFields - 1);
+                dispatch(detailSetFocus(nextIndex));
+            }
+        },
+        k: () => {
+            if (activePanel === 'left' && totalFields > 0) {
+                // 이전 필드로
+                const prevIndex = Math.max(detail.focusedFieldIndex - 1, 0);
+                dispatch(detailSetFocus(prevIndex));
+            }
+        },
+        h: () => {
+            // 왼쪽 패널로 (어디서든)
+            dispatch(detailSetPanel('left'));
+        },
+        l: () => {
+            // 오른쪽(Request) 패널로
+            if (activePanel === 'left') {
+                dispatch(detailSetPanel('request'));
+            }
+        },
+        onTab: () => {
+            // 패널 순환: Left -> Request -> Response -> Left
+            if (activePanel === 'left') {
+                dispatch(detailSetPanel('request'));
+            }
+            else if (activePanel === 'request') {
+                dispatch(detailSetPanel('response'));
+            }
+            else {
+                dispatch(detailSetPanel('left'));
+            }
+        },
+        i: () => {
+            // INSERT 모드로 전환 (왼쪽 패널에서만)
+            if (activePanel === 'left') {
+                dispatch(setMode('INSERT'));
+            }
+        },
+        u: () => {
+            // 뒤로 가기
+            goBack();
+        },
+        onReturn: () => {
+            // 요청 실행
+            handleExecuteRequest();
+        },
+        ':': () => {
+            dispatch(setMode('COMMAND'));
+        },
+    }, mode === 'NORMAL');
+    // Command Mode Handler
+    useKeyPress({
+        onEscape: () => {
+            dispatch(setMode('NORMAL'));
+            dispatch(setCommandInput(''));
+        }
+    }, mode === 'COMMAND');
+    // INSERT 모드 키보드 입력 처리
+    useKeyPress({
+        onEscape: () => {
+            dispatch(setMode('NORMAL'));
+        },
+    }, mode === 'INSERT');
+    const keyBindings = mode === 'NORMAL'
+        ? [
+            { key: 'j/k', description: activePanel === 'left' ? 'Navigate' : 'Scroll' },
+            { key: 'h/l', description: 'Panel' },
+            { key: ':', description: 'Command' },
+            { key: 'Tab', description: 'Cycle Panel' },
+            { key: 'i', description: 'Insert' },
+            { key: 'Enter', description: 'Execute' },
+            { key: 'u', description: 'Back' },
+        ]
+        : [
+            { key: 'Tab', description: 'Autocomplete' },
+            { key: 'Type', description: 'Edit Value' },
+            { key: 'Esc', description: 'Normal Mode' },
+        ];
+    const baseURL = document ? getServerUrl(document) || '' : '';
+    const terminalHeight = stdout?.rows || 24;
+    // detail 또는 endpoint가 없는 경우 에러 표시
+    if (!detail || !endpoint) {
+        return (React.createElement(Box, { flexDirection: "column", height: terminalHeight },
+            React.createElement(StatusBar, { title: "API DETAIL", currentPath: "", mode: mode, status: "ERROR" }),
+            React.createElement(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center" },
+                React.createElement(Text, { color: "red" }, "\uC0C1\uC138 \uC815\uBCF4\uB97C \uD45C\uC2DC\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.")),
+            React.createElement(KeybindingFooter, { bindings: [], mode: mode })));
+    }
+    return (React.createElement(Box, { flexDirection: "column", height: terminalHeight },
+        React.createElement(StatusBar, { title: "API DETAIL", currentPath: endpoint.path, mode: mode, status: loading ? 'LOADING...' : 'READY' }),
+        React.createElement(Box, { flexGrow: 1, overflow: "hidden" },
+            React.createElement(LeftPanel, { endpoint: endpoint, parameterValues: detail.parameterValues, focusedFieldIndex: detail.focusedFieldIndex, mode: mode, isFocused: activePanel === 'left', document: document, commandMode: mode === 'COMMAND', onParameterChange: (key, value) => dispatch(detailSetParam({ key, value })), onExitInsertMode: () => dispatch(setMode('NORMAL')) }),
+            React.createElement(RightPanel, { activeRequestTab: activeRequestTab, activeResponseTab: activeResponseTab, activePanel: activePanel, response: detail.response, endpoint: endpoint, parameterValues: detail.parameterValues, requestBody: detail.requestBody, requestHeaders: detail.headers, baseURL: baseURL, mode: mode, isLoading: loading, commandMode: mode === 'COMMAND' })),
+        React.createElement(KeybindingFooter, { bindings: keyBindings, mode: mode, commandInput: commandInput, onCommandChange: (value) => dispatch(setCommandInput(value)), onCommandSubmit: handleCommandSubmit })));
+}

package/dist/components/detail-view/LeftPanel.d.ts

@@ -0,0 +1,19 @@
+/**
+ * API Detail 좌측 패널 - 파라미터 입력
+ */
+import React from 'react';
+import { Endpoint, OpenAPIDocument } from '../../types/openapi.js';
+import { AppMode } from '../../types/app-state.js';
+interface LeftPanelProps {
+    endpoint: Endpoint;
+    parameterValues: Record<string, string>;
+    focusedFieldIndex: number;
+    mode: AppMode;
+    isFocused: boolean;
+    document: OpenAPIDocument;
+    commandMode?: boolean;
+    onParameterChange: (key: string, value: string) => void;
+    onExitInsertMode?: () => void;
+}
+export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex, mode, isFocused, document, commandMode, onParameterChange, onExitInsertMode, }: LeftPanelProps): React.JSX.Element;
+export {};

package/dist/components/detail-view/LeftPanel.js

@@ -0,0 +1,363 @@
+/**
+ * API Detail 좌측 패널 - 파라미터 입력
+ */
+import React, { useState, useEffect, useLayoutEffect, useMemo } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import SearchInput from '../common/SearchInput.js';
+import { isReferenceObject, } from '../../types/openapi.js';
+import { useKeyPress } from '../../hooks/useKeyPress.js';
+import { formatSchemaFull } from '../../utils/schema-formatter.js';
+function getMethodColor(method) {
+    switch (method) {
+        case 'GET':
+            return 'blue';
+        case 'POST':
+            return 'green';
+        case 'PUT':
+            return 'yellow';
+        case 'DELETE':
+            return 'red';
+        case 'PATCH':
+            return 'magenta';
+        default:
+            return 'white';
+    }
+}
+export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex, mode, isFocused, document, commandMode = false, onParameterChange, onExitInsertMode, }) {
+    const { stdout } = useStdout();
+    const [localValue, setLocalValue] = useState('');
+    const [expandedSchemas, setExpandedSchemas] = useState(new Set());
+    const [schemaScrollOffset, setSchemaScrollOffset] = useState(0);
+    // Flat Items Memoization
+    const { flatItems, paramIndexToFlatIndex } = useMemo(() => {
+        // 파라미터 분류
+        const pathParams = endpoint.parameters.filter((p) => p.in === 'path');
+        const queryParams = endpoint.parameters.filter((p) => p.in === 'query');
+        const headerParams = endpoint.parameters.filter((p) => p.in === 'header');
+        const bodyParams = endpoint.parameters.filter((p) => p.in === 'body');
+        const formDataParams = endpoint.parameters.filter((p) => p.in === 'formData');
+        const hasRequestBody = endpoint.requestBody && bodyParams.length === 0;
+        const items = [];
+        const indexMap = [];
+        // 1. Title
+        items.push({ type: 'title', endpoint });
+        // Helper
+        const addParams = (params, sectionTitle, startIndex) => {
+            if (params.length > 0) {
+                items.push({ type: 'section', text: sectionTitle });
+                params.forEach((p, i) => {
+                    const globalIndex = startIndex + i;
+                    indexMap[globalIndex] = items.length;
+                    items.push({ type: 'param', param: p, globalIndex });
+                });
+            }
+        };
+        let currentIndex = 0;
+        addParams(pathParams, '▸ Path Parameters', currentIndex);
+        currentIndex += pathParams.length;
+        addParams(queryParams, '▸ Query Parameters', currentIndex);
+        currentIndex += queryParams.length;
+        addParams(headerParams, '▸ Headers', currentIndex);
+        currentIndex += headerParams.length;
+        addParams(bodyParams, '▸ Request Body', currentIndex);
+        currentIndex += bodyParams.length;
+        addParams(formDataParams, '▸ Form Data', currentIndex);
+        currentIndex += formDataParams.length;
+        if (hasRequestBody) {
+            items.push({ type: 'section', text: '▸ Request Body' });
+            indexMap[currentIndex] = items.length;
+            items.push({ type: 'requestBody', endpoint, globalIndex: currentIndex });
+        }
+        return { flatItems: items, paramIndexToFlatIndex: indexMap };
+    }, [endpoint]);
+    // 스크롤 로직
+    const totalHeight = (stdout?.rows || 24) - 4;
+    const contentHeight = Math.max(totalHeight - 2, 1);
+    const visibleItemCount = Math.floor(contentHeight / 2); // 추정치
+    const [scrollOffset, setScrollOffset] = useState(0);
+    useLayoutEffect(() => {
+        const targetFlatIndex = paramIndexToFlatIndex[focusedFieldIndex];
+        if (targetFlatIndex === undefined)
+            return;
+        // 스크롤 위치 조정은 DOM 업데이트 직후에 실행되어야 하므로 useLayoutEffect 사용
+        // 이는 화면 흔들림을 방지하기 위한 필수적인 작업입니다
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setScrollOffset((currentOffset) => {
+            // 현재 보이는 영역 내에 있으면 스크롤 변경하지 않음 (화면 흔들림 방지)
+            if (targetFlatIndex >= currentOffset && targetFlatIndex < currentOffset + visibleItemCount) {
+                return currentOffset;
+            }
+            // 포커스가 보이는 영역 밖에 있을 때만 스크롤 조정
+            if (targetFlatIndex < currentOffset) {
+                // 포커스가 위에 있으면 포커스를 상단에 맞춤
+                return Math.max(0, targetFlatIndex);
+            }
+            else if (targetFlatIndex >= currentOffset + visibleItemCount) {
+                // 포커스가 아래에 있으면 포커스를 하단에 맞춤
+                return Math.max(0, targetFlatIndex - visibleItemCount + 1);
+            }
+            return currentOffset;
+        });
+    }, [focusedFieldIndex, visibleItemCount, paramIndexToFlatIndex]);
+    // 포커스 변경시 로컬 값 업데이트
+    useEffect(() => {
+        const flatIndex = paramIndexToFlatIndex[focusedFieldIndex];
+        const item = flatItems[flatIndex];
+        if (item && item.type === 'param') {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setLocalValue(parameterValues[item.param.name] || '');
+        }
+    }, [focusedFieldIndex, parameterValues, paramIndexToFlatIndex, flatItems]);
+    // Handlers
+    const handleExpandSchema = () => {
+        if (!isFocused || mode !== 'NORMAL')
+            return;
+        const flatIndex = paramIndexToFlatIndex[focusedFieldIndex];
+        const item = flatItems[flatIndex];
+        if (item?.type === 'requestBody') {
+            setExpandedSchemas((prev) => {
+                const next = new Set(prev);
+                next.add('__requestBody__');
+                return next;
+            });
+            setSchemaScrollOffset(0);
+        }
+        else if (item?.type === 'param' &&
+            item.param.schema &&
+            isReferenceObject(item.param.schema)) {
+            setExpandedSchemas((prev) => {
+                const next = new Set(prev);
+                next.add(item.param.name);
+                return next;
+            });
+            setSchemaScrollOffset(0);
+        }
+    };
+    const handleCollapseSchema = () => {
+        if (!isFocused || mode !== 'NORMAL')
+            return;
+        const flatIndex = paramIndexToFlatIndex[focusedFieldIndex];
+        const item = flatItems[flatIndex];
+        if (item?.type === 'requestBody') {
+            setExpandedSchemas((prev) => {
+                const next = new Set(prev);
+                next.delete('__requestBody__');
+                return next;
+            });
+        }
+        else if (item?.type === 'param') {
+            setExpandedSchemas((prev) => {
+                const next = new Set(prev);
+                next.delete(item.param.name);
+                return next;
+            });
+        }
+    };
+    const handleSchemaScrollDown = () => {
+        if (!isFocused || mode !== 'NORMAL')
+            return;
+        const flatIndex = paramIndexToFlatIndex[focusedFieldIndex];
+        const item = flatItems[flatIndex];
+        const maxHeight = Math.floor((stdout?.rows || 24) * 0.3);
+        if (item?.type === 'requestBody' && expandedSchemas.has('__requestBody__')) {
+            if (endpoint.requestBody?.schema) {
+                const lines = formatSchemaFull(endpoint.requestBody.schema, document, 3);
+                setSchemaScrollOffset((prev) => Math.min(prev + 1, Math.max(0, lines.length - maxHeight)));
+            }
+        }
+        else if (item?.type === 'param' && expandedSchemas.has(item.param.name)) {
+            if (item.param.schema && isReferenceObject(item.param.schema)) {
+                const lines = formatSchemaFull(item.param.schema, document, 2);
+                setSchemaScrollOffset((prev) => Math.min(prev + 1, Math.max(0, lines.length - maxHeight)));
+            }
+        }
+    };
+    const handleSchemaScrollUp = () => {
+        setSchemaScrollOffset((prev) => Math.max(prev - 1, 0));
+    };
+    useKeyPress({
+        '>': handleExpandSchema,
+        '<': handleCollapseSchema,
+        j: handleSchemaScrollDown,
+        k: handleSchemaScrollUp,
+    }, mode === 'NORMAL' && isFocused);
+    // Render Helpers
+    const renderSchema = (ref) => {
+        const schema = { $ref: ref };
+        const lines = formatSchemaFull(schema, document, 2);
+        const maxHeight = Math.floor((stdout?.rows || 24) * 0.3);
+        const visibleLines = lines.slice(schemaScrollOffset, schemaScrollOffset + maxHeight);
+        return (React.createElement(Box, { marginTop: 1, borderStyle: "single", borderColor: "cyan", paddingX: 1, flexDirection: "column" },
+            visibleLines.map((line, idx) => (React.createElement(Text, { key: idx, color: "cyan", dimColor: true }, line))),
+            lines.length > maxHeight && (React.createElement(Text, { color: "gray", dimColor: true },
+                schemaScrollOffset + 1,
+                "-",
+                Math.min(schemaScrollOffset + maxHeight, lines.length),
+                " of",
+                ' ',
+                lines.length,
+                " lines"))));
+    };
+    const renderRequestBodySchema = () => {
+        if (!endpoint.requestBody?.schema)
+            return null;
+        const lines = formatSchemaFull(endpoint.requestBody.schema, document, 3);
+        const maxHeight = Math.floor((stdout?.rows || 24) * 0.3);
+        const visibleLines = lines.slice(schemaScrollOffset, schemaScrollOffset + maxHeight);
+        return (React.createElement(Box, { marginTop: 1, borderStyle: "single", borderColor: "cyan", paddingX: 1, flexDirection: "column" },
+            visibleLines.map((line, idx) => (React.createElement(Text, { key: idx, color: "cyan", dimColor: true }, line))),
+            lines.length > maxHeight && (React.createElement(Text, { color: "gray", dimColor: true },
+                schemaScrollOffset + 1,
+                "-",
+                Math.min(schemaScrollOffset + maxHeight, lines.length),
+                " of",
+                ' ',
+                lines.length,
+                " lines"))));
+    };
+    // Rendering
+    const visibleItems = flatItems.slice(scrollOffset, scrollOffset + visibleItemCount);
+    const pathParamCount = endpoint.parameters.filter((p) => p.in === 'path').length;
+    const headerParamCount = endpoint.parameters.filter((p) => p.in === 'header').length;
+    const queryParamCount = endpoint.parameters.filter((p) => p.in === 'query').length;
+    const bodyStartIndex = pathParamCount + queryParamCount + headerParamCount;
+    return (React.createElement(Box, { flexDirection: "column", width: "50%", height: totalHeight, borderStyle: "single", borderColor: isFocused ? 'green' : 'gray', paddingX: 1 }, visibleItems.map((item, idx) => {
+        const key = `item-${scrollOffset + idx}`;
+        if (item.type === 'title') {
+            return (React.createElement(Box, { key: key, flexDirection: "column", marginBottom: 1 },
+                React.createElement(Box, null,
+                    React.createElement(Text, { bold: true, color: getMethodColor(item.endpoint.method) },
+                        "[",
+                        item.endpoint.method,
+                        "]"),
+                    React.createElement(Text, { bold: true, color: "green" },
+                        ' ',
+                        item.endpoint.path)),
+                (item.endpoint.summary || item.endpoint.description) && (React.createElement(Text, { dimColor: true }, item.endpoint.summary || item.endpoint.description))));
+        }
+        if (item.type === 'section') {
+            return (React.createElement(Box, { key: key, marginTop: 1, marginBottom: 0 },
+                React.createElement(Text, { bold: true, color: "green" }, item.text)));
+        }
+        if (item.type === 'param') {
+            const isFieldFocused = item.globalIndex === focusedFieldIndex && isFocused;
+            const value = parameterValues[item.param.name] || '';
+            let typeInfo = '';
+            let refInfo = '';
+            if (item.param.schema) {
+                if (isReferenceObject(item.param.schema)) {
+                    refInfo = item.param.schema.$ref.split('/').pop() || item.param.schema.$ref;
+                    typeInfo = 'object';
+                }
+                else {
+                    const schemaType = item.param.schema.type;
+                    typeInfo = Array.isArray(schemaType) ? schemaType.join(' | ') : schemaType || '';
+                }
+            }
+            const hasSchema = !!(refInfo &&
+                item.param.schema &&
+                isReferenceObject(item.param.schema));
+            const isExpanded = expandedSchemas.has(item.param.name);
+            // Command Hint Calculation
+            let commandHint = '';
+            if (commandMode) {
+                if (item.param.in === 'path') {
+                    const ppIndex = item.globalIndex + 1;
+                    commandHint = `pp${ppIndex}`;
+                }
+                else if (item.param.in === 'query') {
+                    const qpIndex = item.globalIndex - pathParamCount + 1;
+                    commandHint = `qp${qpIndex}`;
+                }
+                else if (item.param.in === 'header') {
+                    const hIndex = item.globalIndex - (pathParamCount + queryParamCount) + 1;
+                    commandHint = `h${hIndex}`;
+                }
+                else if (item.param.in === 'body') {
+                    const rbIndex = item.globalIndex - bodyStartIndex + 1;
+                    commandHint = `rb${rbIndex}`;
+                }
+            }
+            return (React.createElement(Box, { key: key, flexDirection: "column" },
+                React.createElement(Box, { marginLeft: 1, flexDirection: "row" },
+                    React.createElement(Box, { flexDirection: "row" },
+                        commandMode && (React.createElement(Box, { width: 6 },
+                            React.createElement(Text, { color: "yellow" },
+                                "[",
+                                commandHint,
+                                "]"))),
+                        React.createElement(Text, { color: isFieldFocused ? 'green' : 'white', bold: isFieldFocused }, item.param.name),
+                        React.createElement(Text, { color: "gray" },
+                            " (",
+                            item.param.in,
+                            ")"),
+                        item.param.required && React.createElement(Text, { color: "red" }, " *"),
+                        typeInfo && React.createElement(Text, { color: "cyan" },
+                            " : ",
+                            typeInfo)),
+                    React.createElement(Box, { marginLeft: 2, flexGrow: 1 }, mode === 'INSERT' && isFieldFocused ? (React.createElement(SearchInput, { value: localValue, onChange: (val) => {
+                            setLocalValue(val);
+                            onParameterChange(item.param.name, val);
+                        }, suggestions: [], placeholder: "", focus: true, onSubmit: onExitInsertMode })) : (React.createElement(Text, { color: value ? 'white' : 'gray', backgroundColor: isFieldFocused ? 'green' : undefined, bold: isFieldFocused && !value }, value || (isFieldFocused ? ' (empty) ' : '(empty)'))))),
+                item.param.description && (React.createElement(Box, { marginLeft: 2, marginTop: 0 },
+                    React.createElement(Text, { color: "gray", dimColor: true }, item.param.description))),
+                (() => {
+                    if (!isFieldFocused)
+                        return null;
+                    let enumValues = [];
+                    if (item.param.schema && !isReferenceObject(item.param.schema)) {
+                        if (item.param.schema.enum) {
+                            enumValues = item.param.schema.enum;
+                        }
+                        else if (item.param.schema.type === 'array' &&
+                            item.param.schema.items &&
+                            !isReferenceObject(item.param.schema.items) &&
+                            item.param.schema.items.enum) {
+                            enumValues = item.param.schema.items.enum;
+                        }
+                    }
+                    if (enumValues.length > 0) {
+                        return (React.createElement(Box, { marginLeft: 2, marginTop: 0, flexDirection: "column" },
+                            React.createElement(Text, { color: "yellow", dimColor: true },
+                                "Available values: ",
+                                enumValues.join(', ')),
+                            React.createElement(Text, { color: "gray", dimColor: true }, "(Tab to autocomplete)")));
+                    }
+                    return null;
+                })(),
+                hasSchema && !isExpanded && (React.createElement(Box, { marginLeft: 2, marginTop: 0 },
+                    React.createElement(Text, { color: "yellow", dimColor: true },
+                        "Press > to view ",
+                        refInfo,
+                        " schema"))),
+                hasSchema && isExpanded && isReferenceObject(item.param.schema) && (React.createElement(React.Fragment, null,
+                    React.createElement(Box, { marginLeft: 2, marginTop: 0 },
+                        React.createElement(Text, { color: "yellow", dimColor: true },
+                            "Schema: ",
+                            refInfo,
+                            " (Press < to collapse)")),
+                    renderSchema(item.param.schema.$ref)))));
+        }
+        if (item.type === 'requestBody') {
+            const isFieldFocused = item.globalIndex === focusedFieldIndex && isFocused;
+            const isExpanded = expandedSchemas.has('__requestBody__');
+            const hasSchema = !!endpoint.requestBody?.schema;
+            const commandHint = commandMode ? 'rb1' : '';
+            return (React.createElement(Box, { key: key, flexDirection: "column" },
+                React.createElement(Box, { flexDirection: "row", backgroundColor: isFieldFocused ? 'green' : undefined, marginLeft: 1 },
+                    commandMode && (React.createElement(Box, { width: 6 },
+                        React.createElement(Text, { color: "yellow" },
+                            "[",
+                            commandHint,
+                            "]"))),
+                    React.createElement(Text, { color: isFieldFocused ? 'black' : 'gray' }, item.endpoint.requestBody?.description || 'Request Body Content')),
+                hasSchema && !isExpanded && (React.createElement(Box, { marginLeft: 1, marginTop: 0 },
+                    React.createElement(Text, { color: "yellow", dimColor: true }, "Press > to view schema details"))),
+                hasSchema && isExpanded && (React.createElement(React.Fragment, null,
+                    React.createElement(Box, { marginLeft: 1, marginTop: 0 },
+                        React.createElement(Text, { color: "yellow", dimColor: true }, "Schema (Press < to collapse)")),
+                    renderRequestBodySchema()))));
+        }
+        return null;
+    })));
+}

package/dist/components/detail-view/ParameterForm.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 파라미터 입력 폼 컴포넌트
+ */
+import React from 'react';
+import { Endpoint } from '../../types/openapi.js';
+import { AppMode } from '../../types/app-state.js';
+interface ParameterFormProps {
+    endpoint: Endpoint;
+    parameterValues: Record<string, string>;
+    requestBody: string;
+    focusedFieldIndex: number;
+    mode: AppMode;
+    onParameterChange: (key: string, value: string) => void;
+    onBodyChange: (body: string) => void;
+}
+export default function ParameterForm({ endpoint, parameterValues, requestBody, focusedFieldIndex, mode, onParameterChange, onBodyChange, }: ParameterFormProps): React.JSX.Element;
+export {};