@gomjellie/lazyapi 0.0.2 → 0.0.4

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

@@ -2,12 +2,17 @@
  * API Detail 우측 패널 - Request/Response 분할
  */
 import React, { useState, useEffect, useMemo } from 'react';
-import { Box, Text, useStdout } from 'ink';
+import { Box, Text, useStdout, useStdin } from 'ink';
 import { useKeyPress } from '../../hooks/useKeyPress.js';
 import { useAppDispatch } from '../../store/hooks.js';
-import { detailSetPanel } from '../../store/appSlice.js';
+import { detailSetPanel, detailSetBody, detailSetSubFocus, setMode } from '../../store/appSlice.js';
+import { spawnSync } from 'child_process';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+import { scaffoldSchema } from '../../utils/schema-scaffolder.js';
 import Spinner from 'ink-spinner';
-const TabHeader = ({ tabs, active, isFocused, shortcutPrefix, commandMode, }) => (React.createElement(Box, { marginBottom: 0, borderStyle: "single", borderBottom: false, borderTop: false, borderLeft: false, borderRight: false, gap: 1 }, tabs.map((t, index) => {
+const TabHeader = ({ tabs, active, isFocused, shortcutPrefix, commandMode }) => (React.createElement(Box, { marginBottom: 0, borderStyle: "single", borderBottom: false, borderTop: false, borderLeft: false, borderRight: false, gap: 1 }, tabs.map((t, index) => {
     let showHint = false;
     let hintText = '';
     const shouldShowGlobal = commandMode && !!shortcutPrefix;
@@ -22,12 +27,16 @@ const TabHeader = ({ tabs, active, isFocused, shortcutPrefix, commandMode, }) =>
         showHint = true;
         hintText = `[${index + 1}] `;
     }
+    const isActive = t.id === active;
+    const showIndicator = isFocused && isActive;
     return (React.createElement(Box, { key: t.id },
         showHint && React.createElement(Text, { color: "yellow" }, hintText),
-        React.createElement(Text, { bold: t.id === active, color: t.id === active ? 'black' : 'gray', backgroundColor: t.id === active ? 'green' : undefined }, ' ' + t.label + ' ')));
+        React.createElement(Text, { color: "yellow" }, showIndicator ? '>' : ' '),
+        React.createElement(Text, { bold: isActive, underline: showIndicator, color: isActive ? 'black' : 'gray', backgroundColor: isActive ? 'green' : undefined }, t.label + ' ')));
 })));
-export default function RightPanel({ activeRequestTab, activeResponseTab, activePanel, response, endpoint, parameterValues, requestBody, requestHeaders, baseURL, mode, isLoading, commandMode = false, }) {
+export default function RightPanel({ activeRequestTab, activeResponseTab, activePanel, subFocus, response, endpoint, document, parameterValues, requestBody, requestHeaders, baseURL, mode, isLoading, commandMode = false, }) {
     const { stdout } = useStdout();
+    const { isRawModeSupported, setRawMode } = useStdin();
     const dispatch = useAppDispatch();
     // 높이 계산
     const totalHeight = (stdout?.rows || 24) - 4;
@@ -37,9 +46,28 @@ export default function RightPanel({ activeRequestTab, activeResponseTab, active
     // -- Request Box State --
     const [reqScroll, setReqScroll] = useState(0);
     useEffect(() => {
-        // eslint-disable-next-line react-hooks/set-state-in-effect
         setReqScroll(0);
     }, [activeRequestTab, endpoint]);
+    // Request Body 자동 스캐폴딩
+    useEffect(() => {
+        if (activeRequestTab === 'body' && activePanel === 'request' && !requestBody) {
+            // 1. requestBody 필드 (OpenAPI 3.0)
+            if (endpoint.requestBody?.schema) {
+                const scaffolded = scaffoldSchema(endpoint.requestBody.schema, document);
+                const value = JSON.stringify(scaffolded, null, 2);
+                dispatch(detailSetBody(value));
+                return;
+            }
+            // 2. in: body 파라미터 (Swagger 2.0)
+            const bodyParam = endpoint.parameters.find(p => p.in === 'body');
+            if (bodyParam && bodyParam.schema) {
+                const scaffolded = scaffoldSchema(bodyParam.schema, document);
+                const value = JSON.stringify(scaffolded, null, 2);
+                dispatch(detailSetBody(value));
+                return;
+            }
+        }
+    }, [activeRequestTab, activePanel, requestBody, endpoint, document, dispatch]);
     // Request Content Lines 계산
     const getRequestLines = () => {
         if (activeRequestTab === 'headers') {
@@ -59,41 +87,91 @@ export default function RightPanel({ activeRequestTab, activeResponseTab, active
     // Request Scroll Handler (j/k)
     useKeyPress({
         j: () => {
-            const maxScroll = Math.max(0, reqTotalLines - contentHeight);
-            if (reqScroll < maxScroll) {
-                setReqScroll((prev) => Math.min(prev + 1, maxScroll));
-            }
-            else {
-                // 스크롤이 끝에 도달하면 Response 패널로 이동
-                dispatch(detailSetPanel('response'));
-            }
+            setReqScroll((prev) => {
+                const maxScroll = Math.max(0, reqTotalLines - contentHeight);
+                if (prev < maxScroll) {
+                    return Math.min(prev + 1, maxScroll);
+                }
+                else {
+                    // 스크롤이 끝에 도달하면 Response 패널로 이동
+                    dispatch(detailSetPanel('response'));
+                    dispatch(detailSetSubFocus('TITLE'));
+                    return prev;
+                }
+            });
         },
         k: () => {
-            setReqScroll((prev) => Math.max(prev - 1, 0));
+            setReqScroll((prev) => {
+                if (prev > 0)
+                    return prev - 1;
+                dispatch(detailSetSubFocus('TABS'));
+                return 0;
+            });
         },
-    }, mode === 'NORMAL' && activePanel === 'request');
+    }, mode === 'NORMAL' && activePanel === 'request' && subFocus === 'CONTENT');
+    const openExternalEditor = () => {
+        try {
+            const tempFile = path.join(os.tmpdir(), `lazyapi-body-${Date.now()}.json`);
+            fs.writeFileSync(tempFile, requestBody || '');
+            const editor = process.env.EDITOR || 'vim';
+            // Ink의 Raw 모드를 해제하고 stdin을 일시 중지하여 외부 에디터에 제어권 이양
+            if (isRawModeSupported) {
+                setRawMode(false);
+            }
+            process.stdin.pause();
+            try {
+                // 동기적으로 실행하여 에디터 종료까지 대기
+                spawnSync(editor, [tempFile], {
+                    stdio: 'inherit',
+                });
+                if (fs.existsSync(tempFile)) {
+                    const content = fs.readFileSync(tempFile, 'utf-8');
+                    dispatch(detailSetBody(content));
+                    fs.unlinkSync(tempFile);
+                }
+            }
+            catch (innerError) {
+                console.error('Error executing editor:', innerError);
+            }
+            finally {
+                // 에디터 종료 후 stdin 재개 및 Raw 모드 복구
+                process.stdin.resume();
+                if (isRawModeSupported) {
+                    setRawMode(true);
+                }
+                dispatch(setMode('NORMAL'));
+            }
+        }
+        catch (e) {
+            console.error('Failed to open editor', e);
+            dispatch(setMode('NORMAL'));
+        }
+    };
+    // e 키: Request Body 탭이 활성화되어 있으면 항상 에디터 오픈 (NORMAL/INSERT 모두)
+    useKeyPress({
+        e: openExternalEditor,
+    }, activePanel === 'request' && activeRequestTab === 'body');
     // -- Response Box State --
     const [resScroll, setResScroll] = useState(0);
     useEffect(() => {
         // 탭이 변경될 때만 스크롤 리셋 (response 변경 시에는 리셋하지 않음)
-        // eslint-disable-next-line react-hooks/set-state-in-effect
         setResScroll(0);
     }, [activeResponseTab]);
     // Curl Command 생성 (메모이제이션)
     const curlCommand = useMemo(() => {
-        let path = endpoint.path;
+        let pathStr = endpoint.path;
         endpoint.parameters
             .filter((p) => p.in === 'path')
             .forEach((param) => {
             const value = parameterValues[param.name] || '';
-            path = path.replace(`{${param.name}}`, value);
+            pathStr = pathStr.replace(`{${param.name}}`, value);
         });
         const queryParams = endpoint.parameters
             .filter((p) => p.in === 'query')
             .filter((param) => parameterValues[param.name])
             .map((param) => `${param.name}=${encodeURIComponent(parameterValues[param.name])}`)
             .join('&');
-        const url = queryParams ? `${baseURL}${path}?${queryParams}` : `${baseURL}${path}`;
+        const url = queryParams ? `${baseURL}${pathStr}?${queryParams}` : `${baseURL}${pathStr}`;
         let headerStr = '';
         Object.entries(requestHeaders).forEach(([key, val]) => {
             headerStr += ` -H '${key}: ${val}'`;
@@ -127,21 +205,23 @@ export default function RightPanel({ activeRequestTab, activeResponseTab, active
     // Response Scroll Handler (j/k)
     useKeyPress({
         j: () => {
-            const maxScroll = Math.max(0, resTotalLines - contentHeight);
-            if (resScroll < maxScroll) {
-                setResScroll((prev) => Math.min(prev + 1, maxScroll));
-            }
+            setResScroll((prev) => {
+                const maxScroll = Math.max(0, resTotalLines - contentHeight);
+                if (prev < maxScroll) {
+                    return Math.min(prev + 1, maxScroll);
+                }
+                return prev;
+            });
         },
         k: () => {
-            if (resScroll > 0) {
-                setResScroll((prev) => Math.max(prev - 1, 0));
-            }
-            else {
-                // 스크롤이 맨 위에 도달하면 Request 패널로 이동
-                dispatch(detailSetPanel('request'));
-            }
+            setResScroll((prev) => {
+                if (prev > 0)
+                    return prev - 1;
+                dispatch(detailSetSubFocus('TABS'));
+                return 0;
+            });
         },
-    }, mode === 'NORMAL' && activePanel === 'response');
+    }, mode === 'NORMAL' && activePanel === 'response' && subFocus === 'CONTENT');
     // 렌더링 헬퍼
     const renderLines = (lines, offset, limit) => {
         const visible = lines.slice(offset, offset + limit);
@@ -166,9 +246,22 @@ export default function RightPanel({ activeRequestTab, activeResponseTab, active
             return renderKeyValue(requestHeaders, reqScroll, contentHeight);
         }
         if (activeRequestTab === 'body') {
-            if (!requestBody)
-                return React.createElement(Text, { color: "gray" }, "No body");
-            return renderLines(requestBody.split('\n'), reqScroll, contentHeight);
+            let content = null;
+            if (!requestBody) {
+                content = React.createElement(Text, { color: "gray" }, "No body");
+            }
+            else {
+                const lines = requestBody.split('\n');
+                content = renderLines(lines, reqScroll, contentHeight);
+            }
+            // Body 탭이고 Request 패널 활성 상태면 항상 안내 문구 표시
+            if (activePanel === 'request') {
+                return (React.createElement(Box, { flexDirection: "column" },
+                    content,
+                    React.createElement(Box, { borderStyle: "single", borderColor: "yellow", marginTop: 0 },
+                        React.createElement(Text, { color: "yellow" }, "Press 'e' key to open external editor."))));
+            }
+            return content;
         }
         if (activeRequestTab === 'query') {
             const queries = endpoint.parameters.filter((p) => p.in === 'query');
@@ -226,17 +319,23 @@ export default function RightPanel({ activeRequestTab, activeResponseTab, active
     ];
     return (React.createElement(Box, { flexDirection: "column", width: "50%", marginLeft: 1 },
         React.createElement(Box, { flexDirection: "column", height: requestBoxHeight, borderStyle: "single", borderColor: activePanel === 'request' ? 'green' : 'gray', paddingX: 1 },
-            React.createElement(Box, { justifyContent: "space-between", height: 1 },
-                React.createElement(Text, { bold: true, color: activePanel === 'request' ? 'green' : 'white' }, "Request"),
+            React.createElement(Box, { justifyContent: "space-between", height: 1, marginBottom: 0 },
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: activePanel === 'request' && subFocus === 'TITLE' ? 'yellow' : 'white', bold: activePanel === 'request' && subFocus === 'TITLE' },
+                        activePanel === 'request' && subFocus === 'TITLE' ? '>' : ' ',
+                        "Request")),
                 React.createElement(Box, { width: 15 },
                     React.createElement(Text, { color: "gray" }, reqTotalLines > contentHeight
                         ? `${reqScroll + 1}-${Math.min(reqScroll + contentHeight, reqTotalLines)}/${reqTotalLines}`
                         : ' '))),
-            React.createElement(TabHeader, { tabs: reqTabs, active: activeRequestTab, isFocused: activePanel === 'request', shortcutPrefix: "rq", commandMode: commandMode }),
-            React.createElement(Box, { flexGrow: 1, flexDirection: "column", overflow: "hidden" }, renderRequestContent())),
+            React.createElement(TabHeader, { tabs: reqTabs, active: activeRequestTab, isFocused: activePanel === 'request' && subFocus === 'TABS', shortcutPrefix: "rq", commandMode: commandMode }),
+            React.createElement(Box, { flexGrow: 1, flexDirection: "column", overflow: "hidden", borderStyle: "single", borderColor: activePanel === 'request' && subFocus === 'CONTENT' ? 'green' : 'gray', paddingX: 1 }, renderRequestContent())),
         React.createElement(Box, { flexDirection: "column", height: responseBoxHeight, borderStyle: "single", borderColor: activePanel === 'response' ? 'green' : 'gray', paddingX: 1 },
-            React.createElement(Box, { justifyContent: "space-between", height: 1 },
-                React.createElement(Text, { bold: true, color: activePanel === 'response' ? 'green' : 'white' }, "Response"),
+            React.createElement(Box, { justifyContent: "space-between", height: 1, marginBottom: 0 },
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: activePanel === 'response' && subFocus === 'TITLE' ? 'yellow' : 'white', bold: activePanel === 'response' && subFocus === 'TITLE' },
+                        activePanel === 'response' && subFocus === 'TITLE' ? '>' : ' ',
+                        "Response")),
                 React.createElement(Box, { width: 30, flexDirection: "row", justifyContent: "flex-end" },
                     response ? (React.createElement(Text, { color: response.status < 300 ? 'green' : 'red' },
                         response.status,
@@ -246,6 +345,6 @@ export default function RightPanel({ activeRequestTab, activeResponseTab, active
                         React.createElement(Text, { color: "gray" }, resTotalLines > contentHeight
                             ? `${resScroll + 1}-${Math.min(resScroll + contentHeight, resTotalLines)}/${resTotalLines}`
                             : ' ')))),
-            React.createElement(TabHeader, { tabs: resTabs, active: activeResponseTab, isFocused: activePanel === 'response', shortcutPrefix: "rs", commandMode: commandMode }),
-            React.createElement(Box, { flexGrow: 1, flexDirection: "column", overflow: "hidden" }, renderResponseContent()))));
+            React.createElement(TabHeader, { tabs: resTabs, active: activeResponseTab, isFocused: activePanel === 'response' && subFocus === 'TABS', shortcutPrefix: "rs", commandMode: commandMode }),
+            React.createElement(Box, { flexGrow: 1, flexDirection: "column", overflow: "hidden", borderStyle: "single", borderColor: activePanel === 'response' && subFocus === 'CONTENT' ? 'green' : 'gray', paddingX: 1 }, renderResponseContent()))));
 }

package/dist/components/list-view/EndpointList.js

@@ -1,10 +1,14 @@
 /**
  * 엔드포인트 목록 컴포넌트
  */
-import React, { useState } from 'react';
+import React from 'react';
 import { Box, Text, useStdout } from 'ink';
+import { useAppDispatch, useAppSelector } from '../../store/hooks.js';
+import { listScroll } from '../../store/appSlice.js';
 export default function EndpointList({ endpoints, selectedIndex, commandMode = false }) {
     const { stdout } = useStdout();
+    const dispatch = useAppDispatch();
+    const scrollOffset = useAppSelector((state) => state.app.list.scrollOffset);
     // 가용 높이 계산: 터미널 높이 - 헤더(2) - 푸터(2) - 메인박스보더(2) - 메인박스패딩(1) - 필터바(1) - 검색바(1) = 9
     // 안전하게 여유를 두어 계산 (-9)
     const availableHeight = (stdout?.rows || 24) - 9;
@@ -21,18 +25,19 @@ export default function EndpointList({ endpoints, selectedIndex, commandMode = f
     // Path가 중요하므로 더 많은 공간 배정
     const pathWidth = Math.floor(availableContentWidth * 0.7);
     const descriptionWidth = Math.max(0, availableContentWidth - pathWidth);
-    const [scrollOffset, setScrollOffset] = useState(0);
     // 렌더링 중에 스크롤 오프셋 조정 (Derived State Pattern)
-    if (selectedIndex >= 0) {
-        const visibleStart = scrollOffset;
-        const visibleEnd = scrollOffset + availableHeight - 1;
-        if (selectedIndex < visibleStart) {
-            setScrollOffset(selectedIndex);
+    React.useEffect(() => {
+        if (selectedIndex >= 0) {
+            const visibleStart = scrollOffset;
+            const visibleEnd = scrollOffset + availableHeight - 1;
+            if (selectedIndex < visibleStart) {
+                dispatch(listScroll(selectedIndex));
+            }
+            else if (selectedIndex > visibleEnd) {
+                dispatch(listScroll(selectedIndex - availableHeight + 1));
+            }
         }
-        else if (selectedIndex > visibleEnd) {
-            setScrollOffset(selectedIndex - availableHeight + 1);
-        }
-    }
+    }, [selectedIndex, scrollOffset, availableHeight, dispatch]);
     const getMethodColor = (method) => {
         const colors = {
             GET: 'blue',

package/dist/components/list-view/ListView.js

@@ -2,16 +2,17 @@
  * API 목록 화면
  */
 import React, { useMemo } from 'react';
-import { Box, useStdout } from 'ink';
+import { Box, Text, useStdout } from 'ink';
 import { useAppSelector, useAppDispatch } from '../../store/hooks.js';
-import { setMode, listSelect, listSetFilter, listSetTag, listSetFocus, listSelectTag, listSetSearch, listSetTagSearch, } from '../../store/appSlice.js';
+import { setMode, listSelect, listSetMethodFilter, listSetTag, listSetFocus, listSelectTag, listSelectMethod, listSetSearch, listSetTagSearch, } from '../../store/appSlice.js';
+import { navigateUp, navigateDown, navigateLeft, navigateRight, } from '../../store/navigationActions.js';
 import { useNavigation } from '../../hooks/useNavigation.js';
 import { useKeyPress } from '../../hooks/useKeyPress.js';
 import { OpenAPIParserService } from '../../services/openapi-parser.js';
 import StatusBar from '../common/StatusBar.js';
 import KeybindingFooter from '../common/KeybindingFooter.js';
 import EndpointList from './EndpointList.js';
-import FilterBar from './FilterBar.js';
+import MethodsBar from './MethodsBar.js';
 import SearchBar from './SearchBar.js';
 import Explorer from './Explorer.js';
 import { setCommandInput } from '../../store/appSlice.js';
@@ -43,15 +44,15 @@ export default function ListView() {
             filtered = filtered.filter((ep) => ep.tags?.includes(list.activeTag));
         }
         // 메서드 필터
-        if (list.activeFilter !== 'ALL') {
-            filtered = parser.filterEndpoints(filtered, list.activeFilter);
+        if (list.activeMethod !== 'ALL') {
+            filtered = parser.filterByMethod(filtered, list.activeMethod);
         }
         // 검색
         if (list.searchQuery) {
             filtered = parser.searchEndpoints(filtered, list.searchQuery);
         }
         return filtered;
-    }, [list.activeFilter, list.searchQuery, list.activeTag, endpoints, parser]);
+    }, [list.activeMethod, list.searchQuery, list.activeTag, endpoints, parser]);
     // 커맨드 실행 핸들러
     const handleCommandSubmit = (cmd) => {
         // 1. 종료 명령어 처리
@@ -72,11 +73,12 @@ export default function ListView() {
                 }
             }
             else if (type === 'm') {
-                // Filter (Method)
-                const filters = ['ALL', 'GET', 'POST', 'PUT', 'DELETE', 'PATCH'];
-                if (targetIndex >= 0 && targetIndex < filters.length) {
-                    dispatch(listSetFilter(filters[targetIndex]));
-                    dispatch(listSetFocus('LIST'));
+                // Method selection
+                const methods = ['ALL', 'GET', 'POST', 'PUT', 'DELETE', 'PATCH'];
+                if (targetIndex >= 0 && targetIndex < methods.length) {
+                    dispatch(listSetMethodFilter(methods[targetIndex]));
+                    dispatch(listSelectMethod(targetIndex));
+                    dispatch(listSetFocus('METHODS'));
                 }
             }
             else if (type === 'e') {
@@ -99,11 +101,10 @@ export default function ListView() {
                 }
             }
             else {
-                // LIST focus: Filter selection
-                // 원래 LIST 포커스일 때 숫자 입력은 Filter를 선택하는 로직이었음.
-                const filters = ['ALL', 'GET', 'POST', 'PUT', 'DELETE', 'PATCH'];
-                if (targetIndex >= 0 && targetIndex < filters.length) {
-                    dispatch(listSetFilter(filters[targetIndex]));
+                // LIST focus: Method selection
+                const methods = ['ALL', 'GET', 'POST', 'PUT', 'DELETE', 'PATCH'];
+                if (targetIndex >= 0 && targetIndex < methods.length) {
+                    dispatch(listSetMethodFilter(methods[targetIndex]));
                 }
             }
             dispatch(setMode('NORMAL'));
@@ -115,30 +116,16 @@ export default function ListView() {
     // 키보드 입력 처리
     useKeyPress({
         onTab: () => {
-            const newFocus = list.focus === 'LIST' ? 'TAGS' : 'LIST';
-            dispatch(listSetFocus(newFocus));
+            const focusCycle = ['TAGS', 'METHODS', 'LIST'];
+            const currentIndex = focusCycle.indexOf(list.focus);
+            const nextIndex = (currentIndex + 1) % focusCycle.length;
+            dispatch(listSetFocus(focusCycle[nextIndex]));
         },
         j: () => {
-            if (list.focus === 'TAGS') {
-                const nextIndex = Math.min(list.selectedTagIndex + 1, filteredTags.length - 1);
-                dispatch(listSelectTag(nextIndex));
-            }
-            else {
-                // 다음 항목
-                const nextIndex = Math.min(list.selectedIndex + 1, filteredEndpoints.length - 1);
-                dispatch(listSelect(nextIndex));
-            }
+            dispatch(navigateDown());
         },
         k: () => {
-            if (list.focus === 'TAGS') {
-                const prevIndex = Math.max(list.selectedTagIndex - 1, 0);
-                dispatch(listSelectTag(prevIndex));
-            }
-            else {
-                // 이전 항목
-                const prevIndex = Math.max(list.selectedIndex - 1, 0);
-                dispatch(listSelect(prevIndex));
-            }
+            dispatch(navigateUp());
         },
         // Page Up ({)
         '{': () => {
@@ -192,38 +179,27 @@ export default function ListView() {
                 if (actualTag !== list.activeTag) {
                     dispatch(listSetTag(actualTag));
                 }
-                // 포커스 유지 (Enter는 선택만 수행)
             }
-            else {
-                // 선택한 엔드포인트 상세 보기
-                const selected = filteredEndpoints[list.selectedIndex];
-                if (selected) {
-                    goToDetail(selected);
+            else if (list.focus === 'METHODS') {
+                const methods = ['ALL', 'GET', 'POST', 'PUT', 'DELETE', 'PATCH'];
+                const selectedMethod = methods[list.focusedMethodIndex];
+                if (selectedMethod !== list.activeMethod) {
+                    dispatch(listSetMethodFilter(selectedMethod));
                 }
             }
-        },
-        l: () => {
-            if (list.focus === 'TAGS') {
-                const tag = filteredTags[list.selectedTagIndex];
-                const actualTag = tag === 'Overview' ? null : tag;
-                // 다른 태그를 선택한 경우에만 태그 변경 (selectedIndex 리셋됨)
-                if (actualTag !== list.activeTag) {
-                    dispatch(listSetTag(actualTag));
-                }
-                // l 키는 오른쪽 패널로 이동
-                dispatch(listSetFocus('LIST'));
-            }
             else {
+                // 상세 페이지 이동은 엔터로만 작동
                 const selected = filteredEndpoints[list.selectedIndex];
                 if (selected) {
                     goToDetail(selected);
                 }
             }
         },
+        l: () => {
+            dispatch(navigateRight());
+        },
         h: () => {
-            if (list.focus === 'LIST') {
-                dispatch(listSetFocus('TAGS'));
-            }
+            dispatch(navigateLeft());
         },
     }, mode === 'NORMAL');
     // Command 모드 처리
@@ -290,9 +266,15 @@ export default function ListView() {
         React.createElement(Box, { flexDirection: "row", flexGrow: 1, overflow: "hidden" },
             React.createElement(Box, null,
                 React.createElement(Explorer, { tags: tags, selectedTagIndex: list.selectedTagIndex, activeTag: list.activeTag, isFocused: list.focus === 'TAGS', searchQuery: list.tagSearchQuery, isSearchMode: mode === 'TAG_SEARCH', commandMode: mode === 'COMMAND', onSearchChange: (query) => dispatch(listSetTagSearch(query)) })),
-            React.createElement(Box, { flexDirection: "column", flexGrow: 1, marginLeft: 1, borderStyle: "single", borderColor: list.focus === 'LIST' ? 'green' : 'gray', paddingX: 1, paddingBottom: 1, paddingTop: 0 },
+            React.createElement(Box, { flexDirection: "column", flexGrow: 1, marginLeft: 1, borderStyle: "single", borderColor: list.focus === 'LIST' || list.focus === 'METHODS' || list.focus === 'TITLE'
+                    ? 'green'
+                    : 'gray', paddingX: 1, paddingBottom: 1, paddingTop: 0 },
+                React.createElement(Box, { marginBottom: 0 },
+                    React.createElement(Text, { color: list.focus === 'TITLE' ? 'yellow' : 'white', bold: list.focus === 'TITLE' },
+                        list.focus === 'TITLE' ? '>' : ' ',
+                        "Endpoints")),
                 React.createElement(Box, { flexDirection: "row", alignItems: "center", gap: 2 },
-                    React.createElement(FilterBar, { activeFilter: list.activeFilter, commandMode: mode === 'COMMAND', onFilterChange: (filter) => dispatch(listSetFilter(filter)) })),
+                    React.createElement(MethodsBar, { activeMethod: list.activeMethod, commandMode: mode === 'COMMAND', isFocused: list.focus === 'METHODS', focusedIndex: list.focusedMethodIndex, onMethodChange: (method) => dispatch(listSetMethodFilter(method)) })),
                 React.createElement(SearchBar, { query: list.searchQuery, onQueryChange: (query) => dispatch(listSetSearch(query)), isSearchMode: mode === 'SEARCH' }),
                 React.createElement(Box, { flexGrow: 1, marginTop: 0, overflow: "hidden" },
                     React.createElement(EndpointList, { endpoints: filteredEndpoints, selectedIndex: list.selectedIndex, commandMode: mode === 'COMMAND' })))),

package/dist/components/list-view/MethodsBar.d.ts

@@ -0,0 +1,14 @@
+/**
+ * HTTP 메서드 선택 바 컴포넌트
+ */
+import React from 'react';
+import { HttpMethod } from '../../types/openapi.js';
+interface MethodsBarProps {
+    activeMethod: HttpMethod | 'ALL';
+    commandMode?: boolean;
+    onMethodChange: (method: HttpMethod | 'ALL') => void;
+    isFocused?: boolean;
+    focusedIndex?: number;
+}
+export default function MethodsBar({ activeMethod, commandMode, onMethodChange: _onMethodChange, isFocused, focusedIndex }: MethodsBarProps): React.JSX.Element;
+export {};

package/dist/components/list-view/MethodsBar.js

@@ -0,0 +1,36 @@
+/**
+ * HTTP 메서드 선택 바 컴포넌트
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { HTTP_METHODS } from '../../types/openapi.js';
+export default function MethodsBar({ activeMethod, commandMode = false, onMethodChange: _onMethodChange, isFocused = false, focusedIndex = 0 }) {
+    const methods = ['ALL', ...HTTP_METHODS];
+    const getMethodColor = (method) => {
+        if (method === 'ALL')
+            return 'green';
+        const colors = {
+            GET: 'blue',
+            POST: 'green',
+            PUT: 'yellow',
+            DELETE: 'red',
+            PATCH: 'magenta',
+            OPTIONS: 'cyan',
+            HEAD: 'gray',
+            TRACE: 'white',
+        };
+        return colors[method] || 'white';
+    };
+    return (React.createElement(Box, { paddingX: 1, paddingY: 0, gap: 1, height: 1 }, methods.slice(0, 6).map((method, index) => {
+        const isActive = method === activeMethod;
+        const isActuallyFocused = isFocused && index === focusedIndex;
+        const color = getMethodColor(method);
+        return (React.createElement(Box, { key: method, gap: 0 },
+            commandMode && React.createElement(Text, { color: "yellow" },
+                "m",
+                index + 1),
+            React.createElement(Text, { color: "yellow" }, isActuallyFocused ? '>' : ' '),
+            React.createElement(Text, { backgroundColor: isActive ? color : undefined, color: isActive ? 'black' : isActuallyFocused ? 'yellow' : 'gray', bold: isActive || isActuallyFocused, underline: isActuallyFocused }, method),
+            React.createElement(Text, null, " ")));
+    })));
+}