@gomjellie/lazyapi 0.0.3 → 0.0.5

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

@@ -2,9 +2,9 @@
  * API 상세 화면
  */
 import React from 'react';
-import { Box, Text, useStdout } from 'ink';
+import { Box, Text, useStdout, useStdin } from 'ink';
 import { useAppSelector, useAppDispatch } from '../../store/hooks.js';
-import { setMode, detailSetFocus, detailSetPanel, detailSetRequestTab, detailSetResponseTab, detailSetResponse, detailSetParam, detailSetBody, } from '../../store/appSlice.js';
+import { setMode, detailSetFocus, detailSetPanel, detailSetRequestTab, detailSetResponseTab, detailSetResponse, detailSetParam, detailSetBody, detailSetHeader, } 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';
@@ -15,6 +15,10 @@ import LeftPanel from './LeftPanel.js';
 import RightPanel from './RightPanel.js';
 import { getServerUrl } from '../../types/openapi.js';
 import { setCommandInput } from '../../store/appSlice.js';
+import { spawnSync } from 'child_process';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
 export default function DetailView() {
     const detail = useAppSelector((state) => state.app.detail);
     const document = useAppSelector((state) => state.app.document);
@@ -24,11 +28,151 @@ export default function DetailView() {
     const { goBack } = useNavigation();
     const { executeRequest, loading } = useApiClient();
     const { stdout } = useStdout();
+    const { isRawModeSupported, setRawMode } = useStdin();
     // detail이 없는 경우를 대비한 기본값
     const endpoint = detail?.endpoint;
     const activePanel = detail?.activePanel || 'left';
     const activeRequestTab = detail?.activeRequestTab || 'headers';
     const activeResponseTab = detail?.activeResponseTab || 'body';
+    const handleOpenEditor = () => {
+        if (!detail || !endpoint)
+            return;
+        let content = '';
+        let fileName = `lazyapi-edit-${Date.now()}`;
+        let extension = '.json';
+        let isEditable = false;
+        let updateType = 'NONE';
+        // 1. Determine content and metadata based on active panel and tab
+        if (activePanel === 'request') {
+            if (activeRequestTab === 'body') {
+                content = detail.requestBody || '';
+                isEditable = true;
+                updateType = 'BODY';
+            }
+            else if (activeRequestTab === 'headers') {
+                content = JSON.stringify(detail.headers, null, 2);
+                isEditable = true; // Later could support bulk edit
+                updateType = 'HEADERS';
+            }
+            else if (activeRequestTab === 'query') {
+                content = JSON.stringify(detail.parameterValues, null, 2);
+                isEditable = true;
+                updateType = 'PARAMS';
+            }
+        }
+        else if (activePanel === 'response' && detail.response) {
+            if (activeResponseTab === 'body') {
+                content =
+                    typeof detail.response.body === 'string'
+                        ? detail.response.body
+                        : JSON.stringify(detail.response.body, null, 2);
+            }
+            else if (activeResponseTab === 'headers') {
+                content = JSON.stringify(detail.response.headers, null, 2);
+            }
+            else if (activeResponseTab === 'cookies') {
+                content = JSON.stringify(detail.response.cookies || {}, null, 2);
+            }
+            else if (activeResponseTab === 'curl') {
+                extension = '.sh';
+                // Calculate curl command
+                let pathStr = endpoint.path;
+                endpoint.parameters
+                    .filter((p) => p.in === 'path')
+                    .forEach((param) => {
+                    const value = detail.parameterValues[param.name] || '';
+                    pathStr = pathStr.replace(`{${param.name}}`, value);
+                });
+                const queryParams = endpoint.parameters
+                    .filter((p) => p.in === 'query')
+                    .filter((param) => detail.parameterValues[param.name])
+                    .map((param) => `${param.name}=${encodeURIComponent(detail.parameterValues[param.name])}`)
+                    .join('&');
+                const url = queryParams ? `${baseURL}${pathStr}?${queryParams}` : `${baseURL}${pathStr}`;
+                let headerStr = '';
+                Object.entries(detail.headers).forEach(([key, val]) => {
+                    headerStr += ` -H '${key}: ${val}'`;
+                });
+                let bodyStr = '';
+                if (detail.requestBody) {
+                    bodyStr = ` -d '${detail.requestBody.replace(/'/g, "'\\''")}'`;
+                }
+                const method = endpoint.method.toUpperCase();
+                content = `curl -X ${method} '${url}'${headerStr}${bodyStr}`;
+            }
+        }
+        else if (activePanel === 'left') {
+            // LeftPanel handles body params or requestBody
+            content = detail.requestBody || '';
+            isEditable = true;
+            updateType = 'BODY';
+        }
+        if (!content && activePanel === 'response' && activeResponseTab === 'curl') {
+            // Re-calculate curl if needed or just show placeholder
+            content = 'Curl command calculation not available in this view';
+        }
+        try {
+            const tempFile = path.join(os.tmpdir(), `${fileName}${extension}`);
+            fs.writeFileSync(tempFile, content);
+            const editor = process.env.EDITOR || 'vim';
+            if (isRawModeSupported) {
+                setRawMode(false);
+            }
+            process.stdin.pause();
+            try {
+                spawnSync(editor, [tempFile], {
+                    stdio: 'inherit',
+                });
+                if (fs.existsSync(tempFile) && isEditable) {
+                    const newContent = fs.readFileSync(tempFile, 'utf-8');
+                    if (newContent !== content) {
+                        if (updateType === 'BODY') {
+                            dispatch(detailSetBody(newContent));
+                        }
+                        else if (updateType === 'HEADERS') {
+                            try {
+                                const parsed = JSON.parse(newContent);
+                                Object.entries(parsed).forEach(([key, value]) => {
+                                    dispatch(detailSetHeader({ key, value: String(value) }));
+                                });
+                            }
+                            catch {
+                                // Ignore parse errors for bulk edit for now
+                            }
+                        }
+                        else if (updateType === 'PARAMS') {
+                            try {
+                                const parsed = JSON.parse(newContent);
+                                Object.entries(parsed).forEach(([key, value]) => {
+                                    dispatch(detailSetParam({ key, value: String(value) }));
+                                });
+                            }
+                            catch {
+                                // Ignore
+                            }
+                        }
+                    }
+                }
+                if (fs.existsSync(tempFile)) {
+                    fs.unlinkSync(tempFile);
+                }
+            }
+            catch (innerError) {
+                console.error('Error executing editor:', innerError);
+            }
+            finally {
+                process.stdin.resume();
+                if (isRawModeSupported) {
+                    setRawMode(true);
+                }
+                dispatch(setMode('NORMAL'));
+            }
+        }
+        catch (e) {
+            console.error('Failed to open editor', e);
+            dispatch(setMode('NORMAL'));
+        }
+    };
     // 파라미터 필드 개수 계산
     const pathParams = endpoint?.parameters.filter((p) => p.in === 'path') || [];
     const queryParams = endpoint?.parameters.filter((p) => p.in === 'query') || [];
@@ -42,6 +186,23 @@ export default function DetailView() {
         formDataParams.length +
         (endpoint?.requestBody && bodyParams.length === 0 ? 1 : 0) +
         (endpoint?.responses?.length || 0);
+    // Body 영역 인덱스 계산
+    const bodyStartIndex = pathParams.length + queryParams.length + headerParams.length;
+    const bodyEndIndex = bodyStartIndex + bodyParams.length;
+    // OA3 Request Body 인덱스 (Body Params가 없을 때만 존재)
+    const requestBodyIndex = endpoint?.requestBody && bodyParams.length === 0 ? bodyEndIndex + formDataParams.length : -1;
+    // 'e' 키 (Edit) 표시 여부 결정
+    const showEditKey = 
+    // 1. Request or Response Panel > TABS area
+    ((activePanel === 'request' || activePanel === 'response') &&
+        detail?.subFocus === 'TABS') ||
+        // 2. Left Panel > Body Parameter (in: body)
+        (activePanel === 'left' &&
+            detail &&
+            detail.focusedFieldIndex >= bodyStartIndex &&
+            detail.focusedFieldIndex < bodyEndIndex) ||
+        // 3. Left Panel > Request Body (OA3)
+        (activePanel === 'left' && detail && detail.focusedFieldIndex === requestBodyIndex);
     const handleExecuteRequest = async () => {
         if (!detail || !document)
             return;
@@ -63,8 +224,8 @@ export default function DetailView() {
         if (cmd === 'q' || cmd === 'quit' || cmd === 'exit') {
             process.exit(0);
         }
-        // 2. 접두사 있는 명령어 처리 (pp1, qp1, h1, rqb1, rs1, rq1, rb1...)
-        const match = cmd.match(/^(pp|qp|h|rqb|rs|rq|rb)(\d+)$/);
+        // 2. 접두사 있는 명령어 처리 (pp1, qp1, h1, bt1, rs1, rq1, rt1...)
+        const match = cmd.match(/^(pp|qp|h|bt|rs|rq|rt)(\d+)$/);
         if (match) {
             const type = match[1];
             const index = parseInt(match[2], 10);
@@ -100,8 +261,8 @@ export default function DetailView() {
                     dispatch(detailSetPanel('request'));
                 }
             }
-            else if (type === 'rqb') {
-                // Request Body (기존 rb -> rqb)
+            else if (type === 'bt') {
+                // Request Body
                 const bodyStartIndex = pathParams.length + queryParams.length + headerParams.length;
                 if (bodyParams.length > 0) {
                     if (targetIndex >= 0 && targetIndex < bodyParams.length) {
@@ -117,8 +278,8 @@ export default function DetailView() {
                     }
                 }
             }
-            else if (type === 'rb') {
-                // Responses (사용자 요청: rb)
+            else if (type === 'rt') {
+                // Responses
                 const responsesStartIndex = pathParams.length +
                     queryParams.length +
                     headerParams.length +
@@ -235,6 +396,7 @@ export default function DetailView() {
             { key: ':', description: 'Command' },
             { key: 'Tab', description: 'Cycle Panel' },
             { key: 'i', description: 'Insert' },
+            ...(showEditKey ? [{ key: 'e', description: 'Editor' }] : []),
             { key: 'Enter', description: 'Execute' },
             { key: 'u', description: 'Back' },
         ]
@@ -260,7 +422,7 @@ export default function DetailView() {
                     dispatch(detailSetBody(value));
                     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' })),
+                }, onSetMode: (m) => dispatch(setMode(m)), onOpenEditor: handleOpenEditor }),
+            React.createElement(RightPanel, { activeRequestTab: activeRequestTab, activeResponseTab: activeResponseTab, activePanel: activePanel, subFocus: detail.subFocus, response: detail.response, endpoint: endpoint, parameterValues: detail.parameterValues, requestBody: detail.requestBody, requestHeaders: detail.headers, baseURL: baseURL, isLoading: loading, commandMode: mode === 'COMMAND', onOpenEditor: handleOpenEditor })),
         React.createElement(KeybindingFooter, { bindings: keyBindings, mode: mode, commandInput: commandInput, onCommandChange: (value) => dispatch(setCommandInput(value)), onCommandSubmit: handleCommandSubmit })));
 }

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

@@ -17,6 +17,7 @@ interface LeftPanelProps {
     onExitInsertMode?: () => void;
     onRequestBodyEdit?: (value: string) => void;
     onSetMode?: (mode: AppMode) => void;
+    onOpenEditor?: () => void;
 }
-export default function LeftPanel({ endpoint, parameterValues, requestBodyValue, focusedFieldIndex, mode, isFocused, document, commandMode, onParameterChange, onExitInsertMode, onRequestBodyEdit, onSetMode, }: LeftPanelProps): React.JSX.Element;
+export default function LeftPanel({ endpoint, parameterValues, requestBodyValue, focusedFieldIndex, mode, isFocused, document, commandMode, onParameterChange, onExitInsertMode, onRequestBodyEdit, onSetMode, onOpenEditor, }: LeftPanelProps): React.JSX.Element;
 export {};

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

@@ -35,7 +35,7 @@ function getStatusColor(status) {
         return 'red';
     return 'gray';
 }
-export default function LeftPanel({ endpoint, parameterValues, requestBodyValue, focusedFieldIndex, mode, isFocused, document, commandMode = false, onParameterChange, onExitInsertMode, onRequestBodyEdit, onSetMode, }) {
+export default function LeftPanel({ endpoint, parameterValues, requestBodyValue, focusedFieldIndex, mode, isFocused, document, commandMode = false, onParameterChange, onExitInsertMode, onRequestBodyEdit, onSetMode, onOpenEditor, }) {
     const { stdout } = useStdout();
     const [localValue, setLocalValue] = useState('');
     const [collapsedSchemas, setCollapsedSchemas] = useState(() => {
@@ -429,12 +429,23 @@ export default function LeftPanel({ endpoint, parameterValues, requestBodyValue,
             }
         }
     };
+    const handleOpenRequestBodyEditor = () => {
+        if (!isFocused || mode !== 'NORMAL' || !onOpenEditor)
+            return;
+        const flatIndex = paramIndexToFlatIndex[focusedFieldIndex];
+        const item = flatItems[flatIndex];
+        const isBodyParam = item?.type === 'requestBody' || (item?.type === 'param' && item.param.in === 'body');
+        if (isBodyParam) {
+            onOpenEditor();
+        }
+    };
     useKeyPress({
         '>': handleExpandSchema,
         '<': handleCollapseSchema,
         j: handleSchemaScrollDown,
         k: handleSchemaScrollUp,
         i: handleEnterInsertMode,
+        e: handleOpenRequestBodyEditor,
     }, mode === 'NORMAL' && isFocused);
     // Render Helpers
     const getSchemaName = (schema) => {
@@ -530,7 +541,7 @@ export default function LeftPanel({ endpoint, parameterValues, requestBodyValue,
             if (item.param.schema) {
                 if (isReferenceObject(item.param.schema)) {
                     refInfo = item.param.schema.$ref.split('/').pop() || item.param.schema.$ref;
-                    typeInfo = 'object';
+                    typeInfo = refInfo;
                 }
                 else {
                     const schemaType = item.param.schema.type;
@@ -557,8 +568,8 @@ export default function LeftPanel({ endpoint, parameterValues, requestBodyValue,
                     commandHint = `h${hIndex}`;
                 }
                 else if (item.param.in === 'body') {
-                    const rbIndex = item.globalIndex - bodyStartIndex + 1;
-                    commandHint = `rb${rbIndex}`;
+                    const btIndex = item.globalIndex - bodyStartIndex + 1;
+                    commandHint = `bt${btIndex}`;
                 }
             }
             return (React.createElement(Box, { key: key, flexDirection: "column" },
@@ -581,7 +592,11 @@ export default function LeftPanel({ endpoint, parameterValues, requestBodyValue,
                     React.createElement(Box, { marginLeft: 2, flexGrow: 1 }, mode === 'INSERT' && isFieldFocused ? (React.createElement(SearchInput, { value: localValue, onChange: (val) => {
                             setLocalValue(val);
                             onParameterChange(item.param.name, val);
-                        }, suggestions: [], placeholder: "", focus: true, onSubmit: onExitInsertMode })) : (React.createElement(Text, { color: value ? 'white' : 'gray', backgroundColor: isFieldFocused ? 'green' : undefined, bold: isFieldFocused && !value }, value || (isFieldFocused ? ' (empty) ' : '(empty)'))))),
+                        }, suggestions: [], placeholder: "", focus: true, onSubmit: onExitInsertMode })) : (React.createElement(Text, { color: value ? 'white' : 'gray', backgroundColor: isFieldFocused ? 'green' : undefined, bold: isFieldFocused && !value }, item.param.in === 'body' && value
+                        ? isFieldFocused
+                            ? ' (Press e to edit) '
+                            : '(Value set)'
+                        : value || (isFieldFocused ? ' (empty) ' : '(empty)'))))),
                 item.param.description && (React.createElement(Box, { marginLeft: 2, marginTop: 0 },
                     React.createElement(Text, { color: "gray", dimColor: true }, item.param.description))),
                 (() => {
@@ -625,15 +640,24 @@ export default function LeftPanel({ endpoint, parameterValues, requestBodyValue,
             const isFieldFocused = item.globalIndex === focusedFieldIndex && isFocused;
             const isExpanded = !collapsedSchemas.has('__requestBody__');
             const hasSchema = !!endpoint.requestBody?.schema;
-            const commandHint = commandMode ? 'rqb1' : '';
+            const commandHint = commandMode ? 'bt1' : '';
             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" },
-                            "[",
-                            commandHint,
-                            "]"))),
-                    React.createElement(Text, { color: isFieldFocused ? 'black' : 'gray' }, item.endpoint.requestBody?.description || 'Request Body Content')),
+                React.createElement(Box, { flexDirection: "row", marginLeft: 1 },
+                    React.createElement(Box, { flexDirection: "row", backgroundColor: isFieldFocused ? 'green' : undefined },
+                        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')),
+                    React.createElement(Box, { marginLeft: 2 },
+                        React.createElement(Text, { color: requestBodyValue ? 'white' : 'gray', backgroundColor: isFieldFocused ? 'green' : undefined, bold: isFieldFocused && !requestBodyValue }, requestBodyValue
+                            ? isFieldFocused
+                                ? ' (Press e to edit) '
+                                : '(Value set)'
+                            : isFieldFocused
+                                ? ' (empty) '
+                                : '(empty)'))),
                 hasSchema && !isExpanded && (React.createElement(Box, { marginLeft: 1, marginTop: 0 },
                     React.createElement(Text, { color: "yellow", dimColor: true },
                         "Press > to view ",
@@ -661,13 +685,13 @@ export default function LeftPanel({ endpoint, parameterValues, requestBodyValue,
                 (endpoint.requestBody && endpoint.parameters.filter((p) => p.in === 'body').length === 0
                     ? 1
                     : 0);
-            const rbIndex = item.globalIndex - responsesStartIndex + 1;
+            const rtIndex = 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}`,
+                            `rt${rtIndex}`,
                             "]"))),
                     React.createElement(Text, { color: isFieldFocused ? 'black' : getStatusColor(item.response.status), bold: true }, item.response.status),
                     React.createElement(Text, { color: isFieldFocused ? 'black' : 'white' },

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

@@ -2,22 +2,22 @@
  * API Detail 우측 패널 - Request/Response 분할
  */
 import React from 'react';
-import { ApiResponse, AppMode } from '../../types/app-state.js';
-import { Endpoint, OpenAPIDocument } from '../../types/openapi.js';
+import { ApiResponse } from '../../types/app-state.js';
+import { Endpoint } from '../../types/openapi.js';
 interface RightPanelProps {
     activeRequestTab: 'headers' | 'body' | 'query';
     activeResponseTab: 'body' | 'headers' | 'cookies' | 'curl';
     activePanel: 'left' | 'request' | 'response';
+    subFocus: 'TITLE' | 'TABS';
     response: ApiResponse | null;
     endpoint: Endpoint;
-    document?: OpenAPIDocument;
     parameterValues: Record<string, string>;
     requestBody: string;
     requestHeaders: Record<string, string>;
     baseURL: string;
-    mode: AppMode;
     isLoading: boolean;
     commandMode?: boolean;
+    onOpenEditor: () => void;
 }
-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, parameterValues, requestBody, requestHeaders, baseURL, isLoading, commandMode, onOpenEditor, }: RightPanelProps): React.JSX.Element;
 export {};

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

@@ -1,16 +1,9 @@
 /**
  * API Detail 우측 패널 - Request/Response 분할
  */
-import React, { useState, useEffect, useMemo } from 'react';
-import { Box, Text, useStdout, useStdin } from 'ink';
+import React, { useMemo } from 'react';
+import { Box, Text, useStdout } from 'ink';
 import { useKeyPress } from '../../hooks/useKeyPress.js';
-import { useAppDispatch } from '../../store/hooks.js';
-import { detailSetPanel, detailSetBody, 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) => {
     let showHint = false;
@@ -27,127 +20,25 @@ 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, parameterValues, requestBody, requestHeaders, baseURL, isLoading, commandMode = false, onOpenEditor, }) {
     const { stdout } = useStdout();
-    const { isRawModeSupported, setRawMode } = useStdin();
-    const dispatch = useAppDispatch();
     // 높이 계산
     const totalHeight = (stdout?.rows || 24) - 4;
     const requestBoxHeight = Math.floor(totalHeight / 2);
     const responseBoxHeight = totalHeight - requestBoxHeight; // 나머지 높이를 Response 박스에 할당
-    const contentHeight = Math.max(requestBoxHeight - 4, 1);
-    // -- Request Box State --
-    const [reqScroll, setReqScroll] = useState(0);
-    useEffect(() => {
-        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') {
-            const keys = Object.keys(requestHeaders);
-            return keys.length === 0 ? 1 : keys.length;
-        }
-        if (activeRequestTab === 'body') {
-            return requestBody ? requestBody.split('\n').length : 1;
-        }
-        if (activeRequestTab === 'query') {
-            const queries = endpoint.parameters.filter((p) => p.in === 'query');
-            return queries.length === 0 ? 1 : queries.length;
-        }
-        return 0;
-    };
-    const reqTotalLines = getRequestLines();
-    // Request Scroll Handler (j/k)
-    useKeyPress({
-        j: () => {
-            setReqScroll((prev) => {
-                const maxScroll = Math.max(0, reqTotalLines - contentHeight);
-                if (prev < maxScroll) {
-                    return Math.min(prev + 1, maxScroll);
-                }
-                else {
-                    // 스크롤이 끝에 도달하면 Response 패널로 이동
-                    dispatch(detailSetPanel('response'));
-                    return prev;
-                }
-            });
-        },
-        k: () => {
-            setReqScroll((prev) => Math.max(prev - 1, 0));
-        },
-    }, mode === 'NORMAL' && activePanel === 'request');
-    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 모두)
+    // 콘텐츠 가용 높이 계산 (박스 테두리 2 + 제목 1 + 탭 1 + 하단 안내 1 = 5줄 제외)
+    const contentHeight = Math.max(requestBoxHeight - 5, 1);
+    // e 키: 해당 패널의 TABS에 포커스가 있을 때만 동작
     useKeyPress({
-        e: openExternalEditor,
-    }, activePanel === 'request' && activeRequestTab === 'body');
-    // -- Response Box State --
-    const [resScroll, setResScroll] = useState(0);
-    useEffect(() => {
-        // 탭이 변경될 때만 스크롤 리셋 (response 변경 시에는 리셋하지 않음)
-        setResScroll(0);
-    }, [activeResponseTab]);
+        e: onOpenEditor,
+    }, activePanel !== 'left' && subFocus === 'TABS');
     // Curl Command 생성 (메모이제이션)
     const curlCommand = useMemo(() => {
         let pathStr = endpoint.path;
@@ -174,107 +65,41 @@ export default function RightPanel({ activeRequestTab, activeResponseTab, active
         const method = endpoint.method.toUpperCase();
         return `curl -X ${method} '${url}'${headerStr}${bodyStr}`;
     }, [endpoint, parameterValues, requestHeaders, requestBody, baseURL]);
-    // Response Content Lines 계산 (메모이제이션)
-    const resTotalLines = useMemo(() => {
-        if (activeResponseTab === 'curl') {
-            return curlCommand.split('\n').length;
-        }
-        if (!response)
-            return 1;
-        if (activeResponseTab === 'body') {
-            const bodyStr = typeof response.body === 'string' ? response.body : JSON.stringify(response.body, null, 2);
-            return bodyStr.split('\n').length;
-        }
-        if (activeResponseTab === 'headers') {
-            return Object.keys(response.headers).length || 1;
-        }
-        if (activeResponseTab === 'cookies') {
-            return response.cookies ? Object.keys(response.cookies).length || 1 : 1;
-        }
-        return 0;
-    }, [activeResponseTab, response, curlCommand]);
-    // Response Scroll Handler (j/k)
-    useKeyPress({
-        j: () => {
-            setResScroll((prev) => {
-                const maxScroll = Math.max(0, resTotalLines - contentHeight);
-                if (prev < maxScroll) {
-                    return Math.min(prev + 1, maxScroll);
-                }
-                return prev;
-            });
-        },
-        k: () => {
-            setResScroll((prev) => {
-                if (prev > 0) {
-                    return Math.max(prev - 1, 0);
-                }
-                else {
-                    // 스크롤이 맨 위에 도달하면 Request 패널로 이동
-                    dispatch(detailSetPanel('request'));
-                    return prev;
-                }
-            });
-        },
-    }, mode === 'NORMAL' && activePanel === 'response');
-    // 렌더링 헬퍼
-    const renderLines = (lines, offset, limit) => {
-        const visible = lines.slice(offset, offset + limit);
-        return visible.map((line, i) => React.createElement(Text, { key: offset + i }, line));
-    };
-    const renderKeyValue = (data, offset, limit) => {
-        const entries = Object.entries(data);
-        if (entries.length === 0)
-            return React.createElement(Text, { color: "gray" }, "No data");
-        const visible = entries.slice(offset, offset + limit);
-        return visible.map(([k, v], i) => (React.createElement(Box, { key: offset + i },
-            React.createElement(Text, { color: "green" },
-                k,
-                ": "),
-            React.createElement(Text, null, v))));
+    // 렌더링 헬퍼 (스크롤 제거, 단순히 잘라서 표시)
+    const renderLines = (lines, limit) => {
+        const visible = lines.slice(0, limit);
+        return visible.map((line, i) => (React.createElement(Text, { key: i, wrap: "truncate" },
+            ' ',
+            line)));
     };
-    // Request Box Render
+    // Request Box Content Render
     const renderRequestContent = () => {
         if (activeRequestTab === 'headers') {
             if (Object.keys(requestHeaders).length === 0)
-                return React.createElement(Text, { color: "gray" }, "No headers");
-            return renderKeyValue(requestHeaders, reqScroll, contentHeight);
+                return React.createElement(Text, { color: "gray" }, " No headers");
+            const json = JSON.stringify(requestHeaders, null, 2);
+            return renderLines(json.split('\n'), contentHeight);
         }
         if (activeRequestTab === 'body') {
-            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 (!requestBody)
+                return React.createElement(Text, { color: "gray" }, " No body");
+            const lines = requestBody.split('\n');
+            return renderLines(lines, contentHeight);
         }
         if (activeRequestTab === 'query') {
             const queries = endpoint.parameters.filter((p) => p.in === 'query');
             if (queries.length === 0)
-                return React.createElement(Text, { color: "gray" }, "No query parameters");
-            const visible = queries.slice(reqScroll, reqScroll + contentHeight);
-            return visible.map((q, i) => (React.createElement(Box, { key: reqScroll + i },
-                React.createElement(Text, { color: "blue" },
-                    q.name,
-                    ": "),
-                React.createElement(Text, null, parameterValues[q.name] || (React.createElement(Text, { color: "gray", dimColor: true }, "(empty)"))))));
+                return React.createElement(Text, { color: "gray" }, " No query parameters");
+            // 파라미터 값만 추출하여 JSON으로 표시
+            const json = JSON.stringify(parameterValues, null, 2);
+            return renderLines(json.split('\n'), contentHeight);
         }
         return null;
     };
-    // Response Box Render
+    // Response Box Content Render
     const renderResponseContent = () => {
         if (activeResponseTab === 'curl') {
-            return renderLines(curlCommand.split('\n'), resScroll, contentHeight);
+            return renderLines(curlCommand.split('\n'), contentHeight);
         }
         if (isLoading) {
             return (React.createElement(Box, null,
@@ -283,20 +108,22 @@ export default function RightPanel({ activeRequestTab, activeResponseTab, active
                 React.createElement(Text, { color: "green" }, " Sending request...")));
         }
         if (!response)
-            return React.createElement(Text, { color: "gray" }, "Press Enter to execute request.");
+            return React.createElement(Text, { color: "gray" }, " Press Enter to execute request.");
         if (activeResponseTab === 'body') {
             const bodyStr = typeof response.body === 'string' ? response.body : JSON.stringify(response.body, null, 2);
-            return renderLines(bodyStr.split('\n'), resScroll, contentHeight);
+            return renderLines(bodyStr.split('\n'), contentHeight);
         }
         if (activeResponseTab === 'headers') {
             if (!response.headers)
-                return React.createElement(Text, { color: "gray" }, "No headers");
-            return renderKeyValue(response.headers, resScroll, contentHeight);
+                return React.createElement(Text, { color: "gray" }, " No headers");
+            const json = JSON.stringify(response.headers, null, 2);
+            return renderLines(json.split('\n'), contentHeight);
         }
         if (activeResponseTab === 'cookies') {
             if (!response.cookies || Object.keys(response.cookies).length === 0)
-                return React.createElement(Text, { color: "gray" }, "No cookies");
-            return renderKeyValue(response.cookies, resScroll, contentHeight);
+                return React.createElement(Text, { color: "gray" }, " No cookies");
+            const json = JSON.stringify(response.cookies, null, 2);
+            return renderLines(json.split('\n'), contentHeight);
         }
         return null;
     };
@@ -312,28 +139,28 @@ export default function RightPanel({ activeRequestTab, activeResponseTab, active
         { id: 'cookies', label: 'Cookies' },
         { id: 'curl', label: 'Curl' },
     ];
+    const renderEditorHint = (isVisible) => (React.createElement(Box, { height: 1 }, isVisible && React.createElement(Text, { color: "yellow" }, " Press 'e' to open external editor.")));
     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, { 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(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, { width: 30, flexDirection: "row", justifyContent: "flex-end" },
-                    response ? (React.createElement(Text, { color: response.status < 300 ? 'green' : 'red' },
-                        response.status,
-                        " ",
-                        response.statusText)) : (React.createElement(Text, null, " ")),
-                    React.createElement(Box, { width: 15 },
-                        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(Box, { flexDirection: "column", height: requestBoxHeight, borderStyle: "single", borderColor: activePanel === 'request' ? 'green' : 'gray', paddingX: 0 },
+            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(TabHeader, { tabs: reqTabs, active: activeRequestTab, isFocused: activePanel === 'request' && subFocus === 'TABS', shortcutPrefix: "rq", commandMode: commandMode }),
+            React.createElement(Box, { flexDirection: "column", paddingX: 0, marginTop: 0, flexGrow: 1 }, renderRequestContent()),
+            renderEditorHint(activePanel === 'request' && subFocus === 'TABS')),
+        React.createElement(Box, { flexDirection: "column", height: responseBoxHeight, borderStyle: "single", borderColor: activePanel === 'response' ? 'green' : 'gray', paddingX: 0 },
+            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,
+                    " ",
+                    response.statusText)) : (React.createElement(Text, null, " ")))),
+            React.createElement(TabHeader, { tabs: resTabs, active: activeResponseTab, isFocused: activePanel === 'response' && subFocus === 'TABS', shortcutPrefix: "rs", commandMode: commandMode }),
+            React.createElement(Box, { flexDirection: "column", paddingX: 0, marginTop: 0, flexGrow: 1 }, renderResponseContent()),
+            renderEditorHint(activePanel === 'response' && subFocus === 'TABS'))));
 }

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", "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

@@ -2,6 +2,7 @@
  * 애플리케이션 Redux Slice
  */
 import { createSlice } from '@reduxjs/toolkit';
+import { scaffoldSchema } from '../utils/schema-scaffolder.js';
 // 초기 상태
 const initialState = {
     document: null,
@@ -122,16 +123,33 @@ const appSlice = createSlice({
         },
         detailSet: (state, action) => {
             const endpoint = action.payload;
+            let initialRequestBody = '';
+            if (state.document) {
+                // 1. requestBody (OpenAPI 3.0)
+                if (endpoint.requestBody?.schema) {
+                    const scaffolded = scaffoldSchema(endpoint.requestBody.schema, state.document);
+                    initialRequestBody = JSON.stringify(scaffolded, null, 2);
+                }
+                // 2. in: body parameter (Swagger 2.0)
+                else {
+                    const bodyParam = endpoint.parameters.find((p) => p.in === 'body');
+                    if (bodyParam && bodyParam.schema) {
+                        const scaffolded = scaffoldSchema(bodyParam.schema, state.document);
+                        initialRequestBody = JSON.stringify(scaffolded, null, 2);
+                    }
+                }
+            }
             state.screen = 'DETAIL';
             state.detail = {
                 endpoint,
                 focusedFieldIndex: 0,
                 parameterValues: {},
-                requestBody: '',
+                requestBody: initialRequestBody,
                 headers: {},
                 activePanel: 'left',
                 activeRequestTab: 'headers',
                 activeResponseTab: 'body',
+                subFocus: 'TABS',
                 response: null,
             };
         },
@@ -170,6 +188,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 +201,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,20 @@ 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'));
+            }
+        }
+        else if (detail.activePanel === 'response') {
+            if (detail.subFocus === 'TITLE') {
+                dispatch(detailSetPanel('request'));
+                dispatch(detailSetSubFocus('TABS'));
+            }
+            else if (detail.subFocus === 'TABS') {
+                dispatch(detailSetSubFocus('TITLE'));
+            }
+        }
     }
 };
 // j Key (Down)
@@ -37,14 +55,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 +98,36 @@ 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(detailSetPanel('response'));
+                dispatch(detailSetSubFocus('TITLE'));
+            }
+        }
+        else if (detail.activePanel === 'response') {
+            if (detail.subFocus === 'TITLE') {
+                dispatch(detailSetSubFocus('TABS'));
+            }
+        }
     }
 };
 // 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 +136,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') {
+                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 +176,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 +194,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';
     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';
 } | {
     type: 'DETAIL_SET_RESPONSE';
     payload: ApiResponse | null;

package/package.json

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