@gomjellie/lazyapi 0.0.3 → 0.0.4

package/README.md

@@ -1,16 +1,15 @@
 # lazyapi
 
-![demo](https://github.com/user-attachments/assets/ed95f068-09da-4226-91fd-430027258b31)
-
-**⚠️ Work in Progress**
-
 <div align="center">
 
-A **Vim-style TUI (Terminal User Interface)** tool for exploring Swagger/OpenAPI documents and testing APIs in the terminal
+A **Vim-style TUI (Terminal User Interface)** tool  
+for exploring Swagger/OpenAPI documents and testing APIs in the terminal
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
 [![Node Version](https://img.shields.io/badge/node-%3E%3D20.0.0-brightgreen)](https://nodejs.org)
 
+![demo](https://github.com/user-attachments/assets/ed95f068-09da-4226-91fd-430027258b31)
+
 </div>
 
 ---
@@ -57,7 +56,7 @@ lazyapi openapi.json
 # YAML file
 lazyapi swagger.yaml
 
-# URL (coming soon)
+# URL
 lazyapi https://api.example.com/openapi.json
 ```
 
@@ -83,6 +82,7 @@ lazyapi https://api.example.com/openapi.json
 | Key        | Description                                           |
 | ---------- | ----------------------------------------------------- |
 | Text input | Enter search query (searches path, description, tags) |
+| `Enter`    | Apply search and update results                       |
 | `Esc`      | Cancel search and return to NORMAL mode               |
 
 ### Detail View
@@ -125,7 +125,6 @@ lazyapi https://api.example.com/openapi.json
 
 ## 📝 Future Plans
 
-- [ ] Load OpenAPI documents from URL
 - [ ] Multiple environment support (dev, staging, prod)
 - [ ] Request history storage
 - [ ] Favorites feature

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

@@ -261,6 +261,6 @@ export default function DetailView() {
                     dispatch(detailSetPanel('request'));
                     dispatch(detailSetRequestTab('body'));
                 }, onSetMode: (m) => dispatch(setMode(m)) }),
-            React.createElement(RightPanel, { activeRequestTab: activeRequestTab, activeResponseTab: activeResponseTab, activePanel: activePanel, response: detail.response, endpoint: endpoint, document: document, parameterValues: detail.parameterValues, requestBody: detail.requestBody, requestHeaders: detail.headers, baseURL: baseURL, mode: mode, isLoading: loading, commandMode: mode === 'COMMAND' })),
+            React.createElement(RightPanel, { activeRequestTab: activeRequestTab, activeResponseTab: activeResponseTab, activePanel: activePanel, subFocus: detail.subFocus, response: detail.response, endpoint: endpoint, document: document, 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/RightPanel.d.ts

@@ -8,6 +8,7 @@ interface RightPanelProps {
     activeRequestTab: 'headers' | 'body' | 'query';
     activeResponseTab: 'body' | 'headers' | 'cookies' | 'curl';
     activePanel: 'left' | 'request' | 'response';
+    subFocus: 'TITLE' | 'TABS' | 'CONTENT';
     response: ApiResponse | null;
     endpoint: Endpoint;
     document?: OpenAPIDocument;
@@ -19,5 +20,5 @@ interface RightPanelProps {
     isLoading: boolean;
     commandMode?: boolean;
 }
-export default function RightPanel({ activeRequestTab, activeResponseTab, activePanel, response, endpoint, document, parameterValues, requestBody, requestHeaders, baseURL, mode, isLoading, commandMode, }: RightPanelProps): React.JSX.Element;
+export default function RightPanel({ activeRequestTab, activeResponseTab, activePanel, subFocus, response, endpoint, document, parameterValues, requestBody, requestHeaders, baseURL, mode, isLoading, commandMode, }: RightPanelProps): React.JSX.Element;
 export {};

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

@@ -5,7 +5,7 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { Box, Text, useStdout, useStdin } from 'ink';
 import { useKeyPress } from '../../hooks/useKeyPress.js';
 import { useAppDispatch } from '../../store/hooks.js';
-import { detailSetPanel, detailSetBody, setMode } 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';
@@ -27,11 +27,14 @@ 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, document, 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();
@@ -92,14 +95,20 @@ export default function RightPanel({ activeRequestTab, activeResponseTab, active
                 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`);
@@ -206,17 +215,13 @@ export default function RightPanel({ activeRequestTab, activeResponseTab, active
         },
         k: () => {
             setResScroll((prev) => {
-                if (prev > 0) {
-                    return Math.max(prev - 1, 0);
-                }
-                else {
-                    // 스크롤이 맨 위에 도달하면 Request 패널로 이동
-                    dispatch(detailSetPanel('request'));
-                    return 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);
@@ -314,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,
@@ -334,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/ListView.js

@@ -2,7 +2,7 @@
  * 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, listSetMethodFilter, listSetTag, listSetFocus, listSelectTag, listSelectMethod, listSetSearch, listSetTagSearch, } from '../../store/appSlice.js';
 import { navigateUp, navigateDown, navigateLeft, navigateRight, } from '../../store/navigationActions.js';
@@ -266,7 +266,13 @@ 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' || list.focus === 'METHODS' ? '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(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' }),

package/dist/store/appSlice.d.ts

@@ -3,12 +3,12 @@
  */
 import { AppState, AppMode, Screen, ApiResponse } from '../types/app-state.js';
 import { Endpoint, HttpMethod, OpenAPIDocument } from '../types/openapi.js';
-export declare const setDocument: import("@reduxjs/toolkit").ActionCreatorWithPayload<OpenAPIDocument, "app/setDocument">, setEndpoints: import("@reduxjs/toolkit").ActionCreatorWithPayload<Endpoint[], "app/setEndpoints">, setScreen: import("@reduxjs/toolkit").ActionCreatorWithPayload<Screen, "app/setScreen">, setMode: import("@reduxjs/toolkit").ActionCreatorWithPayload<AppMode, "app/setMode">, setCommandInput: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "app/setCommandInput">, setNavigationCount: import("@reduxjs/toolkit").ActionCreatorWithPayload<number | null, "app/setNavigationCount">, setError: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "app/setError">, setLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "app/setLoading">, listSelect: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "app/listSelect">, listSetMethodFilter: import("@reduxjs/toolkit").ActionCreatorWithPayload<HttpMethod | "ALL", "app/listSetMethodFilter">, listSetTag: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "app/listSetTag">, listSetFocus: import("@reduxjs/toolkit").ActionCreatorWithPayload<"LIST" | "TAGS" | "METHODS", "app/listSetFocus">, listSelectTag: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "app/listSelectTag">, listSelectMethod: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "app/listSelectMethod">, listSetSearch: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "app/listSetSearch">, listSetTagSearch: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "app/listSetTagSearch">, listScroll: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "app/listScroll">, detailSet: import("@reduxjs/toolkit").ActionCreatorWithPayload<Endpoint, "app/detailSet">, detailSetFocus: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "app/detailSetFocus">, detailSetParam: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+export declare const setDocument: import("@reduxjs/toolkit").ActionCreatorWithPayload<OpenAPIDocument, "app/setDocument">, setEndpoints: import("@reduxjs/toolkit").ActionCreatorWithPayload<Endpoint[], "app/setEndpoints">, setScreen: import("@reduxjs/toolkit").ActionCreatorWithPayload<Screen, "app/setScreen">, setMode: import("@reduxjs/toolkit").ActionCreatorWithPayload<AppMode, "app/setMode">, setCommandInput: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "app/setCommandInput">, setNavigationCount: import("@reduxjs/toolkit").ActionCreatorWithPayload<number | null, "app/setNavigationCount">, setError: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "app/setError">, setLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "app/setLoading">, listSelect: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "app/listSelect">, listSetMethodFilter: import("@reduxjs/toolkit").ActionCreatorWithPayload<HttpMethod | "ALL", "app/listSetMethodFilter">, listSetTag: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "app/listSetTag">, listSetFocus: import("@reduxjs/toolkit").ActionCreatorWithPayload<"LIST" | "TAGS" | "METHODS" | "TITLE", "app/listSetFocus">, listSelectTag: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "app/listSelectTag">, listSelectMethod: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "app/listSelectMethod">, listSetSearch: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "app/listSetSearch">, listSetTagSearch: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "app/listSetTagSearch">, listScroll: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "app/listScroll">, detailSet: import("@reduxjs/toolkit").ActionCreatorWithPayload<Endpoint, "app/detailSet">, detailSetFocus: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "app/detailSetFocus">, detailSetParam: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     key: string;
     value: string;
 }, "app/detailSetParam">, detailSetBody: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "app/detailSetBody">, detailSetHeader: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     key: string;
     value: string;
-}, "app/detailSetHeader">, detailSetPanel: import("@reduxjs/toolkit").ActionCreatorWithPayload<"left" | "request" | "response", "app/detailSetPanel">, detailSetRequestTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"headers" | "query" | "body", "app/detailSetRequestTab">, detailSetResponseTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"headers" | "body" | "cookies" | "curl", "app/detailSetResponseTab">, detailSetResponse: import("@reduxjs/toolkit").ActionCreatorWithPayload<ApiResponse | null, "app/detailSetResponse">, reset: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"app/reset">;
+}, "app/detailSetHeader">, detailSetPanel: import("@reduxjs/toolkit").ActionCreatorWithPayload<"left" | "request" | "response", "app/detailSetPanel">, detailSetRequestTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"headers" | "query" | "body", "app/detailSetRequestTab">, detailSetResponseTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"headers" | "body" | "cookies" | "curl", "app/detailSetResponseTab">, detailSetSubFocus: import("@reduxjs/toolkit").ActionCreatorWithPayload<"TITLE" | "TABS" | "CONTENT", "app/detailSetSubFocus">, detailSetResponse: import("@reduxjs/toolkit").ActionCreatorWithPayload<ApiResponse | null, "app/detailSetResponse">, reset: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"app/reset">;
 declare const _default: import("redux").Reducer<AppState>;
 export default _default;

package/dist/store/appSlice.js

@@ -132,6 +132,7 @@ const appSlice = createSlice({
                 activePanel: 'left',
                 activeRequestTab: 'headers',
                 activeResponseTab: 'body',
+                subFocus: 'TABS',
                 response: null,
             };
         },
@@ -170,6 +171,11 @@ const appSlice = createSlice({
                 state.detail.activeResponseTab = action.payload;
             }
         },
+        detailSetSubFocus: (state, action) => {
+            if (state.detail) {
+                state.detail.subFocus = action.payload;
+            }
+        },
         detailSetResponse: (state, action) => {
             if (state.detail) {
                 state.detail.response = action.payload;
@@ -178,5 +184,5 @@ const appSlice = createSlice({
         reset: () => initialState,
     },
 });
-export const { setDocument, setEndpoints, setScreen, setMode, setCommandInput, setNavigationCount, setError, setLoading, listSelect, listSetMethodFilter, listSetTag, listSetFocus, listSelectTag, listSelectMethod, listSetSearch, listSetTagSearch, listScroll, detailSet, detailSetFocus, detailSetParam, detailSetBody, detailSetHeader, detailSetPanel, detailSetRequestTab, detailSetResponseTab, detailSetResponse, reset, } = appSlice.actions;
+export const { setDocument, setEndpoints, setScreen, setMode, setCommandInput, setNavigationCount, setError, setLoading, listSelect, listSetMethodFilter, listSetTag, listSetFocus, listSelectTag, listSelectMethod, listSetSearch, listSetTagSearch, listScroll, detailSet, detailSetFocus, detailSetParam, detailSetBody, detailSetHeader, detailSetPanel, detailSetRequestTab, detailSetResponseTab, detailSetSubFocus, detailSetResponse, reset, } = appSlice.actions;
 export default appSlice.reducer;

package/dist/store/navigationActions.js

@@ -1,5 +1,7 @@
-import { listSetFocus, listSelectMethod, listSetMethodFilter, listSelect, listSelectTag, detailSetFocus, detailSetPanel, } from './appSlice.js';
+import { listSetFocus, listSelectMethod, listSetMethodFilter, listSelect, listSelectTag, detailSetFocus, detailSetPanel, detailSetSubFocus, detailSetRequestTab, detailSetResponseTab, } from './appSlice.js';
 const METHODS = ['ALL', 'GET', 'POST', 'PUT', 'DELETE', 'PATCH'];
+const REQUEST_TABS = ['headers', 'body', 'query'];
+const RESPONSE_TABS = ['body', 'headers', 'cookies', 'curl'];
 // k Key (Up)
 export const navigateUp = () => (dispatch, getState) => {
     const { app } = getState();
@@ -9,8 +11,11 @@ export const navigateUp = () => (dispatch, getState) => {
             const prevIndex = Math.max(list.selectedTagIndex - 1, 0);
             dispatch(listSelectTag(prevIndex));
         }
+        else if (list.focus === 'TITLE') {
+            // No action
+        }
         else if (list.focus === 'METHODS') {
-            // 아무 동작 안함
+            dispatch(listSetFocus('TITLE'));
         }
         else {
             // LIST
@@ -28,7 +33,22 @@ export const navigateUp = () => (dispatch, getState) => {
             const prevIndex = Math.max(detail.focusedFieldIndex - 1, 0);
             dispatch(detailSetFocus(prevIndex));
         }
-        // RightPanel 스크롤은 컴포넌트 내 Functional Update로 처리되므로 둠
+        else if (detail.activePanel === 'request') {
+            if (detail.subFocus === 'TABS') {
+                dispatch(detailSetSubFocus('TITLE'));
+            }
+            // CONTENT: Handled by component (scroll)
+        }
+        else if (detail.activePanel === 'response') {
+            if (detail.subFocus === 'TITLE') {
+                dispatch(detailSetPanel('request'));
+                dispatch(detailSetSubFocus('CONTENT'));
+            }
+            else if (detail.subFocus === 'TABS') {
+                dispatch(detailSetSubFocus('TITLE'));
+            }
+            // CONTENT: Handled by component (scroll)
+        }
     }
 };
 // j Key (Down)
@@ -37,14 +57,20 @@ export const navigateDown = () => (dispatch, getState) => {
     const { screen, list, detail, endpoints } = app;
     if (screen === 'LIST') {
         if (list.focus === 'TAGS') {
-            // 태그 목록 계산 (Explorer와 동일한 로직 필요)
-            const tags = new Set();
-            endpoints.forEach((ep) => ep.tags?.forEach((tag) => tags.add(tag)));
-            // Tag Search Query가 있을 경우 필터링된 개수 기준이어야 함
-            // 현재는 간단히 최대치로 제한 (ListView에서 계산된 filteredTags.length가 이상적이나 접근 불가)
-            // Thunk에서 filteredTags를 직접 계산하거나 상위에서 넘겨줘야 함. 
-            // 일단 selectedTagIndex 업데이트만 처리.
-            dispatch(listSelectTag(list.selectedTagIndex + 1));
+            // 태그 목록 계산
+            const uniqueTags = new Set();
+            endpoints.forEach((ep) => ep.tags?.forEach((tag) => uniqueTags.add(tag)));
+            const sortedTags = Array.from(uniqueTags).sort();
+            const allTags = ['Overview', ...sortedTags];
+            // 검색어 필터링 적용
+            const filteredTags = list.tagSearchQuery
+                ? allTags.filter((tag) => tag.toLowerCase().includes(list.tagSearchQuery.toLowerCase()))
+                : allTags;
+            const nextIndex = Math.min(list.selectedTagIndex + 1, filteredTags.length - 1);
+            dispatch(listSelectTag(nextIndex));
+        }
+        else if (list.focus === 'TITLE') {
+            dispatch(listSetFocus('METHODS'));
         }
         else if (list.focus === 'METHODS') {
             dispatch(listSetFocus('LIST'));
@@ -74,19 +100,40 @@ export const navigateDown = () => (dispatch, getState) => {
             const nextIndex = Math.min(detail.focusedFieldIndex + 1, totalFields - 1);
             dispatch(detailSetFocus(nextIndex));
         }
+        else if (detail.activePanel === 'request') {
+            if (detail.subFocus === 'TITLE') {
+                dispatch(detailSetSubFocus('TABS'));
+            }
+            else if (detail.subFocus === 'TABS') {
+                dispatch(detailSetSubFocus('CONTENT'));
+            }
+            // CONTENT: Handled by component (scroll) -> Move to Response
+        }
+        else if (detail.activePanel === 'response') {
+            if (detail.subFocus === 'TITLE') {
+                dispatch(detailSetSubFocus('TABS'));
+            }
+            else if (detail.subFocus === 'TABS') {
+                dispatch(detailSetSubFocus('CONTENT'));
+            }
+            // CONTENT: Handled by component (scroll)
+        }
     }
 };
 // h Key (Left)
 export const navigateLeft = () => (dispatch, getState) => {
     const { app } = getState();
-    const { screen, list } = app;
+    const { screen, list, detail } = app;
     if (screen === 'LIST') {
         if (list.focus === 'LIST') {
             dispatch(listSetFocus('TAGS'));
         }
+        else if (list.focus === 'TITLE') {
+            dispatch(listSetFocus('TAGS'));
+        }
         else if (list.focus === 'METHODS') {
             if (list.focusedMethodIndex === 0) {
-                dispatch(listSetFocus('LIST'));
+                dispatch(listSetFocus('TITLE'));
             }
             else {
                 const prevIndex = Math.max(list.focusedMethodIndex - 1, 0);
@@ -95,8 +142,34 @@ export const navigateLeft = () => (dispatch, getState) => {
             }
         }
     }
-    else if (screen === 'DETAIL') {
-        dispatch(detailSetPanel('left'));
+    else if (screen === 'DETAIL' && detail) {
+        if (detail.activePanel === 'left') {
+            // Already at left, do nothing or go back to list (handled by u key usually)
+        }
+        else {
+            if (detail.subFocus === 'TITLE' || detail.subFocus === 'CONTENT') {
+                dispatch(detailSetPanel('left'));
+            }
+            else if (detail.subFocus === 'TABS') {
+                const tabs = detail.activePanel === 'request' ? REQUEST_TABS : RESPONSE_TABS;
+                const currentTab = detail.activePanel === 'request'
+                    ? detail.activeRequestTab
+                    : detail.activeResponseTab;
+                const index = tabs.indexOf(currentTab);
+                if (index === 0) {
+                    dispatch(detailSetSubFocus('TITLE'));
+                }
+                else {
+                    const prevTab = tabs[index - 1];
+                    if (detail.activePanel === 'request') {
+                        dispatch(detailSetRequestTab(prevTab));
+                    }
+                    else {
+                        dispatch(detailSetResponseTab(prevTab));
+                    }
+                }
+            }
+        }
     }
 };
 // l Key (Right)
@@ -109,6 +182,9 @@ export const navigateRight = () => (dispatch, getState) => {
             dispatch(listSelectTag(list.selectedTagIndex)); // 현재 태그 선택 유지하며 포커스만 이동
             dispatch(listSetFocus('LIST'));
         }
+        else if (list.focus === 'TITLE') {
+            dispatch(listSetFocus('METHODS'));
+        }
         else if (list.focus === 'LIST') {
             const nextIndex = (list.focusedMethodIndex + 1) % METHODS.length;
             dispatch(listSetFocus('METHODS'));
@@ -124,6 +200,28 @@ export const navigateRight = () => (dispatch, getState) => {
     else if (screen === 'DETAIL' && detail) {
         if (detail.activePanel === 'left') {
             dispatch(detailSetPanel('request'));
+            dispatch(detailSetSubFocus('TITLE'));
+        }
+        else {
+            if (detail.subFocus === 'TITLE') {
+                dispatch(detailSetSubFocus('TABS'));
+            }
+            else if (detail.subFocus === 'TABS') {
+                const tabs = detail.activePanel === 'request' ? REQUEST_TABS : RESPONSE_TABS;
+                const currentTab = detail.activePanel === 'request'
+                    ? detail.activeRequestTab
+                    : detail.activeResponseTab;
+                const index = tabs.indexOf(currentTab);
+                const nextIndex = (index + 1) % tabs.length;
+                const nextTab = tabs[nextIndex];
+                if (detail.activePanel === 'request') {
+                    dispatch(detailSetRequestTab(nextTab));
+                }
+                else {
+                    dispatch(detailSetResponseTab(nextTab));
+                }
+            }
+            // CONTENT: Do nothing or handle specific logic
         }
     }
 };

package/dist/types/app-state.d.ts

@@ -21,7 +21,7 @@ export interface ListViewState {
     filteredEndpoints: Endpoint[];
     activeMethod: HttpMethod | 'ALL';
     activeTag: string | null;
-    focus: 'TAGS' | 'LIST' | 'METHODS';
+    focus: 'TAGS' | 'LIST' | 'METHODS' | 'TITLE';
     selectedTagIndex: number;
     focusedMethodIndex: number;
     searchQuery: string;
@@ -41,6 +41,7 @@ export interface DetailViewState {
     activePanel: 'left' | 'request' | 'response';
     activeRequestTab: 'headers' | 'body' | 'query';
     activeResponseTab: 'body' | 'headers' | 'cookies' | 'curl';
+    subFocus: 'TITLE' | 'TABS' | 'CONTENT';
     response: ApiResponse | null;
 }
 export interface ApiResponse {
@@ -81,7 +82,7 @@ export type AppAction = {
     payload: string | null;
 } | {
     type: 'LIST_SET_FOCUS';
-    payload: 'TAGS' | 'LIST' | 'METHODS';
+    payload: 'TAGS' | 'LIST' | 'METHODS' | 'TITLE';
 } | {
     type: 'LIST_SELECT_TAG';
     payload: number;
@@ -127,6 +128,9 @@ export type AppAction = {
 } | {
     type: 'DETAIL_SET_RESPONSE_TAB';
     payload: 'body' | 'headers' | 'cookies' | 'curl';
+} | {
+    type: 'DETAIL_SET_SUB_FOCUS';
+    payload: 'TITLE' | 'TABS' | 'CONTENT';
 } | {
     type: 'DETAIL_SET_RESPONSE';
     payload: ApiResponse | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gomjellie/lazyapi",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A terminal-based Swagger/OpenAPI explorer with Vim-style keyboard navigation",
   "type": "module",
   "main": "dist/cli.js",