@gomjellie/lazyapi 0.0.2 → 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/App.js

@@ -41,7 +41,7 @@ function AppContent({ filePath }) {
     // 로딩 상태
     if (loading) {
         return (React.createElement(Box, { flexDirection: "column", padding: 1, height: terminalHeight },
-            React.createElement(LoadingSpinner, { message: "OpenAPI \uBB38\uC11C\uB97C \uB85C\uB529\uD558\uB294 \uC911..." })));
+            React.createElement(LoadingSpinner, { message: "Fetching OpenAPI document from URL..." })));
     }
     // 에러 상태
     if (error) {

package/dist/components/common/LoadingSpinner.js

@@ -4,12 +4,16 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
+import BigText from 'ink-big-text';
+import Gradient from 'ink-gradient';
 export default function LoadingSpinner({ message = '로딩 중...' }) {
-    return (React.createElement(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: 10 },
-        React.createElement(Box, { marginBottom: 1 },
-            React.createElement(Text, { color: "green" },
+    return (React.createElement(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1 },
+        React.createElement(Gradient, { name: "rainbow" },
+            React.createElement(BigText, { text: "LAZYAPI" })),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: "cyan" },
                 React.createElement(Spinner, { type: "dots" })),
-            React.createElement(Text, { color: "green", bold: true },
+            React.createElement(Text, { italic: true, color: "gray" },
                 ' ',
                 message))));
 }

package/dist/components/common/StatusBar.js

@@ -3,7 +3,9 @@
  */
 import React from 'react';
 import { Box, Text } from 'ink';
+import { useAppSelector } from '../../store/hooks.js';
 export default function StatusBar({ title, version, currentPath, mode, status }) {
+    const navigationCount = useAppSelector((state) => state.app.navigationCount);
     const getModeColor = () => {
         switch (mode) {
             case 'INSERT':
@@ -29,6 +31,7 @@ export default function StatusBar({ title, version, currentPath, mode, status })
             status && React.createElement(Text, { color: "green" },
                 "\u25CF ",
                 status),
+            navigationCount !== null && (React.createElement(Text, { color: "yellow", bold: true }, navigationCount)),
             React.createElement(Text, { bold: true, color: getModeColor() },
                 "[",
                 mode,

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

@@ -4,7 +4,8 @@
 import React from 'react';
 import { Box, Text, useStdout } from 'ink';
 import { useAppSelector, useAppDispatch } from '../../store/hooks.js';
-import { setMode, detailSetFocus, detailSetPanel, detailSetRequestTab, detailSetResponseTab, detailSetResponse, detailSetParam, } from '../../store/appSlice.js';
+import { setMode, detailSetFocus, detailSetPanel, detailSetRequestTab, detailSetResponseTab, detailSetResponse, detailSetParam, detailSetBody, } from '../../store/appSlice.js';
+import { navigateUp, navigateDown, navigateLeft, navigateRight, } from '../../store/navigationActions.js';
 import { useNavigation } from '../../hooks/useNavigation.js';
 import { useKeyPress } from '../../hooks/useKeyPress.js';
 import { useApiClient } from '../../hooks/useApiClient.js';
@@ -38,7 +39,9 @@ export default function DetailView() {
         queryParams.length +
         headerParams.length +
         bodyParams.length +
-        formDataParams.length;
+        formDataParams.length +
+        (endpoint?.requestBody && bodyParams.length === 0 ? 1 : 0) +
+        (endpoint?.responses?.length || 0);
     const handleExecuteRequest = async () => {
         if (!detail || !document)
             return;
@@ -60,8 +63,8 @@ export default function DetailView() {
         if (cmd === 'q' || cmd === 'quit' || cmd === 'exit') {
             process.exit(0);
         }
-        // 2. 접두사 있는 명령어 처리 (pp1, qp1, h1, rb1, rs1, rq1...)
-        const match = cmd.match(/^(pp|qp|h|rb|rs|rq)(\d+)$/);
+        // 2. 접두사 있는 명령어 처리 (pp1, qp1, h1, rqb1, rs1, rq1, rb1...)
+        const match = cmd.match(/^(pp|qp|h|rqb|rs|rq|rb)(\d+)$/);
         if (match) {
             const type = match[1];
             const index = parseInt(match[2], 10);
@@ -97,10 +100,9 @@ export default function DetailView() {
                     dispatch(detailSetPanel('request'));
                 }
             }
-            else if (type === 'rb') {
-                // Request Body
+            else if (type === 'rqb') {
+                // Request Body (기존 rb -> rqb)
                 const bodyStartIndex = pathParams.length + queryParams.length + headerParams.length;
-                // 만약 bodyParams가 있으면 그쪽으로, 아니면 requestBody(Raw)로
                 if (bodyParams.length > 0) {
                     if (targetIndex >= 0 && targetIndex < bodyParams.length) {
                         dispatch(detailSetFocus(bodyStartIndex + targetIndex));
@@ -108,14 +110,26 @@ export default function DetailView() {
                     }
                 }
                 else if (endpoint?.requestBody) {
-                    // Form Data가 있으면 그 뒤
                     const rawBodyIndex = bodyStartIndex + formDataParams.length;
-                    if (targetIndex === 0) { // rb1 only for raw body
+                    if (targetIndex === 0) {
                         dispatch(detailSetFocus(rawBodyIndex));
                         dispatch(detailSetPanel('left'));
                     }
                 }
             }
+            else if (type === 'rb') {
+                // Responses (사용자 요청: rb)
+                const responsesStartIndex = pathParams.length +
+                    queryParams.length +
+                    headerParams.length +
+                    bodyParams.length +
+                    formDataParams.length +
+                    (endpoint?.requestBody && bodyParams.length === 0 ? 1 : 0);
+                if (targetIndex >= 0 && targetIndex < (endpoint?.responses?.length || 0)) {
+                    dispatch(detailSetFocus(responsesStartIndex + targetIndex));
+                    dispatch(detailSetPanel('left'));
+                }
+            }
             else if (type === 'rs') {
                 // Response Tabs
                 const tabs = [
@@ -166,28 +180,16 @@ export default function DetailView() {
     // 키보드 입력 처리 (NORMAL 모드)
     useKeyPress({
         j: () => {
-            if (activePanel === 'left' && totalFields > 0) {
-                // 다음 필드로
-                const nextIndex = Math.min(detail.focusedFieldIndex + 1, totalFields - 1);
-                dispatch(detailSetFocus(nextIndex));
-            }
+            dispatch(navigateDown());
         },
         k: () => {
-            if (activePanel === 'left' && totalFields > 0) {
-                // 이전 필드로
-                const prevIndex = Math.max(detail.focusedFieldIndex - 1, 0);
-                dispatch(detailSetFocus(prevIndex));
-            }
+            dispatch(navigateUp());
         },
         h: () => {
-            // 왼쪽 패널로 (어디서든)
-            dispatch(detailSetPanel('left'));
+            dispatch(navigateLeft());
         },
         l: () => {
-            // 오른쪽(Request) 패널로
-            if (activePanel === 'left') {
-                dispatch(detailSetPanel('request'));
-            }
+            dispatch(navigateRight());
         },
         onTab: () => {
             // 패널 순환: Left -> Request -> Response -> Left
@@ -201,12 +203,6 @@ export default function DetailView() {
                 dispatch(detailSetPanel('left'));
             }
         },
-        i: () => {
-            // INSERT 모드로 전환 (왼쪽 패널에서만)
-            if (activePanel === 'left') {
-                dispatch(setMode('INSERT'));
-            }
-        },
         u: () => {
             // 뒤로 가기
             goBack();
@@ -224,7 +220,7 @@ export default function DetailView() {
         onEscape: () => {
             dispatch(setMode('NORMAL'));
             dispatch(setCommandInput(''));
-        }
+        },
     }, mode === 'COMMAND');
     // INSERT 모드 키보드 입력 처리
     useKeyPress({
@@ -249,18 +245,22 @@ export default function DetailView() {
         ];
     const baseURL = document ? getServerUrl(document) || '' : '';
     const terminalHeight = stdout?.rows || 24;
-    // detail 또는 endpoint가 없는 경우 에러 표시
-    if (!detail || !endpoint) {
+    // detail 또는 endpoint 또는 document가 없는 경우 에러 표시
+    if (!detail || !endpoint || !document) {
         return (React.createElement(Box, { flexDirection: "column", height: terminalHeight },
             React.createElement(StatusBar, { title: "API DETAIL", currentPath: "", mode: mode, status: "ERROR" }),
             React.createElement(Box, { flexGrow: 1, justifyContent: "center", alignItems: "center" },
-                React.createElement(Text, { color: "red" }, "\uC0C1\uC138 \uC815\uBCF4\uB97C \uD45C\uC2DC\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.")),
+                React.createElement(Text, { color: "red" }, "\uC0C1\uC138 \uC815\uBCF4\uB97C \uD45C\uC2DC\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. (\uBB38\uC11C \uB610\uB294 \uC5D4\uB4DC\uD3EC\uC778\uD2B8 \uC815\uBCF4 \uC5C6\uC74C)")),
             React.createElement(KeybindingFooter, { bindings: [], mode: mode })));
     }
     return (React.createElement(Box, { flexDirection: "column", height: terminalHeight },
         React.createElement(StatusBar, { title: "API DETAIL", currentPath: endpoint.path, mode: mode, status: loading ? 'LOADING...' : 'READY' }),
-        React.createElement(Box, { flexGrow: 1, overflow: "hidden" },
-            React.createElement(LeftPanel, { endpoint: endpoint, parameterValues: detail.parameterValues, focusedFieldIndex: detail.focusedFieldIndex, mode: mode, isFocused: activePanel === 'left', document: document, commandMode: mode === 'COMMAND', onParameterChange: (key, value) => dispatch(detailSetParam({ key, value })), onExitInsertMode: () => dispatch(setMode('NORMAL')) }),
-            React.createElement(RightPanel, { activeRequestTab: activeRequestTab, activeResponseTab: activeResponseTab, activePanel: activePanel, response: detail.response, endpoint: endpoint, parameterValues: detail.parameterValues, requestBody: detail.requestBody, requestHeaders: detail.headers, baseURL: baseURL, mode: mode, isLoading: loading, commandMode: mode === 'COMMAND' })),
+        React.createElement(Box, { flexGrow: 1 },
+            React.createElement(LeftPanel, { endpoint: endpoint, parameterValues: detail.parameterValues, requestBodyValue: detail.requestBody, focusedFieldIndex: detail.focusedFieldIndex, mode: mode, isFocused: activePanel === 'left', document: document, commandMode: mode === 'COMMAND', onParameterChange: (key, value) => dispatch(detailSetParam({ key, value })), onExitInsertMode: () => dispatch(setMode('NORMAL')), onRequestBodyEdit: (value) => {
+                    dispatch(detailSetBody(value));
+                    dispatch(detailSetPanel('request'));
+                    dispatch(detailSetRequestTab('body'));
+                }, onSetMode: (m) => dispatch(setMode(m)) }),
+            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/LeftPanel.d.ts

@@ -7,6 +7,7 @@ import { AppMode } from '../../types/app-state.js';
 interface LeftPanelProps {
     endpoint: Endpoint;
     parameterValues: Record<string, string>;
+    requestBodyValue?: string;
     focusedFieldIndex: number;
     mode: AppMode;
     isFocused: boolean;
@@ -14,6 +15,8 @@ interface LeftPanelProps {
     commandMode?: boolean;
     onParameterChange: (key: string, value: string) => void;
     onExitInsertMode?: () => void;
+    onRequestBodyEdit?: (value: string) => void;
+    onSetMode?: (mode: AppMode) => void;
 }
-export default function LeftPanel({ endpoint, parameterValues, focusedFieldIndex, mode, isFocused, document, commandMode, onParameterChange, onExitInsertMode, }: LeftPanelProps): React.JSX.Element;
+export default function LeftPanel({ endpoint, parameterValues, requestBodyValue, focusedFieldIndex, mode, isFocused, document, commandMode, onParameterChange, onExitInsertMode, onRequestBodyEdit, onSetMode, }: LeftPanelProps): React.JSX.Element;
 export {};