@gomjellie/lazyapi 0.0.1

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

@@ -0,0 +1,77 @@
+/**
+ * 파라미터 입력 폼 컴포넌트
+ */
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+export default function ParameterForm({ endpoint, parameterValues, requestBody, focusedFieldIndex, mode, onParameterChange, onBodyChange, }) {
+    const [localValue, setLocalValue] = useState('');
+    // 파라미터를 타입별로 그룹화
+    const pathParams = endpoint.parameters.filter((p) => p.in === 'path');
+    const queryParams = endpoint.parameters.filter((p) => p.in === 'query');
+    const headerParams = endpoint.parameters.filter((p) => p.in === 'header');
+    const allFields = [
+        ...pathParams.map((p, i) => ({ type: 'path', param: p, index: i })),
+        ...queryParams.map((p, i) => ({ type: 'query', param: p, index: pathParams.length + i })),
+        ...headerParams.map((p, i) => ({
+            type: 'header',
+            param: p,
+            index: pathParams.length + queryParams.length + i,
+        })),
+    ];
+    // Body 필드가 있는지 확인
+    const hasBody = endpoint.requestBody !== undefined;
+    const bodyFieldIndex = allFields.length;
+    // 포커스 변경시 로컬 값 업데이트
+    useEffect(() => {
+        if (focusedFieldIndex < allFields.length) {
+            const field = allFields[focusedFieldIndex];
+            setLocalValue(parameterValues[field.param.name] || '');
+        }
+        else if (focusedFieldIndex === bodyFieldIndex) {
+            setLocalValue(requestBody);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [focusedFieldIndex]);
+    const renderParameter = (param, globalIndex, type) => {
+        const isFocused = globalIndex === focusedFieldIndex;
+        const value = parameterValues[param.name] || '';
+        return (React.createElement(Box, { key: param.name, flexDirection: "column", marginBottom: 1 },
+            React.createElement(Box, null,
+                React.createElement(Text, { color: isFocused ? 'green' : 'white', bold: isFocused },
+                    param.name,
+                    param.required && React.createElement(Text, { color: "red" }, "*")),
+                React.createElement(Text, { dimColor: true },
+                    " (",
+                    type,
+                    ")"),
+                param.schema &&
+                    typeof param.schema === 'object' &&
+                    !('$ref' in param.schema) &&
+                    param.schema.type && React.createElement(Text, { dimColor: true },
+                    " - ",
+                    param.schema.type)),
+            React.createElement(Box, { borderStyle: isFocused ? 'round' : 'single', borderColor: isFocused ? 'green' : 'gray', paddingX: 1 }, mode === 'INSERT' && isFocused ? (React.createElement(TextInput, { value: localValue, onChange: (val) => {
+                    setLocalValue(val);
+                    onParameterChange(param.name, val);
+                } })) : (React.createElement(Text, { color: value ? 'white' : 'gray' }, value || (param.example ? String(param.example) : '(empty)')))),
+            param.description && (React.createElement(Box, { marginLeft: 1 },
+                React.createElement(Text, { dimColor: true }, param.description)))));
+    };
+    return (React.createElement(Box, { flexDirection: "column" },
+        pathParams.length > 0 && (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: "green" }, "\u25B8 Path Parameters"),
+            React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, pathParams.map((param, i) => renderParameter(param, i, 'path'))))),
+        queryParams.length > 0 && (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: "green" }, "\u25B8 Query Parameters"),
+            React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, queryParams.map((param, i) => renderParameter(param, pathParams.length + i, 'query'))))),
+        headerParams.length > 0 && (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: "green" }, "\u25B8 Headers"),
+            React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, headerParams.map((param, i) => renderParameter(param, pathParams.length + queryParams.length + i, 'header'))))),
+        hasBody && (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { bold: true, color: "green" }, "\u25B8 Request Body"),
+            React.createElement(Box, { flexDirection: "column", paddingLeft: 2, marginTop: 1, borderStyle: focusedFieldIndex === bodyFieldIndex ? 'round' : 'single', borderColor: focusedFieldIndex === bodyFieldIndex ? 'green' : 'gray', paddingX: 1 }, mode === 'INSERT' && focusedFieldIndex === bodyFieldIndex ? (React.createElement(TextInput, { value: localValue, onChange: (val) => {
+                    setLocalValue(val);
+                    onBodyChange(val);
+                } })) : (React.createElement(Text, { color: requestBody ? 'white' : 'gray' }, requestBody || '(empty)')))))));
+}

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

@@ -0,0 +1,22 @@
+/**
+ * API Detail 우측 패널 - Request/Response 분할
+ */
+import React from 'react';
+import { ApiResponse, AppMode } 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';
+    response: ApiResponse | null;
+    endpoint: Endpoint;
+    parameterValues: Record<string, string>;
+    requestBody: string;
+    requestHeaders: Record<string, string>;
+    baseURL: string;
+    mode: AppMode;
+    isLoading: boolean;
+    commandMode?: boolean;
+}
+export default function RightPanel({ activeRequestTab, activeResponseTab, activePanel, response, endpoint, parameterValues, requestBody, requestHeaders, baseURL, mode, isLoading, commandMode, }: RightPanelProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,251 @@
+/**
+ * API Detail 우측 패널 - Request/Response 분할
+ */
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { useKeyPress } from '../../hooks/useKeyPress.js';
+import { useAppDispatch } from '../../store/hooks.js';
+import { detailSetPanel } from '../../store/appSlice.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;
+    let hintText = '';
+    const shouldShowGlobal = commandMode && !!shortcutPrefix;
+    const shouldShowLocal = commandMode && isFocused;
+    if (shouldShowGlobal) {
+        // Global shortcut (e.g., r1, r2) - Show always in command mode
+        showHint = true;
+        hintText = `[${shortcutPrefix}${index + 1}] `;
+    }
+    else if (shouldShowLocal) {
+        // Contextual shortcut (1, 2) - Show only when focused
+        showHint = true;
+        hintText = `[${index + 1}] `;
+    }
+    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 + ' ')));
+})));
+export default function RightPanel({ activeRequestTab, activeResponseTab, activePanel, response, endpoint, parameterValues, requestBody, requestHeaders, baseURL, mode, isLoading, commandMode = false, }) {
+    const { stdout } = useStdout();
+    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(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setReqScroll(0);
+    }, [activeRequestTab, endpoint]);
+    // 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: () => {
+            const maxScroll = Math.max(0, reqTotalLines - contentHeight);
+            if (reqScroll < maxScroll) {
+                setReqScroll((prev) => Math.min(prev + 1, maxScroll));
+            }
+            else {
+                // 스크롤이 끝에 도달하면 Response 패널로 이동
+                dispatch(detailSetPanel('response'));
+            }
+        },
+        k: () => {
+            setReqScroll((prev) => Math.max(prev - 1, 0));
+        },
+    }, mode === 'NORMAL' && activePanel === 'request');
+    // -- Response Box State --
+    const [resScroll, setResScroll] = useState(0);
+    useEffect(() => {
+        // 탭이 변경될 때만 스크롤 리셋 (response 변경 시에는 리셋하지 않음)
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setResScroll(0);
+    }, [activeResponseTab]);
+    // Curl Command 생성 (메모이제이션)
+    const curlCommand = useMemo(() => {
+        let path = endpoint.path;
+        endpoint.parameters
+            .filter((p) => p.in === 'path')
+            .forEach((param) => {
+            const value = parameterValues[param.name] || '';
+            path = path.replace(`{${param.name}}`, value);
+        });
+        const queryParams = endpoint.parameters
+            .filter((p) => p.in === 'query')
+            .filter((param) => parameterValues[param.name])
+            .map((param) => `${param.name}=${encodeURIComponent(parameterValues[param.name])}`)
+            .join('&');
+        const url = queryParams ? `${baseURL}${path}?${queryParams}` : `${baseURL}${path}`;
+        let headerStr = '';
+        Object.entries(requestHeaders).forEach(([key, val]) => {
+            headerStr += ` -H '${key}: ${val}'`;
+        });
+        let bodyStr = '';
+        if (requestBody) {
+            bodyStr = ` -d '${requestBody.replace(/'/g, "'\\''")}'`;
+        }
+        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: () => {
+            const maxScroll = Math.max(0, resTotalLines - contentHeight);
+            if (resScroll < maxScroll) {
+                setResScroll((prev) => Math.min(prev + 1, maxScroll));
+            }
+        },
+        k: () => {
+            if (resScroll > 0) {
+                setResScroll((prev) => Math.max(prev - 1, 0));
+            }
+            else {
+                // 스크롤이 맨 위에 도달하면 Request 패널로 이동
+                dispatch(detailSetPanel('request'));
+            }
+        },
+    }, 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))));
+    };
+    // Request Box 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);
+        }
+        if (activeRequestTab === 'body') {
+            if (!requestBody)
+                return React.createElement(Text, { color: "gray" }, "No body");
+            return renderLines(requestBody.split('\n'), reqScroll, 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 null;
+    };
+    // Response Box Render
+    const renderResponseContent = () => {
+        if (activeResponseTab === 'curl') {
+            return renderLines(curlCommand.split('\n'), resScroll, contentHeight);
+        }
+        if (isLoading) {
+            return (React.createElement(Box, null,
+                React.createElement(Text, { color: "green" },
+                    React.createElement(Spinner, { type: "dots" })),
+                React.createElement(Text, { color: "green" }, " Sending request...")));
+        }
+        if (!response)
+            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);
+        }
+        if (activeResponseTab === 'headers') {
+            if (!response.headers)
+                return React.createElement(Text, { color: "gray" }, "No headers");
+            return renderKeyValue(response.headers, resScroll, 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 null;
+    };
+    // Tabs
+    const reqTabs = [
+        { id: 'headers', label: 'Headers' },
+        { id: 'body', label: 'Body' },
+        { id: 'query', label: 'Query' },
+    ];
+    const resTabs = [
+        { id: 'body', label: 'Body' },
+        { id: 'headers', label: 'Headers' },
+        { id: 'cookies', label: 'Cookies' },
+        { id: 'curl', label: 'Curl' },
+    ];
+    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()))));
+}

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

@@ -0,0 +1,12 @@
+/**
+ * 엔드포인트 목록 컴포넌트
+ */
+import React from 'react';
+import { Endpoint } from '../../types/openapi.js';
+interface EndpointListProps {
+    endpoints: Endpoint[];
+    selectedIndex: number;
+    commandMode?: boolean;
+}
+export default function EndpointList({ endpoints, selectedIndex, commandMode }: EndpointListProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,72 @@
+/**
+ * 엔드포인트 목록 컴포넌트
+ */
+import React, { useState } from 'react';
+import { Box, Text, useStdout } from 'ink';
+export default function EndpointList({ endpoints, selectedIndex, commandMode = false }) {
+    const { stdout } = useStdout();
+    // 가용 높이 계산: 터미널 높이 - 헤더(2) - 푸터(2) - 메인박스보더(2) - 메인박스패딩(1) - 필터바(1) - 검색바(1) = 9
+    // 안전하게 여유를 두어 계산 (-9)
+    const availableHeight = (stdout?.rows || 24) - 9;
+    // 가용 너비 계산 및 Description 컬럼 너비 산출
+    const terminalWidth = stdout?.columns || 80;
+    // Explorer 너비 동적 계산 (Explorer.tsx와 동일한 로직)
+    const explorerWidth = Math.min(Math.max(30, Math.floor(terminalWidth * 0.25)), 50);
+    // 레이아웃 고정 너비 요소들:
+    // Explorer(explorerWidth) + ExplorerMargin(1) + ListBorder(2) + ListPadding(2) + ItemPadding(2) + MethodMargin(1) + PathMargin(1)
+    const LAYOUT_OVERHEAD = explorerWidth + 1 + 2 + 2 + 2 + 1 + 1; // explorerWidth + 9
+    const METHOD_WIDTH = 10; // Reduced from 12
+    const availableContentWidth = Math.max(0, terminalWidth - LAYOUT_OVERHEAD - METHOD_WIDTH);
+    // Path에게 가용 공간의 70% 할당, Description에게 나머지 30% 할당
+    // Path가 중요하므로 더 많은 공간 배정
+    const pathWidth = Math.floor(availableContentWidth * 0.7);
+    const descriptionWidth = Math.max(0, availableContentWidth - pathWidth);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    // 렌더링 중에 스크롤 오프셋 조정 (Derived State Pattern)
+    if (selectedIndex >= 0) {
+        const visibleStart = scrollOffset;
+        const visibleEnd = scrollOffset + availableHeight - 1;
+        if (selectedIndex < visibleStart) {
+            setScrollOffset(selectedIndex);
+        }
+        else if (selectedIndex > visibleEnd) {
+            setScrollOffset(selectedIndex - availableHeight + 1);
+        }
+    }
+    const getMethodColor = (method) => {
+        const colors = {
+            GET: 'blue',
+            POST: 'green',
+            PUT: 'yellow',
+            DELETE: 'red',
+            PATCH: 'magenta',
+            OPTIONS: 'cyan',
+            HEAD: 'gray',
+            TRACE: 'white',
+        };
+        return colors[method] || 'white';
+    };
+    if (endpoints.length === 0) {
+        return (React.createElement(Box, { justifyContent: "flex-start", alignItems: "flex-start", flexGrow: 1 },
+            React.createElement(Text, { dimColor: true }, "\uD83D\uDD75\uFE0F No endpoints found ")));
+    }
+    // 보이는 범위의 엔드포인트만 렌더링
+    const visibleEndpoints = endpoints.slice(scrollOffset, scrollOffset + availableHeight);
+    return (React.createElement(Box, { flexDirection: "column", paddingX: 0 }, visibleEndpoints.map((endpoint, visibleIndex) => {
+        const actualIndex = scrollOffset + visibleIndex;
+        const isSelected = actualIndex === selectedIndex;
+        // Method string formatted
+        const methodStr = `[${endpoint.method}]`;
+        return (React.createElement(Box, { key: endpoint.id, paddingX: 1, marginBottom: 0, flexDirection: "row", backgroundColor: isSelected ? 'green' : undefined },
+            commandMode && React.createElement(Text, { color: "yellow" },
+                "e",
+                actualIndex + 1,
+                " "),
+            React.createElement(Box, { width: METHOD_WIDTH, marginRight: 1 },
+                React.createElement(Text, { bold: isSelected, color: isSelected ? 'black' : getMethodColor(endpoint.method), backgroundColor: isSelected ? 'green' : undefined, wrap: "truncate" }, methodStr)),
+            React.createElement(Box, { width: pathWidth, marginRight: 1 },
+                React.createElement(Text, { bold: isSelected, color: isSelected ? 'black' : 'white', backgroundColor: isSelected ? 'green' : undefined, wrap: "truncate-end" }, endpoint.path)),
+            React.createElement(Box, { width: descriptionWidth },
+                React.createElement(Text, { dimColor: !isSelected, color: isSelected ? 'black' : undefined, backgroundColor: isSelected ? 'green' : undefined, wrap: "truncate-end" }, endpoint.summary || endpoint.description || ''))));
+    })));
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ExplorerProps {
+    tags: string[];
+    selectedTagIndex: number;
+    activeTag: string | null;
+    isFocused: boolean;
+    searchQuery: string;
+    isSearchMode: boolean;
+    commandMode?: boolean;
+    onSearchChange: (query: string) => void;
+}
+export default function Explorer({ tags, selectedTagIndex, activeTag, isFocused, searchQuery, isSearchMode, commandMode, onSearchChange, }: ExplorerProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import TextInput from 'ink-text-input';
+export default function Explorer({ tags, selectedTagIndex, activeTag, isFocused, searchQuery, isSearchMode, commandMode = false, onSearchChange, }) {
+    const { stdout } = useStdout();
+    const allItems = ['Overview', ...tags];
+    // 검색 필터링
+    const filteredItems = searchQuery
+        ? allItems.filter((item) => item.toLowerCase().includes(searchQuery.toLowerCase()))
+        : allItems;
+    // 가용 높이 계산: 터미널 높이 - 헤더(2) - 푸터(2) - Explorer박스보더(2) - Explorer박스패딩(1) - 타이틀(1) - 검색바/마진(1) = 9
+    // searchBarHeight가 1이면 margin이 0이므로 내부 overhead는 항상 2 (Title 1 + (Margin 1 or Search 1))
+    // 따라서 항상 -9를 하면 됨.
+    const availableHeight = (stdout?.rows || 24) - 9;
+    // 터미널 너비의 25% 사용 (최소 30, 최대 50)
+    const terminalWidth = stdout?.columns || 80;
+    const explorerWidth = Math.min(Math.max(30, Math.floor(terminalWidth * 0.25)), 50);
+    // 선택된 항목이 보이도록 스크롤 오프셋 상태 관리
+    const [scrollOffset, setScrollOffset] = useState(0);
+    // 스크롤 오프셋 계산 (Render 단계에서 상태 업데이트)
+    if (selectedTagIndex >= 0) {
+        let newOffset = scrollOffset;
+        // 리스트 전체 길이가 화면보다 작으면 스크롤 0
+        if (filteredItems.length <= availableHeight) {
+            newOffset = 0;
+        }
+        else {
+            // 위로 벗어난 경우
+            if (selectedTagIndex < newOffset) {
+                newOffset = selectedTagIndex;
+            }
+            // 아래로 벗어난 경우
+            else if (selectedTagIndex >= newOffset + availableHeight) {
+                newOffset = selectedTagIndex - availableHeight + 1;
+            }
+            // 범위 보정 (최대 스크롤 제한)
+            const maxOffset = filteredItems.length - availableHeight;
+            newOffset = Math.max(0, Math.min(newOffset, maxOffset));
+        }
+        if (newOffset !== scrollOffset) {
+            setScrollOffset(newOffset);
+        }
+    }
+    // 보이는 범위의 항목만 렌더링
+    const visibleItems = filteredItems.slice(scrollOffset, scrollOffset + availableHeight);
+    return (React.createElement(Box, { flexDirection: "column", width: explorerWidth, borderStyle: isFocused ? 'round' : 'single', borderColor: isFocused ? 'green' : 'gray', paddingX: 1, paddingBottom: 1, paddingTop: 0 },
+        React.createElement(Box, { marginBottom: isSearchMode || searchQuery ? 0 : 1 },
+            React.createElement(Text, { bold: true, color: "green", underline: true }, "TAG EXPLORER")),
+        (isSearchMode || searchQuery) && (React.createElement(Box, null,
+            React.createElement(Text, { color: "green" }, "\u279C "),
+            isSearchMode ? (React.createElement(TextInput, { value: searchQuery, onChange: onSearchChange, placeholder: "Search tags..." })) : (React.createElement(Text, { dimColor: true }, searchQuery)))),
+        React.createElement(Box, { flexDirection: "column" }, visibleItems.map((item, visibleIndex) => {
+            const actualIndex = scrollOffset + visibleIndex;
+            const isSelected = actualIndex === selectedTagIndex;
+            const isActive = (item === 'Overview' && activeTag === null) || item === activeTag;
+            // Selection cursor style (vim-like)
+            // If focused and selected: background green, black text
+            // If not focused but selected: maybe underline? or just keep it active.
+            // Actually, 'selectedTagIndex' tracks the cursor position in the explorer.
+            // 'activeTag' tracks which tag is currently filtering the list.
+            let backgroundColor = undefined;
+            let color = 'white';
+            if (isSelected && isFocused) {
+                backgroundColor = 'green';
+                color = 'black';
+            }
+            else if (isActive) {
+                color = 'green';
+            }
+            else {
+                color = 'gray';
+            }
+            return (React.createElement(Box, { key: item },
+                commandMode && (React.createElement(Box, { width: 5 },
+                    React.createElement(Text, { color: "yellow" },
+                        "t",
+                        actualIndex + 1))),
+                React.createElement(Box, { width: 3 },
+                    React.createElement(Text, { color: color, bold: isActive || isSelected }, "\uD83C\uDFF7\uFE0F")),
+                React.createElement(Box, { flexGrow: 1 },
+                    React.createElement(Text, { backgroundColor: backgroundColor, color: color, bold: isActive || isSelected, wrap: "truncate-end" }, item))));
+        }))));
+}

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

@@ -0,0 +1,12 @@
+/**
+ * HTTP 메서드 필터 바 컴포넌트
+ */
+import React from 'react';
+import { HttpMethod } from '../../types/openapi.js';
+interface FilterBarProps {
+    activeFilter: HttpMethod | 'ALL';
+    commandMode?: boolean;
+    onFilterChange: (filter: HttpMethod | 'ALL') => void;
+}
+export default function FilterBar({ activeFilter, commandMode, onFilterChange: _onFilterChange }: FilterBarProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,33 @@
+/**
+ * HTTP 메서드 필터 바 컴포넌트
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { HTTP_METHODS } from '../../types/openapi.js';
+export default function FilterBar({ activeFilter, commandMode = false, onFilterChange: _onFilterChange }) {
+    const filters = ['ALL', ...HTTP_METHODS];
+    const getMethodColor = (method) => {
+        if (method === 'ALL')
+            return 'green';
+        const colors = {
+            GET: 'blue',
+            POST: 'green',
+            PUT: 'yellow',
+            DELETE: 'red',
+            PATCH: 'magenta',
+            OPTIONS: 'cyan',
+            HEAD: 'gray',
+            TRACE: 'white',
+        };
+        return colors[method] || 'white';
+    };
+    return (React.createElement(Box, { paddingX: 1, paddingY: 0, gap: 1 }, filters.slice(0, 6).map((filter, index) => {
+        const isActive = filter === activeFilter;
+        const color = getMethodColor(filter);
+        return (React.createElement(Box, { key: filter, gap: 0 },
+            commandMode && React.createElement(Text, { color: "yellow" },
+                "m",
+                index + 1),
+            React.createElement(Text, { backgroundColor: isActive ? color : undefined, color: isActive ? 'black' : 'gray', bold: isActive }, ' ' + filter + ' ')));
+    })));
+}

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

@@ -0,0 +1,5 @@
+/**
+ * API 목록 화면
+ */
+import React from 'react';
+export default function ListView(): React.JSX.Element;