@gomjellie/lazyapi 0.0.1 → 0.0.3

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

@@ -1,12 +1,13 @@
 /**
  * API Detail 좌측 패널 - 파라미터 입력
  */
-import React, { useState, useEffect, useLayoutEffect, useMemo } from 'react';
+import React, { useState, useEffect, useLayoutEffect, useMemo, useCallback } 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';
+import { scaffoldSchema } from '../../utils/schema-scaffolder.js';
 function getMethodColor(method) {
     switch (method) {
         case 'GET':
@@ -23,11 +24,130 @@ function getMethodColor(method) {
             return 'white';
     }
 }
-export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex, mode, isFocused, document, commandMode = false, onParameterChange, onExitInsertMode, }) {
+function getStatusColor(status) {
+    if (status.startsWith('2'))
+        return 'green';
+    if (status.startsWith('3'))
+        return 'blue';
+    if (status.startsWith('4'))
+        return 'yellow';
+    if (status.startsWith('5'))
+        return 'red';
+    return 'gray';
+}
+export default function LeftPanel({ endpoint, parameterValues, requestBodyValue, focusedFieldIndex, mode, isFocused, document, commandMode = false, onParameterChange, onExitInsertMode, onRequestBodyEdit, onSetMode, }) {
     const { stdout } = useStdout();
     const [localValue, setLocalValue] = useState('');
-    const [expandedSchemas, setExpandedSchemas] = useState(new Set());
-    const [schemaScrollOffset, setSchemaScrollOffset] = useState(0);
+    const [collapsedSchemas, setCollapsedSchemas] = useState(() => {
+        const initial = new Set();
+        endpoint.responses?.forEach((res) => {
+            initial.add(`res_${res.status}`);
+        });
+        return initial;
+    });
+    const [schemaScrollOffsets, setSchemaScrollOffsets] = useState({});
+    // 엔드포인트 변경 시 Response Schema들 다시 접기
+    useEffect(() => {
+        setCollapsedSchemas((prev) => {
+            const next = new Set(prev);
+            endpoint.responses?.forEach((res) => {
+                next.add(`res_${res.status}`);
+            });
+            return next;
+        });
+    }, [endpoint.responses]);
+    // Helper to calculate dynamic item height
+    const getItemHeight = useCallback((item) => {
+        let height = 0;
+        if (item.type === 'title') {
+            // Title height calculation with wrapping estimation
+            const panelWidth = Math.floor((stdout?.columns || 80) / 2) - 2; // 50% width - padding
+            const titleText = `[${item.endpoint.method}] ${item.endpoint.path}`;
+            const titleLines = Math.ceil(titleText.length / panelWidth) || 1;
+            height = titleLines;
+            if (item.endpoint.summary || item.endpoint.description) {
+                const descText = item.endpoint.summary || item.endpoint.description || '';
+                const descLines = Math.ceil(descText.length / panelWidth) || 1;
+                height += descLines;
+            }
+            // marginBottom 제거됨
+        }
+        else if (item.type === 'section') {
+            height = 1; // Title only (no margin)
+        }
+        else if (item.type === 'param') {
+            height = 1; // Basic row
+            if (item.param.description)
+                height += 1;
+            const isFieldFocused = item.globalIndex === focusedFieldIndex && isFocused;
+            if (isFieldFocused) {
+                // Enum hints
+                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)
+                    height += 2;
+            }
+            // Schema expansion
+            const hasSchema = !!(item.param.schema && isReferenceObject(item.param.schema));
+            if (hasSchema) {
+                const isExpanded = !collapsedSchemas.has(item.param.name);
+                if (!isExpanded) {
+                    height += 1; // "Press > to view..."
+                }
+                else {
+                    // Schema box height calculation (title is now inside the box)
+                    const lines = formatSchemaFull(item.param.schema, document, 10);
+                    const maxHeight = Math.floor((stdout?.rows || 24) * 0.3);
+                    const visibleLinesCount = Math.min(lines.length, maxHeight);
+                    height += 1 + visibleLinesCount + (lines.length > maxHeight ? 1 : 0) + 2; // +1 for title, +2 for borders
+                }
+            }
+        }
+        else if (item.type === 'requestBody') {
+            height = 1; // Basic row
+            const hasSchema = !!endpoint.requestBody?.schema;
+            if (hasSchema) {
+                const isExpanded = !collapsedSchemas.has('__requestBody__');
+                if (!isExpanded) {
+                    height += 1;
+                }
+                else {
+                    const lines = formatSchemaFull(endpoint.requestBody.schema, document, 10);
+                    const maxHeight = Math.floor((stdout?.rows || 24) * 0.3);
+                    const visibleLinesCount = Math.min(lines.length, maxHeight);
+                    height += 1 + visibleLinesCount + (lines.length > maxHeight ? 1 : 0) + 2; // +1 for title, +2 for borders
+                }
+            }
+        }
+        else if (item.type === 'responseItem') {
+            height = 1; // Basic row
+            const hasSchema = !!item.response.content?.[0]?.schema;
+            if (hasSchema) {
+                const resKey = `res_${item.response.status}`;
+                const isExpanded = !collapsedSchemas.has(resKey);
+                if (!isExpanded) {
+                    height += 1;
+                }
+                else {
+                    const lines = formatSchemaFull(item.response.content[0].schema, document, 10);
+                    const maxHeight = Math.floor((stdout?.rows || 24) * 0.3);
+                    const visibleLinesCount = Math.min(lines.length, maxHeight);
+                    height += 1 + visibleLinesCount + (lines.length > maxHeight ? 1 : 0) + 2; // +1 for title, +2 for borders
+                }
+            }
+        }
+        return height;
+    }, [stdout, focusedFieldIndex, isFocused, collapsedSchemas, document, endpoint]);
     // Flat Items Memoization
     const { flatItems, paramIndexToFlatIndex } = useMemo(() => {
         // 파라미터 분류
@@ -67,44 +187,83 @@ export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex
             items.push({ type: 'section', text: '▸ Request Body' });
             indexMap[currentIndex] = items.length;
             items.push({ type: 'requestBody', endpoint, globalIndex: currentIndex });
+            currentIndex++;
+        }
+        // Responses 섹션 추가
+        if (endpoint.responses && endpoint.responses.length > 0) {
+            items.push({ type: 'section', text: '▸ Responses' });
+            endpoint.responses.forEach((res) => {
+                const globalIndex = currentIndex;
+                indexMap[globalIndex] = items.length;
+                items.push({ type: 'responseItem', response: res, 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);
+    // Dynamic Scroll Logic based on Item Heights
     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;
+        // 현재 포커스된 아이템의 위치와 높이를 파악해야 함.
+        // 하지만 전체 아이템의 높이를 다 계산하는 것은 비효율적일 수 있으나, 아이템 수가 많지 않으므로 가능함.
+        // 여기서는 간단히 scrollOffset을 조정하여 targetItem이 화면 내에 들어오도록 함.
+        setScrollOffset((_currentOffset) => {
+            // 0. Smart Scroll: 최상단(0)부터 현재 타겟까지 다 보여줄 수 있으면 무조건 0 반환
+            let heightFromTop = 0;
+            for (let i = 0; i <= targetFlatIndex; i++) {
+                heightFromTop += getItemHeight(flatItems[i]);
+            }
+            if (heightFromTop <= contentHeight) {
+                return 0;
             }
-            // 포커스가 보이는 영역 밖에 있을 때만 스크롤 조정
-            if (targetFlatIndex < currentOffset) {
-                // 포커스가 위에 있으면 포커스를 상단에 맞춤
-                return Math.max(0, targetFlatIndex);
+            // 1. 타겟 아이템이 현재 오프셋보다 위에 있으면 타겟을 맨 위로 (즉시 위로 스크롤)
+            if (targetFlatIndex < _currentOffset) {
+                return targetFlatIndex;
             }
-            else if (targetFlatIndex >= currentOffset + visibleItemCount) {
-                // 포커스가 아래에 있으면 포커스를 하단에 맞춤
-                return Math.max(0, targetFlatIndex - visibleItemCount + 1);
+            // 2. 타겟 아이템이 현재 화면 범위를 넘어 아래에 있는 경우
+            // 타겟의 '바닥'이 화면 맨 아래에 닿을 정도까지만 최소한으로 스크롤 내림
+            // 이렇게 하면 타겟 위쪽의 컨텐츠가 최대한 많이 남음
+            let currentViewHeight = 0;
+            for (let i = _currentOffset; i <= targetFlatIndex; i++) {
+                currentViewHeight += getItemHeight(flatItems[i]);
+            }
+            if (currentViewHeight > contentHeight) {
+                // 화면을 넘침 -> 타겟이 맨 아래에 오도록 하는 새로운 시작점(S) 계산
+                let acc = 0;
+                for (let i = targetFlatIndex; i >= 0; i--) {
+                    const h = getItemHeight(flatItems[i]);
+                    if (acc + h > contentHeight) {
+                        // 이 아이템(i)을 넣으면 화면을 넘어가므로 i+1이 최적의 시작점
+                        return i + 1;
+                    }
+                    acc += h;
+                }
+                return 0;
             }
-            return currentOffset;
+            // 이미 화면 안에 잘 있으면 현재 오프셋 유지
+            return _currentOffset;
         });
-    }, [focusedFieldIndex, visibleItemCount, paramIndexToFlatIndex]);
+    }, [
+        focusedFieldIndex,
+        contentHeight,
+        paramIndexToFlatIndex,
+        flatItems,
+        collapsedSchemas,
+        isFocused,
+        localValue,
+        getItemHeight,
+    ]);
     // 포커스 변경시 로컬 값 업데이트
     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]);
@@ -115,22 +274,31 @@ export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex
         const flatIndex = paramIndexToFlatIndex[focusedFieldIndex];
         const item = flatItems[flatIndex];
         if (item?.type === 'requestBody') {
-            setExpandedSchemas((prev) => {
+            setCollapsedSchemas((prev) => {
                 const next = new Set(prev);
-                next.add('__requestBody__');
+                next.delete('__requestBody__');
                 return next;
             });
-            setSchemaScrollOffset(0);
+            setSchemaScrollOffsets((prev) => ({ ...prev, __requestBody__: 0 }));
         }
         else if (item?.type === 'param' &&
             item.param.schema &&
             isReferenceObject(item.param.schema)) {
-            setExpandedSchemas((prev) => {
+            setCollapsedSchemas((prev) => {
                 const next = new Set(prev);
-                next.add(item.param.name);
+                next.delete(item.param.name);
                 return next;
             });
-            setSchemaScrollOffset(0);
+            setSchemaScrollOffsets((prev) => ({ ...prev, [item.param.name]: 0 }));
+        }
+        else if (item?.type === 'responseItem') {
+            const resKey = `res_${item.response.status}`;
+            setCollapsedSchemas((prev) => {
+                const next = new Set(prev);
+                next.delete(resKey);
+                return next;
+            });
+            setSchemaScrollOffsets((prev) => ({ ...prev, [resKey]: 0 }));
         }
     };
     const handleCollapseSchema = () => {
@@ -139,16 +307,24 @@ export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex
         const flatIndex = paramIndexToFlatIndex[focusedFieldIndex];
         const item = flatItems[flatIndex];
         if (item?.type === 'requestBody') {
-            setExpandedSchemas((prev) => {
+            setCollapsedSchemas((prev) => {
                 const next = new Set(prev);
-                next.delete('__requestBody__');
+                next.add('__requestBody__');
                 return next;
             });
         }
         else if (item?.type === 'param') {
-            setExpandedSchemas((prev) => {
+            setCollapsedSchemas((prev) => {
                 const next = new Set(prev);
-                next.delete(item.param.name);
+                next.add(item.param.name);
+                return next;
+            });
+        }
+        else if (item?.type === 'responseItem') {
+            const resKey = `res_${item.response.status}`;
+            setCollapsedSchemas((prev) => {
+                const next = new Set(prev);
+                next.add(resKey);
                 return next;
             });
         }
@@ -159,64 +335,171 @@ export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex
         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 (item?.type === 'requestBody' && !collapsedSchemas.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)));
+                const lines = formatSchemaFull(endpoint.requestBody.schema, document, 10);
+                setSchemaScrollOffsets((prev) => {
+                    const current = prev.__requestBody__ || 0;
+                    return {
+                        ...prev,
+                        __requestBody__: Math.min(current + 1, Math.max(0, lines.length - maxHeight)),
+                    };
+                });
             }
         }
-        else if (item?.type === 'param' && expandedSchemas.has(item.param.name)) {
+        else if (item?.type === 'param' && !collapsedSchemas.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 lines = formatSchemaFull(item.param.schema, document, 10);
+                setSchemaScrollOffsets((prev) => {
+                    const current = prev[item.param.name] || 0;
+                    return {
+                        ...prev,
+                        [item.param.name]: Math.min(current + 1, Math.max(0, lines.length - maxHeight)),
+                    };
+                });
+            }
+        }
+        else if (item?.type === 'responseItem') {
+            const resKey = `res_${item.response.status}`;
+            if (!collapsedSchemas.has(resKey)) {
+                const schema = item.response.content?.[0]?.schema;
+                if (schema) {
+                    const lines = formatSchemaFull(schema, document, 10);
+                    setSchemaScrollOffsets((prev) => {
+                        const current = prev[resKey] || 0;
+                        return {
+                            ...prev,
+                            [resKey]: Math.min(current + 1, Math.max(0, lines.length - maxHeight)),
+                        };
+                    });
+                }
             }
         }
     };
     const handleSchemaScrollUp = () => {
-        setSchemaScrollOffset((prev) => Math.max(prev - 1, 0));
+        if (!isFocused || mode !== 'NORMAL')
+            return;
+        const flatIndex = paramIndexToFlatIndex[focusedFieldIndex];
+        const item = flatItems[flatIndex];
+        if (item?.type === 'requestBody') {
+            setSchemaScrollOffsets((prev) => {
+                const current = prev.__requestBody__ || 0;
+                return { ...prev, __requestBody__: Math.max(current - 1, 0) };
+            });
+        }
+        else if (item?.type === 'param') {
+            setSchemaScrollOffsets((prev) => {
+                const current = prev[item.param.name] || 0;
+                return { ...prev, [item.param.name]: Math.max(current - 1, 0) };
+            });
+        }
+        else if (item?.type === 'responseItem') {
+            const resKey = `res_${item.response.status}`;
+            setSchemaScrollOffsets((prev) => {
+                const current = prev[resKey] || 0;
+                return { ...prev, [resKey]: Math.max(current - 1, 0) };
+            });
+        }
+    };
+    const handleEnterInsertMode = () => {
+        if (!isFocused || mode !== 'NORMAL')
+            return;
+        const flatIndex = paramIndexToFlatIndex[focusedFieldIndex];
+        const item = flatItems[flatIndex];
+        const isBodyParam = item?.type === 'requestBody' || (item?.type === 'param' && item.param.in === 'body');
+        if (isBodyParam) {
+            // 1. Request Body인 경우 (OpenAPI 3.0 requestBody OR Swagger 2.0 body param)
+            if (onRequestBodyEdit && onSetMode) {
+                // 값이 없으면 스키마 기반 생성
+                let valueToEdit = requestBodyValue || '';
+                const schema = item.type === 'requestBody' ? endpoint.requestBody?.schema : item.param.schema;
+                // 빈 문자열이거나 공백만 있는 경우에도 스캐폴딩 적용
+                if ((!valueToEdit || valueToEdit.trim() === '') && schema) {
+                    const scaffolded = scaffoldSchema(schema, document);
+                    valueToEdit = JSON.stringify(scaffolded, null, 2);
+                }
+                onRequestBodyEdit(valueToEdit);
+                onSetMode('INSERT');
+            }
+        }
+        else if (item?.type === 'param') {
+            // 2. 일반 파라미터인 경우
+            if (onSetMode) {
+                onSetMode('INSERT');
+            }
+        }
     };
     useKeyPress({
         '>': handleExpandSchema,
         '<': handleCollapseSchema,
         j: handleSchemaScrollDown,
         k: handleSchemaScrollUp,
+        i: handleEnterInsertMode,
     }, mode === 'NORMAL' && isFocused);
     // Render Helpers
-    const renderSchema = (ref) => {
-        const schema = { $ref: ref };
-        const lines = formatSchemaFull(schema, document, 2);
+    const getSchemaName = (schema) => {
+        if (!schema)
+            return null;
+        if (isReferenceObject(schema)) {
+            return schema.$ref.split('/').pop() || null;
+        }
+        return null;
+    };
+    const renderSchemaBox = (lines, scrollKey) => {
+        const offset = schemaScrollOffsets[scrollKey] || 0;
         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" },
+        const visibleLines = lines.slice(offset, offset + maxHeight);
+        return (React.createElement(Box, { marginTop: 0, 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,
+                offset + 1,
                 "-",
-                Math.min(schemaScrollOffset + maxHeight, lines.length),
-                " of",
-                ' ',
+                Math.min(offset + maxHeight, lines.length),
+                " of ",
                 lines.length,
                 " lines"))));
     };
+    const renderSchema = (ref, paramName) => {
+        const schema = { $ref: ref };
+        const lines = formatSchemaFull(schema, document, 10);
+        return renderSchemaBox(lines, paramName);
+    };
     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"))));
+        const lines = formatSchemaFull(endpoint.requestBody.schema, document, 10);
+        return renderSchemaBox(lines, '__requestBody__');
+    };
+    const renderResponseSchema = (response) => {
+        const schema = response.content?.[0]?.schema;
+        if (!schema)
+            return null;
+        const lines = formatSchemaFull(schema, document, 10);
+        const resKey = `res_${response.status}`;
+        return renderSchemaBox(lines, resKey);
     };
     // Rendering
-    const visibleItems = flatItems.slice(scrollOffset, scrollOffset + visibleItemCount);
+    const getVisibleItemsRange = () => {
+        let currentHeight = 0;
+        let startIndex = scrollOffset;
+        let count = 0;
+        // Adjust scrollOffset if focused item is out of view (basic check)
+        // This is handled by useLayoutEffect, but we rely on scrollOffset here.
+        for (let i = startIndex; i < flatItems.length; i++) {
+            const itemHeight = getItemHeight(flatItems[i]);
+            if (currentHeight + itemHeight > contentHeight) {
+                // If the first item itself is larger than contentHeight, we must show it (clipped)
+                if (count === 0) {
+                    count = 1;
+                }
+                break;
+            }
+            currentHeight += itemHeight;
+            count++;
+        }
+        return flatItems.slice(startIndex, startIndex + count);
+    };
+    const visibleItems = getVisibleItemsRange();
     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;
@@ -224,7 +507,7 @@ export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex
     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 },
+            return (React.createElement(Box, { key: key, flexDirection: "column", marginBottom: 0 },
                 React.createElement(Box, null,
                     React.createElement(Text, { bold: true, color: getMethodColor(item.endpoint.method) },
                         "[",
@@ -236,7 +519,7 @@ export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex
                 (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 },
+            return (React.createElement(Box, { key: key, marginTop: 0, marginBottom: 0 },
                 React.createElement(Text, { bold: true, color: "green" }, item.text)));
         }
         if (item.type === 'param') {
@@ -257,7 +540,7 @@ export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex
             const hasSchema = !!(refInfo &&
                 item.param.schema &&
                 isReferenceObject(item.param.schema));
-            const isExpanded = expandedSchemas.has(item.param.name);
+            const isExpanded = !collapsedSchemas.has(item.param.name);
             // Command Hint Calculation
             let commandHint = '';
             if (commandMode) {
@@ -336,27 +619,74 @@ export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex
                             "Schema: ",
                             refInfo,
                             " (Press < to collapse)")),
-                    renderSchema(item.param.schema.$ref)))));
+                    React.createElement(Box, { marginLeft: 2 }, renderSchema(item.param.schema.$ref, item.param.name))))));
         }
         if (item.type === 'requestBody') {
             const isFieldFocused = item.globalIndex === focusedFieldIndex && isFocused;
-            const isExpanded = expandedSchemas.has('__requestBody__');
+            const isExpanded = !collapsedSchemas.has('__requestBody__');
             const hasSchema = !!endpoint.requestBody?.schema;
-            const commandHint = commandMode ? 'rb1' : '';
+            const commandHint = commandMode ? 'rqb1' : '';
             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 },
+                    commandMode && (React.createElement(Box, { width: 8 },
                         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"))),
+                    React.createElement(Text, { color: "yellow", dimColor: true },
+                        "Press > to view ",
+                        getSchemaName(endpoint.requestBody?.schema) || 'schema',
+                        ' ',
+                        "schema"))),
+                hasSchema && isExpanded && (React.createElement(React.Fragment, null,
+                    React.createElement(Box, { marginLeft: 1, marginTop: 0 },
+                        React.createElement(Text, { color: "yellow", dimColor: true },
+                            "Schema: ",
+                            getSchemaName(endpoint.requestBody?.schema) || 'unknown',
+                            " (Press < to collapse)")),
+                    React.createElement(Box, { marginLeft: 1 }, renderRequestBodySchema())))));
+        }
+        if (item.type === 'responseItem') {
+            const isFieldFocused = item.globalIndex === focusedFieldIndex && isFocused;
+            const resKey = `res_${item.response.status}`;
+            const isExpanded = !collapsedSchemas.has(resKey);
+            const hasSchema = !!item.response.content?.[0]?.schema;
+            // Responses 시작 위치 계산 (힌트용)
+            const responsesStartIndex = pathParamCount +
+                queryParamCount +
+                headerParamCount +
+                endpoint.parameters.filter((p) => p.in === 'body' || p.in === 'formData').length +
+                (endpoint.requestBody && endpoint.parameters.filter((p) => p.in === 'body').length === 0
+                    ? 1
+                    : 0);
+            const rbIndex = item.globalIndex - responsesStartIndex + 1;
+            return (React.createElement(Box, { key: key, flexDirection: "column" },
+                React.createElement(Box, { flexDirection: "row", backgroundColor: isFieldFocused ? 'green' : undefined, marginLeft: 1 },
+                    commandMode && (React.createElement(Box, { width: 8 },
+                        React.createElement(Text, { color: "yellow" },
+                            "[",
+                            `rb${rbIndex}`,
+                            "]"))),
+                    React.createElement(Text, { color: isFieldFocused ? 'black' : getStatusColor(item.response.status), bold: true }, item.response.status),
+                    React.createElement(Text, { color: isFieldFocused ? 'black' : 'white' },
+                        ' ',
+                        item.response.description || '(No description)')),
+                hasSchema && !isExpanded && (React.createElement(Box, { marginLeft: 1, marginTop: 0 },
+                    React.createElement(Text, { color: "yellow", dimColor: true },
+                        "Press > to view",
+                        ' ',
+                        getSchemaName(item.response.content?.[0]?.schema) || 'schema',
+                        " schema"))),
                 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()))));
+                        React.createElement(Text, { color: "yellow", dimColor: true },
+                            "Schema: ",
+                            getSchemaName(item.response.content?.[0]?.schema) || 'unknown',
+                            ' ',
+                            "(Press < to collapse)")),
+                    React.createElement(Box, { marginLeft: 1 }, renderResponseSchema(item.response))))));
         }
         return null;
     })));

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

@@ -3,13 +3,14 @@
  */
 import React from 'react';
 import { ApiResponse, AppMode } from '../../types/app-state.js';
-import { Endpoint } from '../../types/openapi.js';
+import { Endpoint, OpenAPIDocument } from '../../types/openapi.js';
 interface RightPanelProps {
     activeRequestTab: 'headers' | 'body' | 'query';
     activeResponseTab: 'body' | 'headers' | 'cookies' | 'curl';
     activePanel: 'left' | 'request' | 'response';
     response: ApiResponse | null;
     endpoint: Endpoint;
+    document?: OpenAPIDocument;
     parameterValues: Record<string, string>;
     requestBody: string;
     requestHeaders: Record<string, string>;
@@ -18,5 +19,5 @@ interface RightPanelProps {
     isLoading: boolean;
     commandMode?: boolean;
 }
-export default function RightPanel({ activeRequestTab, activeResponseTab, activePanel, response, endpoint, parameterValues, requestBody, requestHeaders, baseURL, mode, isLoading, commandMode, }: RightPanelProps): React.JSX.Element;
+export default function RightPanel({ activeRequestTab, activeResponseTab, activePanel, response, endpoint, document, parameterValues, requestBody, requestHeaders, baseURL, mode, isLoading, commandMode, }: RightPanelProps): React.JSX.Element;
 export {};