port-arranger 0.0.1

package/dist/cli/core/state.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cli/core/state.test.js

@@ -0,0 +1,72 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { join } from 'path';
+import { mkdtemp, rm, readFile } from 'fs/promises';
+import { tmpdir } from 'os';
+import { loadState, saveState, addProcess, removeProcess, getAllProcesses, setStatePath, } from './state.js';
+describe('state', () => {
+    let tempDir;
+    let testStatePath;
+    const mockMapping = {
+        port: 3001,
+        pid: 12345,
+        command: 'next dev',
+        originalCommand: 'next dev',
+        injectionType: 'env',
+        cwd: '/test/project',
+        startedAt: new Date().toISOString(),
+        status: 'running',
+    };
+    beforeEach(async () => {
+        // 임시 디렉토리 생성
+        tempDir = await mkdtemp(join(tmpdir(), 'port-arranger-test-'));
+        testStatePath = join(tempDir, 'state.json');
+        setStatePath(testStatePath);
+    });
+    afterEach(async () => {
+        // 임시 디렉토리 삭제
+        await rm(tempDir, { recursive: true, force: true });
+    });
+    it('빈 상태에서 시작해야 한다', async () => {
+        const state = await loadState();
+        expect(state.mappings).toEqual({});
+    });
+    it('상태를 저장하고 불러올 수 있어야 한다', async () => {
+        const state = { mappings: { myproject: mockMapping } };
+        await saveState(state);
+        const loaded = await loadState();
+        expect(loaded.mappings['myproject']).toEqual(mockMapping);
+    });
+    it('프로세스를 추가할 수 있어야 한다', async () => {
+        await addProcess('myproject', mockMapping);
+        const state = await loadState();
+        expect(state.mappings['myproject']).toBeDefined();
+        expect(state.mappings['myproject'].port).toBe(3001);
+    });
+    it('프로세스를 제거할 수 있어야 한다', async () => {
+        await addProcess('myproject', mockMapping);
+        await removeProcess('myproject');
+        const state = await loadState();
+        expect(state.mappings['myproject']).toBeUndefined();
+    });
+    it('존재하지 않는 프로세스 제거 시 에러가 발생하지 않아야 한다', async () => {
+        await expect(removeProcess('nonexistent')).resolves.not.toThrow();
+    });
+    it('모든 프로세스를 조회할 수 있어야 한다', async () => {
+        const mapping2 = {
+            ...mockMapping,
+            port: 3002,
+            pid: 12346,
+        };
+        await addProcess('project1', mockMapping);
+        await addProcess('project2', mapping2);
+        const processes = await getAllProcesses();
+        expect(Object.keys(processes)).toHaveLength(2);
+        expect(processes['project1'].port).toBe(3001);
+        expect(processes['project2'].port).toBe(3002);
+    });
+    it('상태 파일이 유효한 JSON이어야 한다', async () => {
+        await addProcess('myproject', mockMapping);
+        const content = await readFile(testStatePath, 'utf-8');
+        expect(() => JSON.parse(content)).not.toThrow();
+    });
+});

package/dist/cli/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli/index.js

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { runCommand } from './commands/run.js';
+import { listCommand } from './commands/list.js';
+import { stopCommand } from './commands/stop.js';
+import { uiCommand } from './commands/ui.js';
+const program = new Command();
+program
+    .name('pa')
+    .description('Run multiple dev servers simultaneously without port conflicts')
+    .version('0.0.1');
+program
+    .command('run')
+    .description('Run a development server')
+    .argument('<command>', 'Command to execute')
+    .option('-n, --name <name>', 'Project name (default: current directory)')
+    .option('-p, --port <port>', 'Preferred port number', parseInt)
+    .option('--dry-run', 'Print command without executing')
+    .action(async (command, options) => {
+    try {
+        await runCommand(command, options);
+    }
+    catch (error) {
+        console.error('Error:', error.message);
+        process.exit(1);
+    }
+});
+program
+    .command('list')
+    .alias('ls')
+    .description('List running processes')
+    .action(async () => {
+    try {
+        await listCommand();
+    }
+    catch (error) {
+        console.error('Error:', error.message);
+        process.exit(1);
+    }
+});
+program
+    .command('stop')
+    .description('Stop a process')
+    .argument('[name]', 'Name of process to stop')
+    .option('-a, --all', 'Stop all processes')
+    .action(async (name, options) => {
+    try {
+        await stopCommand(name, options);
+    }
+    catch (error) {
+        console.error('Error:', error.message);
+        process.exit(1);
+    }
+});
+program
+    .command('ui')
+    .description('Launch GUI dashboard')
+    .action(async () => {
+    try {
+        await uiCommand();
+    }
+    catch (error) {
+        console.error('Error:', error.message);
+        process.exit(1);
+    }
+});
+program.parse();

package/dist/gui/main/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/gui/main/index.js

@@ -0,0 +1,60 @@
+import { app, BrowserWindow, ipcMain } from 'electron';
+import path from 'path';
+import { startWatching, stopWatching, addListener, getProcesses } from './state-watcher';
+import { setupIpcHandlers } from './ipc-handlers';
+let mainWindow = null;
+function createWindow() {
+    mainWindow = new BrowserWindow({
+        width: 400,
+        height: 500,
+        minWidth: 320,
+        minHeight: 300,
+        frame: false,
+        transparent: false,
+        resizable: true,
+        webPreferences: {
+            preload: path.join(__dirname, 'preload.js'),
+            contextIsolation: true,
+            nodeIntegration: false,
+        },
+    });
+    // 렌더러 로드
+    if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
+        mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
+    }
+    else {
+        mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
+    }
+    // IPC 핸들러 설정
+    setupIpcHandlers(mainWindow);
+    // 상태 파일 감시 시작
+    startWatching();
+    // 프로세스 목록 가져오기 핸들러
+    ipcMain.handle('get-processes', async () => {
+        return getProcesses();
+    });
+    // 상태 업데이트 리스너
+    const removeListener = addListener((processes) => {
+        if (mainWindow && !mainWindow.isDestroyed()) {
+            mainWindow.webContents.send('processes-update', processes);
+        }
+    });
+    mainWindow.on('closed', () => {
+        removeListener();
+        mainWindow = null;
+    });
+}
+app.whenReady().then(() => {
+    createWindow();
+    app.on('activate', () => {
+        if (BrowserWindow.getAllWindows().length === 0) {
+            createWindow();
+        }
+    });
+});
+app.on('window-all-closed', () => {
+    stopWatching();
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
+});

package/dist/gui/main/ipc-handlers.d.ts

@@ -0,0 +1,2 @@
+import { BrowserWindow } from 'electron';
+export declare function setupIpcHandlers(mainWindow: BrowserWindow): void;

package/dist/gui/main/ipc-handlers.js

@@ -0,0 +1,66 @@
+import { ipcMain, shell } from 'electron';
+import { readFile, writeFile } from 'fs/promises';
+import { join } from 'path';
+import { homedir } from 'os';
+import treeKill from 'tree-kill';
+const STATE_PATH = join(homedir(), '.port-arranger', 'state.json');
+async function loadState() {
+    try {
+        const content = await readFile(STATE_PATH, 'utf-8');
+        return JSON.parse(content);
+    }
+    catch {
+        return { mappings: {} };
+    }
+}
+async function saveState(state) {
+    await writeFile(STATE_PATH, JSON.stringify(state, null, 2), 'utf-8');
+}
+function killProcess(pid) {
+    return new Promise((resolve, reject) => {
+        treeKill(pid, 'SIGTERM', (err) => {
+            if (err) {
+                reject(err);
+            }
+            else {
+                resolve();
+            }
+        });
+    });
+}
+export function setupIpcHandlers(mainWindow) {
+    ipcMain.handle('stop-process', async (_event, name) => {
+        const state = await loadState();
+        const mapping = state.mappings[name];
+        if (!mapping) {
+            throw new Error(`프로세스를 찾을 수 없습니다: ${name}`);
+        }
+        await killProcess(mapping.pid);
+        const { [name]: _, ...rest } = state.mappings;
+        await saveState({ ...state, mappings: rest });
+    });
+    ipcMain.handle('restart-process', async (_event, name) => {
+        const state = await loadState();
+        const mapping = state.mappings[name];
+        if (!mapping) {
+            throw new Error(`프로세스를 찾을 수 없습니다: ${name}`);
+        }
+        // 프로세스 종료 후 재시작은 CLI를 통해 해야 함
+        // GUI에서는 단순히 중지만 수행
+        await killProcess(mapping.pid);
+        const { [name]: _, ...rest } = state.mappings;
+        await saveState({ ...state, mappings: rest });
+    });
+    ipcMain.handle('open-browser', async (_event, port) => {
+        await shell.openExternal(`http://localhost:${port}`);
+    });
+    ipcMain.handle('set-always-on-top', async (_event, value) => {
+        mainWindow.setAlwaysOnTop(value);
+    });
+    ipcMain.on('minimize-window', () => {
+        mainWindow.minimize();
+    });
+    ipcMain.on('close-window', () => {
+        mainWindow.close();
+    });
+}

package/dist/gui/main/state-watcher.d.ts

@@ -0,0 +1,7 @@
+import type { ProcessMapping } from '../../shared/types';
+type ProcessesCallback = (processes: Record<string, ProcessMapping>) => void;
+export declare function startWatching(): void;
+export declare function stopWatching(): void;
+export declare function addListener(callback: ProcessesCallback): () => void;
+export declare function getProcesses(): Promise<Record<string, ProcessMapping>>;
+export {};

package/dist/gui/main/state-watcher.js

@@ -0,0 +1,56 @@
+import { watch } from 'chokidar';
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import { homedir } from 'os';
+const STATE_PATH = join(homedir(), '.port-arranger', 'state.json');
+let watcher = null;
+const listeners = new Set();
+async function loadState() {
+    try {
+        const content = await readFile(STATE_PATH, 'utf-8');
+        const state = JSON.parse(content);
+        return state.mappings;
+    }
+    catch {
+        return {};
+    }
+}
+async function notifyListeners() {
+    const processes = await loadState();
+    listeners.forEach((callback) => callback(processes));
+}
+export function startWatching() {
+    if (watcher)
+        return;
+    watcher = watch(STATE_PATH, {
+        persistent: true,
+        ignoreInitial: false,
+        awaitWriteFinish: {
+            stabilityThreshold: 100,
+            pollInterval: 50,
+        },
+    });
+    watcher.on('add', () => notifyListeners());
+    watcher.on('change', () => notifyListeners());
+    watcher.on('unlink', () => {
+        listeners.forEach((callback) => callback({}));
+    });
+}
+export function stopWatching() {
+    if (watcher) {
+        watcher.close();
+        watcher = null;
+    }
+    listeners.clear();
+}
+export function addListener(callback) {
+    listeners.add(callback);
+    // 즉시 현재 상태 전달
+    loadState().then(callback);
+    return () => {
+        listeners.delete(callback);
+    };
+}
+export async function getProcesses() {
+    return loadState();
+}

package/dist/gui/preload/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/gui/preload/index.js

@@ -0,0 +1,20 @@
+import { contextBridge, ipcRenderer } from 'electron';
+const api = {
+    getProcesses: () => ipcRenderer.invoke('get-processes'),
+    onProcessesUpdate: (callback) => {
+        const handler = (_event, processes) => {
+            callback(processes);
+        };
+        ipcRenderer.on('processes-update', handler);
+        return () => {
+            ipcRenderer.removeListener('processes-update', handler);
+        };
+    },
+    stopProcess: (name) => ipcRenderer.invoke('stop-process', name),
+    restartProcess: (name) => ipcRenderer.invoke('restart-process', name),
+    openBrowser: (port) => ipcRenderer.invoke('open-browser', port),
+    setAlwaysOnTop: (value) => ipcRenderer.invoke('set-always-on-top', value),
+    minimizeWindow: () => ipcRenderer.send('minimize-window'),
+    closeWindow: () => ipcRenderer.send('close-window'),
+};
+contextBridge.exposeInMainWorld('electronAPI', api);

package/dist/gui/renderer/App.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function App(): React.ReactElement;

package/dist/gui/renderer/App.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { TitleBar } from './components/TitleBar';
+import { ProcessList } from './components/ProcessList';
+import { useProcesses } from './hooks/useProcesses';
+const styles = {
+    app: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100vh',
+        backgroundColor: 'var(--bg-primary)',
+    },
+    content: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+    },
+    loading: {
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'var(--text-secondary)',
+    },
+    error: {
+        padding: '12px',
+        margin: '12px',
+        backgroundColor: 'rgba(233, 69, 96, 0.1)',
+        border: '1px solid var(--accent)',
+        borderRadius: '8px',
+        color: 'var(--accent)',
+        fontSize: '13px',
+    },
+};
+export default function App() {
+    const { processes, loading, error, stopProcess, openBrowser } = useProcesses();
+    return (<div style={styles.app}>
+      <TitleBar />
+      <div style={styles.content}>
+        {error && <div style={styles.error}>{error}</div>}
+        {loading ? (<div style={styles.loading}>로딩 중...</div>) : (<ProcessList processes={processes} onStop={stopProcess} onOpenBrowser={openBrowser}/>)}
+      </div>
+    </div>);
+}

package/dist/gui/renderer/components/ProcessItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ProcessMapping } from '../../../shared/types';
+interface ProcessItemProps {
+    name: string;
+    process: ProcessMapping;
+    onStop: (name: string) => void;
+    onOpenBrowser: (port: number) => void;
+}
+export declare function ProcessItem({ name, process, onStop, onOpenBrowser, }: ProcessItemProps): React.ReactElement;
+export {};

package/dist/gui/renderer/components/ProcessItem.js

@@ -0,0 +1,115 @@
+import React from 'react';
+const styles = {
+    item: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '12px',
+        backgroundColor: 'var(--bg-item)',
+        borderRadius: '8px',
+        gap: '8px',
+    },
+    header: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    name: {
+        fontSize: '14px',
+        fontWeight: 600,
+        color: 'var(--text-primary)',
+    },
+    status: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+        fontSize: '12px',
+    },
+    statusDot: {
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        backgroundColor: 'var(--success)',
+    },
+    info: {
+        display: 'flex',
+        gap: '16px',
+        fontSize: '12px',
+        color: 'var(--text-secondary)',
+    },
+    port: {
+        cursor: 'pointer',
+        color: 'var(--accent)',
+        textDecoration: 'underline',
+        background: 'none',
+        border: 'none',
+        fontSize: '12px',
+        padding: 0,
+    },
+    command: {
+        fontSize: '11px',
+        color: 'var(--text-secondary)',
+        fontFamily: 'monospace',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+    actions: {
+        display: 'flex',
+        gap: '8px',
+        marginTop: '4px',
+    },
+    button: {
+        padding: '6px 12px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        fontWeight: 500,
+        transition: 'all 0.15s',
+    },
+    stopButton: {
+        backgroundColor: 'var(--accent)',
+        color: 'white',
+    },
+};
+export function ProcessItem({ name, process, onStop, onOpenBrowser, }) {
+    const formatTime = (isoString) => {
+        const date = new Date(isoString);
+        return date.toLocaleTimeString('ko-KR', {
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    };
+    return (<div style={styles.item}>
+      <div style={styles.header}>
+        <span style={styles.name}>{name}</span>
+        <div style={styles.status}>
+          <span style={styles.statusDot}/>
+          <span>실행 중</span>
+        </div>
+      </div>
+
+      <div style={styles.info}>
+        <span>
+          포트:{' '}
+          <button style={styles.port} onClick={() => onOpenBrowser(process.port)} title="브라우저에서 열기">
+            {process.port}
+          </button>
+        </span>
+        <span>PID: {process.pid}</span>
+        <span>시작: {formatTime(process.startedAt)}</span>
+      </div>
+
+      <div style={styles.command} title={process.originalCommand}>
+        {process.originalCommand}
+      </div>
+
+      <div style={styles.actions}>
+        <button style={{ ...styles.button, ...styles.stopButton }} onClick={() => onStop(name)} onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = 'var(--accent-hover)';
+        }} onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = 'var(--accent)';
+        }}>
+          중지
+        </button>
+      </div>
+    </div>);
+}

package/dist/gui/renderer/components/ProcessList.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ProcessMapping } from '../../../shared/types';
+interface ProcessListProps {
+    processes: Record<string, ProcessMapping>;
+    onStop: (name: string) => void;
+    onOpenBrowser: (port: number) => void;
+}
+export declare function ProcessList({ processes, onStop, onOpenBrowser, }: ProcessListProps): React.ReactElement;
+export {};

package/dist/gui/renderer/components/ProcessList.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ProcessItem } from './ProcessItem';
+const styles = {
+    container: {
+        flex: 1,
+        overflow: 'auto',
+        padding: '12px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+    },
+    empty: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'var(--text-secondary)',
+        gap: '12px',
+        padding: '40px',
+        textAlign: 'center',
+    },
+    emptyTitle: {
+        fontSize: '16px',
+        fontWeight: 600,
+        color: 'var(--text-primary)',
+    },
+    emptyHint: {
+        fontSize: '13px',
+        lineHeight: 1.5,
+    },
+    code: {
+        backgroundColor: 'var(--bg-item)',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        fontFamily: 'monospace',
+        fontSize: '12px',
+    },
+    count: {
+        padding: '4px 12px',
+        fontSize: '12px',
+        color: 'var(--text-secondary)',
+        borderBottom: '1px solid var(--border)',
+    },
+};
+export function ProcessList({ processes, onStop, onOpenBrowser, }) {
+    const entries = Object.entries(processes);
+    if (entries.length === 0) {
+        return (<div style={styles.empty}>
+        <span style={styles.emptyTitle}>실행 중인 프로세스 없음</span>
+        <span style={styles.emptyHint}>
+          터미널에서 <code style={styles.code}>pa run</code> 명령으로
+          <br />
+          개발 서버를 실행하세요
+        </span>
+      </div>);
+    }
+    return (<>
+      <div style={styles.count}>{entries.length}개의 프로세스</div>
+      <div style={styles.container}>
+        {entries.map(([name, process]) => (<ProcessItem key={name} name={name} process={process} onStop={onStop} onOpenBrowser={onOpenBrowser}/>))}
+      </div>
+    </>);
+}

package/dist/gui/renderer/components/TitleBar.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function TitleBar(): React.ReactElement;