projax 3.3.51 → 3.3.52

package/dist/prxi.js

@@ -0,0 +1,1106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const ink_1 = require("ink");
+const core_bridge_1 = require("../../cli/src/core-bridge");
+const script_runner_1 = require("../../cli/src/script-runner");
+const child_process_1 = require("child_process");
+const path = __importStar(require("path"));
+const os = __importStar(require("os"));
+// Color scheme matching desktop app
+const colors = {
+    bgPrimary: '#0d1117',
+    bgSecondary: '#161b22',
+    bgTertiary: '#1c2128',
+    bgHover: '#21262d',
+    borderColor: '#30363d',
+    textPrimary: '#c9d1d9',
+    textSecondary: '#8b949e',
+    textTertiary: '#6e7681',
+    accentCyan: '#39c5cf',
+    accentBlue: '#58a6ff',
+    accentGreen: '#3fb950',
+    accentPurple: '#bc8cff',
+    accentOrange: '#ffa657',
+};
+// Helper function to get display path
+function getDisplayPath(fullPath) {
+    const parts = fullPath.split('/').filter(Boolean);
+    if (parts.length === 0)
+        return fullPath;
+    const lastDir = parts[parts.length - 1];
+    // If last directory is "src", go one up
+    if (lastDir === 'src' && parts.length > 1) {
+        return parts[parts.length - 2];
+    }
+    return lastDir;
+}
+// Helper function to truncate text
+function truncateText(text, maxLength) {
+    if (text.length <= maxLength)
+        return text;
+    return text.substring(0, maxLength - 3) + '...';
+}
+const HelpModal = ({ onClose }) => {
+    (0, ink_1.useInput)((input, key) => {
+        if (input === 'q' || key.escape || key.return) {
+            onClose();
+        }
+    });
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.accentCyan, padding: 1, width: 70 },
+        react_1.default.createElement(ink_1.Text, { bold: true, color: colors.accentCyan }, "PROJAX Terminal UI - Help"),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, "Navigation:"),
+        react_1.default.createElement(ink_1.Text, null, "  \u2191/k        Move up in project list"),
+        react_1.default.createElement(ink_1.Text, null, "  \u2193/j        Move down in project list"),
+        react_1.default.createElement(ink_1.Text, null, "  Tab/\u2190\u2192     Switch between list and details"),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, "List Panel Actions:"),
+        react_1.default.createElement(ink_1.Text, null, "  /          Search projects (fuzzy search)"),
+        react_1.default.createElement(ink_1.Text, null, "  s          Scan selected project for tests"),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, "Details Panel Actions:"),
+        react_1.default.createElement(ink_1.Text, null, "  \u2191\u2193/kj      Scroll details"),
+        react_1.default.createElement(ink_1.Text, null, "  e          Edit project name"),
+        react_1.default.createElement(ink_1.Text, null, "  t          Add/edit tags"),
+        react_1.default.createElement(ink_1.Text, null, "  o          Open project in editor"),
+        react_1.default.createElement(ink_1.Text, null, "  f          Open project directory"),
+        react_1.default.createElement(ink_1.Text, null, "  u          Show detected URLs"),
+        react_1.default.createElement(ink_1.Text, null, "  s          Scan project for tests"),
+        react_1.default.createElement(ink_1.Text, null, "  p          Scan ports for project"),
+        react_1.default.createElement(ink_1.Text, null, "  r          Show scripts (use CLI to run)"),
+        react_1.default.createElement(ink_1.Text, null, "  x          Stop all scripts for project"),
+        react_1.default.createElement(ink_1.Text, null, "  d          Delete project"),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, "Editing:"),
+        react_1.default.createElement(ink_1.Text, null, "  Enter      Save changes"),
+        react_1.default.createElement(ink_1.Text, null, "  Esc        Cancel editing"),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, "General:"),
+        react_1.default.createElement(ink_1.Text, null, "  q/Esc      Quit"),
+        react_1.default.createElement(ink_1.Text, null, "  ?          Show this help"),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Press any key to close...")));
+};
+const LoadingModal = ({ message }) => {
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.accentCyan, padding: 1, width: 40 },
+        react_1.default.createElement(ink_1.Text, null, message),
+        react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Please wait...")));
+};
+const ErrorModal = ({ message, onClose }) => {
+    (0, ink_1.useInput)((input, key) => {
+        if (key.escape || key.return) {
+            onClose();
+        }
+    });
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: "#f85149", padding: 1, width: 60 },
+        react_1.default.createElement(ink_1.Text, { color: "#f85149", bold: true }, "Error"),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        react_1.default.createElement(ink_1.Text, null, message),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Press any key to close...")));
+};
+const ScriptSelectionModal = ({ scripts, projectName, projectPath, onSelect, onClose }) => {
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const scriptArray = Array.from(scripts.entries());
+    (0, ink_1.useInput)((input, key) => {
+        if (key.escape || input === 'q') {
+            onClose();
+            return;
+        }
+        if (key.upArrow || input === 'k') {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+            return;
+        }
+        if (key.downArrow || input === 'j') {
+            setSelectedIndex((prev) => Math.min(scriptArray.length - 1, prev + 1));
+            return;
+        }
+        if (key.return) {
+            const [scriptName] = scriptArray[selectedIndex];
+            onSelect(scriptName, false);
+            return;
+        }
+        if (input === 'b') {
+            const [scriptName] = scriptArray[selectedIndex];
+            onSelect(scriptName, true);
+            return;
+        }
+    });
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.accentCyan, padding: 1, width: 80 },
+        react_1.default.createElement(ink_1.Text, { bold: true, color: colors.accentCyan },
+            "Run Script - ",
+            projectName),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        scriptArray.map(([name, script], index) => {
+            const isSelected = index === selectedIndex;
+            return (react_1.default.createElement(ink_1.Text, { key: name, color: isSelected ? colors.accentCyan : colors.textPrimary, bold: isSelected },
+                isSelected ? '▶ ' : '  ',
+                react_1.default.createElement(ink_1.Text, { color: colors.accentGreen }, name),
+                ' - ',
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, truncateText(script.command, 50))));
+        }),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "\u2191\u2193/kj: Navigate | Enter: Run | b: Background | Esc/q: Cancel")));
+};
+const ProjectListComponent = ({ projects, selectedIndex, runningProcesses, isFocused, height, scrollOffset, }) => {
+    const { focus } = (0, ink_1.useFocus)({ id: 'projectList' });
+    // Calculate visible range
+    const startIndex = Math.max(0, scrollOffset);
+    const hasMoreAbove = startIndex > 0;
+    const headerHeight = 1; // "Projects (12)" line
+    const paddingHeight = 2; // top + bottom padding
+    const scrollIndicatorHeight = (hasMoreAbove ? 1 : 0) + 1; // "more above" + "more below" (always reserve space)
+    const visibleHeight = Math.max(5, height - paddingHeight - headerHeight - scrollIndicatorHeight);
+    const endIndex = Math.min(projects.length, startIndex + visibleHeight);
+    const visibleProjects = projects.slice(startIndex, endIndex);
+    const hasMoreBelow = endIndex < projects.length;
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", width: "35%", height: height, borderStyle: "round", borderColor: isFocused ? colors.accentCyan : colors.borderColor, padding: 1, flexShrink: 0, flexGrow: 0 },
+        react_1.default.createElement(ink_1.Text, { bold: true, color: colors.textPrimary },
+            "Projects (",
+            projects.length,
+            ")"),
+        react_1.default.createElement(ink_1.Box, { flexDirection: "column", flexGrow: 1 }, projects.length === 0 ? (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "No projects found")) : (react_1.default.createElement(react_1.default.Fragment, null,
+            hasMoreAbove && (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary },
+                "\u2191 ",
+                startIndex,
+                " more above")),
+            visibleProjects.map((project, localIndex) => {
+                const index = startIndex + localIndex;
+                const isSelected = index === selectedIndex;
+                // Check if this project has running scripts
+                const projectRunning = runningProcesses.filter((p) => p.projectPath === project.path);
+                const hasRunningScripts = projectRunning.length > 0;
+                return (react_1.default.createElement(ink_1.Text, { key: project.id, color: isSelected ? colors.accentCyan : colors.textPrimary, bold: isSelected },
+                    isSelected ? '▶ ' : '  ',
+                    hasRunningScripts && react_1.default.createElement(ink_1.Text, { color: colors.accentGreen }, "\u25CF "),
+                    truncateText(project.name, 30),
+                    hasRunningScripts && react_1.default.createElement(ink_1.Text, { color: colors.accentGreen },
+                        " (",
+                        projectRunning.length,
+                        ")")));
+            }),
+            hasMoreBelow && (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary },
+                "\u2193 ",
+                projects.length - endIndex,
+                " more below")))))));
+};
+const ProjectDetailsComponent = ({ project, runningProcesses, isFocused, editingName, editingDescription, editingTags, editInput, allTags, onTagRemove, height, scrollOffset, }) => {
+    const { focus } = (0, ink_1.useFocus)({ id: 'projectDetails' });
+    const [scripts, setScripts] = (0, react_1.useState)(null);
+    const [ports, setPorts] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        if (!project) {
+            setScripts(null);
+            setPorts([]);
+            return;
+        }
+        // Load scripts
+        try {
+            const projectScripts = (0, script_runner_1.getProjectScripts)(project.path);
+            setScripts(projectScripts);
+        }
+        catch (error) {
+            setScripts(null);
+        }
+        // Load ports
+        try {
+            const db = (0, core_bridge_1.getDatabaseManager)();
+            const projectPorts = db.getProjectPorts(project.id);
+            setPorts(projectPorts);
+        }
+        catch (error) {
+            setPorts([]);
+        }
+    }, [project]);
+    if (!project) {
+        return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: isFocused ? colors.accentCyan : colors.borderColor, padding: 1 },
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Select a project to view details")));
+    }
+    const lastScanned = project.last_scanned
+        ? new Date(project.last_scanned * 1000).toLocaleString()
+        : 'Never';
+    // Get running processes for this project
+    const projectProcesses = runningProcesses.filter((p) => p.projectPath === project.path);
+    // Build content lines for virtual scrolling
+    const contentLines = [];
+    // Header section (always visible at top)
+    contentLines.push(editingName ? (react_1.default.createElement(ink_1.Box, { key: "edit-name" },
+        react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, "Editing name: "),
+        react_1.default.createElement(ink_1.Text, { color: colors.textPrimary }, editInput),
+        react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " (Press Enter to save, Esc to cancel)"))) : (react_1.default.createElement(ink_1.Text, { key: "name", bold: true, color: colors.textPrimary }, project.name)));
+    if (editingDescription) {
+        contentLines.push(react_1.default.createElement(ink_1.Box, { key: "edit-desc" },
+            react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, "Editing description: "),
+            react_1.default.createElement(ink_1.Text, { color: colors.textPrimary }, editInput),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " (Press Enter to save, Esc to cancel)")));
+    }
+    else if (project.description) {
+        contentLines.push(react_1.default.createElement(ink_1.Text, { key: "desc", color: colors.textSecondary }, truncateText(project.description, 100)));
+    }
+    contentLines.push(react_1.default.createElement(ink_1.Text, { key: "path", color: colors.textTertiary }, truncateText(project.path, 100)));
+    // Tags (simplified to single line)
+    if (project.tags && project.tags.length > 0) {
+        const tagsText = project.tags.join(', ');
+        contentLines.push(react_1.default.createElement(ink_1.Text, { key: "tags" },
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Tags: "),
+            react_1.default.createElement(ink_1.Text, { color: colors.accentPurple }, truncateText(tagsText, 80))));
+    }
+    if (editingTags) {
+        contentLines.push(react_1.default.createElement(ink_1.Text, { key: "edit-tags" },
+            react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, "Add tag: "),
+            react_1.default.createElement(ink_1.Text, { color: colors.textPrimary }, editInput)));
+        const suggestions = allTags.filter(t => t.toLowerCase().includes(editInput.toLowerCase()) && !project.tags?.includes(t)).slice(0, 3);
+        if (editInput && suggestions.length > 0) {
+            contentLines.push(react_1.default.createElement(ink_1.Text, { key: "suggestions" },
+                react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "Suggestions: "),
+                react_1.default.createElement(ink_1.Text, { color: colors.accentPurple }, suggestions.join(', '))));
+        }
+    }
+    contentLines.push(react_1.default.createElement(ink_1.Text, { key: "spacer1" }, " "));
+    // Stats
+    contentLines.push(react_1.default.createElement(ink_1.Box, { key: "stats" },
+        react_1.default.createElement(ink_1.Text, null,
+            "Ports: ",
+            react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, ports.length)),
+        react_1.default.createElement(ink_1.Text, null, " | "),
+        react_1.default.createElement(ink_1.Text, null,
+            "Scripts: ",
+            react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, scripts?.scripts?.size || 0))));
+    contentLines.push(react_1.default.createElement(ink_1.Text, { key: "spacer2" }, " "));
+    if (project.framework) {
+        contentLines.push(react_1.default.createElement(ink_1.Text, { key: "framework" },
+            "Framework: ",
+            react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, project.framework)));
+    }
+    contentLines.push(react_1.default.createElement(ink_1.Text, { key: "last-scanned" },
+        "Last Scanned: ",
+        lastScanned));
+    contentLines.push(react_1.default.createElement(ink_1.Text, { key: "spacer3" }, " "));
+    // Running Processes
+    if (projectProcesses.length > 0) {
+        contentLines.push(react_1.default.createElement(ink_1.Text, { key: "proc-header", bold: true, color: colors.accentGreen },
+            "Running Processes (",
+            projectProcesses.length,
+            "):"));
+        projectProcesses.forEach((process) => {
+            const uptime = Math.floor((Date.now() - process.startedAt) / 1000);
+            const minutes = Math.floor(uptime / 60);
+            const seconds = uptime % 60;
+            const uptimeStr = minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
+            contentLines.push(react_1.default.createElement(ink_1.Text, { key: `proc-${process.pid}` },
+                '  ',
+                react_1.default.createElement(ink_1.Text, { color: colors.accentGreen }, "\u25CF"),
+                ' ',
+                react_1.default.createElement(ink_1.Text, { color: colors.textPrimary }, process.scriptName),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary },
+                    " (PID: ",
+                    process.pid,
+                    ", ",
+                    uptimeStr,
+                    ")")));
+        });
+        contentLines.push(react_1.default.createElement(ink_1.Text, { key: "spacer4" }, " "));
+    }
+    // Scripts
+    if (scripts && scripts.scripts && scripts.scripts.size > 0) {
+        contentLines.push(react_1.default.createElement(ink_1.Text, { key: "scripts-header", bold: true },
+            "Available Scripts (",
+            react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, scripts.scripts.size),
+            "):"));
+        Array.from(scripts.scripts.entries()).slice(0, 5).forEach(([name, script]) => {
+            contentLines.push(react_1.default.createElement(ink_1.Text, { key: `script-${name}` },
+                '  ',
+                react_1.default.createElement(ink_1.Text, { color: colors.accentGreen }, name),
+                ' - ',
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, truncateText(script.command, 60))));
+        });
+        if (scripts.scripts.size > 5) {
+            contentLines.push(react_1.default.createElement(ink_1.Text, { key: "scripts-more", color: colors.textTertiary },
+                "  ... and ",
+                scripts.scripts.size - 5,
+                " more"));
+        }
+        contentLines.push(react_1.default.createElement(ink_1.Text, { key: "spacer5" }, " "));
+    }
+    // Ports
+    if (ports.length > 0) {
+        contentLines.push(react_1.default.createElement(ink_1.Text, { key: "ports-header", bold: true },
+            "Detected Ports (",
+            react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, ports.length),
+            "):"));
+        ports.slice(0, 5).forEach((port) => {
+            contentLines.push(react_1.default.createElement(ink_1.Text, { key: `port-${port.id}` },
+                '  ',
+                "Port ",
+                react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, port.port),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary },
+                    " - ",
+                    truncateText(port.config_source, 50))));
+        });
+        if (ports.length > 5) {
+            contentLines.push(react_1.default.createElement(ink_1.Text, { key: "ports-more", color: colors.textTertiary },
+                "  ... and ",
+                ports.length - 5,
+                " more"));
+        }
+        contentLines.push(react_1.default.createElement(ink_1.Text, { key: "spacer6" }, " "));
+    }
+    // Calculate visible range for virtual scrolling
+    // Render enough items to fill the available space
+    const startIndex = Math.max(0, scrollOffset);
+    const hasMoreAbove = startIndex > 0;
+    const paddingHeight = 2; // top + bottom padding
+    // Reserve space for scroll indicators
+    const reservedForIndicators = (hasMoreAbove ? 1 : 0) + 1;
+    // Available space for content - be less conservative now that we have truncation
+    const availableContentHeight = height - paddingHeight - reservedForIndicators;
+    const visibleHeight = Math.max(5, availableContentHeight); // Render enough to fill space
+    const endIndex = Math.min(contentLines.length, startIndex + visibleHeight);
+    const visibleContent = contentLines.slice(startIndex, endIndex);
+    const hasMoreBelow = endIndex < contentLines.length;
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", width: "65%", height: height, borderStyle: "round", borderColor: isFocused ? colors.accentCyan : colors.borderColor, padding: 1, flexShrink: 0, flexGrow: 0 },
+        react_1.default.createElement(ink_1.Box, { flexDirection: "column", flexGrow: 1 },
+            hasMoreAbove && (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary },
+                "\u2191 ",
+                startIndex,
+                " more above")),
+            visibleContent,
+            hasMoreBelow && (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary },
+                "\u2193 ",
+                contentLines.length - endIndex,
+                " more below")))));
+};
+const StatusBar = ({ focusedPanel, selectedProject }) => {
+    if (focusedPanel === 'list') {
+        return (react_1.default.createElement(ink_1.Box, { flexDirection: "column" },
+            react_1.default.createElement(ink_1.Box, null,
+                react_1.default.createElement(ink_1.Text, { color: colors.accentGreen }, "\u25CF API"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " | "),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Focus: "),
+                react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, "Projects")),
+            react_1.default.createElement(ink_1.Box, null,
+                react_1.default.createElement(ink_1.Text, { bold: true }, "/"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Search | "),
+                react_1.default.createElement(ink_1.Text, { bold: true }, "\u2191\u2193/kj"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Navigate | "),
+                react_1.default.createElement(ink_1.Text, { bold: true }, "Tab/\u2190\u2192"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Switch | "),
+                react_1.default.createElement(ink_1.Text, { bold: true }, "s"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Scan | "),
+                react_1.default.createElement(ink_1.Text, { bold: true }, "?"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Help | "),
+                react_1.default.createElement(ink_1.Text, { bold: true }, "q"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Quit"))));
+    }
+    // Details panel - show project-specific actions
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column" },
+        react_1.default.createElement(ink_1.Box, null,
+            react_1.default.createElement(ink_1.Text, { color: colors.accentGreen }, "\u25CF API"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " | "),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Focus: "),
+            react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, "Details"),
+            selectedProject && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " | "),
+                react_1.default.createElement(ink_1.Text, { color: colors.textPrimary }, selectedProject.name)))),
+        react_1.default.createElement(ink_1.Box, null,
+            react_1.default.createElement(ink_1.Text, { bold: true }, "\u2191\u2193/kj"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Scroll | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "e"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Edit | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "t"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Tags | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "o"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Editor | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "f"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Files | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "u"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " URLs | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "s"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Scan | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "p"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Ports | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "r"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Scripts | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "x"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Stop | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "d"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Delete | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "Tab"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Switch | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "?"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Help | "),
+            react_1.default.createElement(ink_1.Text, { bold: true }, "q"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Quit"))));
+};
+// Simple fuzzy search function
+function fuzzyMatch(query, text) {
+    const queryLower = query.toLowerCase();
+    const textLower = text.toLowerCase();
+    if (queryLower === '')
+        return true;
+    let queryIndex = 0;
+    for (let i = 0; i < textLower.length && queryIndex < queryLower.length; i++) {
+        if (textLower[i] === queryLower[queryIndex]) {
+            queryIndex++;
+        }
+    }
+    return queryIndex === queryLower.length;
+}
+const App = () => {
+    const { exit } = (0, ink_1.useApp)();
+    const { focusNext, focusPrevious } = (0, ink_1.useFocusManager)();
+    const [allProjects, setAllProjects] = (0, react_1.useState)([]);
+    const [projects, setProjects] = (0, react_1.useState)([]);
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const [showHelp, setShowHelp] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [loadingMessage, setLoadingMessage] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)(null);
+    const [runningProcesses, setRunningProcesses] = (0, react_1.useState)([]);
+    const [focusedPanel, setFocusedPanel] = (0, react_1.useState)('list');
+    // Editing state
+    const [editingName, setEditingName] = (0, react_1.useState)(false);
+    const [editingDescription, setEditingDescription] = (0, react_1.useState)(false);
+    const [editingTags, setEditingTags] = (0, react_1.useState)(false);
+    const [editInput, setEditInput] = (0, react_1.useState)('');
+    const [showUrls, setShowUrls] = (0, react_1.useState)(false);
+    const [allTags, setAllTags] = (0, react_1.useState)([]);
+    // Search state
+    const [showSearch, setShowSearch] = (0, react_1.useState)(false);
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [listScrollOffset, setListScrollOffset] = (0, react_1.useState)(0);
+    const [detailsScrollOffset, setDetailsScrollOffset] = (0, react_1.useState)(0);
+    // Script selection state
+    const [showScriptModal, setShowScriptModal] = (0, react_1.useState)(false);
+    const [scriptModalData, setScriptModalData] = (0, react_1.useState)(null);
+    // Get terminal dimensions
+    const terminalHeight = process.stdout.rows || 24;
+    const availableHeight = terminalHeight - 3; // Subtract status bar
+    (0, react_1.useEffect)(() => {
+        loadProjects();
+        loadRunningProcesses();
+        loadAllTags();
+        // Refresh running processes every 5 seconds
+        const interval = setInterval(() => {
+            loadRunningProcesses();
+        }, 5000);
+        return () => clearInterval(interval);
+    }, []);
+    // Reset editing state and scroll when project changes
+    (0, react_1.useEffect)(() => {
+        setEditingName(false);
+        setEditingDescription(false);
+        setEditingTags(false);
+        setEditInput('');
+        setDetailsScrollOffset(0); // Reset scroll when switching projects
+    }, [selectedIndex]);
+    // Update scroll offset when selected index changes
+    (0, react_1.useEffect)(() => {
+        const visibleHeight = Math.max(1, availableHeight - 3);
+        setListScrollOffset(prevOffset => {
+            if (selectedIndex < prevOffset) {
+                return Math.max(0, selectedIndex);
+            }
+            else if (selectedIndex >= prevOffset + visibleHeight) {
+                return Math.max(0, selectedIndex - visibleHeight + 1);
+            }
+            return prevOffset;
+        });
+    }, [selectedIndex, availableHeight]);
+    const loadAllTags = () => {
+        try {
+            const db = (0, core_bridge_1.getDatabaseManager)();
+            const allProjects = (0, core_bridge_1.getAllProjects)();
+            const tagsSet = new Set();
+            allProjects.forEach((project) => {
+                if (project.tags && Array.isArray(project.tags)) {
+                    project.tags.forEach((tag) => tagsSet.add(tag));
+                }
+            });
+            setAllTags(Array.from(tagsSet));
+        }
+        catch (error) {
+            setAllTags([]);
+        }
+    };
+    const loadProjects = () => {
+        const loadedProjects = (0, core_bridge_1.getAllProjects)();
+        setAllProjects(loadedProjects);
+        filterProjects(loadedProjects, searchQuery);
+    };
+    const filterProjects = (projectsToFilter, query) => {
+        if (!query.trim()) {
+            setProjects(projectsToFilter);
+            return;
+        }
+        const filtered = projectsToFilter.filter(project => {
+            const nameMatch = fuzzyMatch(query, project.name);
+            const descMatch = project.description ? fuzzyMatch(query, project.description) : false;
+            const pathMatch = fuzzyMatch(query, project.path);
+            const tagsMatch = project.tags?.some((tag) => fuzzyMatch(query, tag)) || false;
+            return nameMatch || descMatch || pathMatch || tagsMatch;
+        });
+        setProjects(filtered);
+        // Adjust selected index if current selection is out of bounds
+        if (selectedIndex >= filtered.length) {
+            setSelectedIndex(Math.max(0, filtered.length - 1));
+        }
+    };
+    const loadRunningProcesses = async () => {
+        try {
+            const processes = await (0, script_runner_1.getRunningProcessesClean)();
+            setRunningProcesses(processes);
+        }
+        catch (error) {
+            setRunningProcesses([]);
+        }
+    };
+    const selectedProject = projects.length > 0 ? projects[selectedIndex] : null;
+    // Helper function to get editor command
+    const getEditorCommand = () => {
+        try {
+            // Try to load settings from core
+            const corePath = path.join(__dirname, '..', '..', 'core', 'dist', 'settings');
+            const settingsPath = path.join(__dirname, '..', '..', '..', 'core', 'dist', 'settings');
+            let settings;
+            try {
+                settings = require(corePath);
+            }
+            catch {
+                try {
+                    settings = require(settingsPath);
+                }
+                catch {
+                    // Fallback to default
+                    return { command: 'code', args: [] };
+                }
+            }
+            const editorSettings = settings.getEditorSettings();
+            let command;
+            const args = [];
+            if (editorSettings.type === 'custom' && editorSettings.customPath) {
+                command = editorSettings.customPath;
+            }
+            else {
+                switch (editorSettings.type) {
+                    case 'vscode':
+                        command = 'code';
+                        break;
+                    case 'cursor':
+                        command = 'cursor';
+                        break;
+                    case 'windsurf':
+                        command = 'windsurf';
+                        break;
+                    case 'zed':
+                        command = 'zed';
+                        break;
+                    default:
+                        command = 'code';
+                }
+            }
+            return { command, args };
+        }
+        catch (error) {
+            return { command: 'code', args: [] };
+        }
+    };
+    // Helper function to open project in editor
+    const openInEditor = (projectPath) => {
+        try {
+            const { command, args } = getEditorCommand();
+            (0, child_process_1.spawn)(command, [...args, projectPath], {
+                detached: true,
+                stdio: 'ignore',
+            }).unref();
+        }
+        catch (error) {
+            setError(`Failed to open editor: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    };
+    // Helper function to open project directory
+    const openInFiles = (projectPath) => {
+        try {
+            let command;
+            const args = [projectPath];
+            if (os.platform() === 'darwin') {
+                command = 'open';
+            }
+            else if (os.platform() === 'win32') {
+                command = 'explorer';
+            }
+            else {
+                command = 'xdg-open';
+            }
+            (0, child_process_1.spawn)(command, args, {
+                detached: true,
+                stdio: 'ignore',
+            }).unref();
+        }
+        catch (error) {
+            setError(`Failed to open file manager: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    };
+    // Helper function to get URLs from project
+    const getProjectUrls = (project) => {
+        const urls = new Set();
+        // Add URLs from running processes
+        const projectProcesses = runningProcesses.filter((p) => p.projectPath === project.path);
+        for (const process of projectProcesses) {
+            if (process.detectedUrls && Array.isArray(process.detectedUrls)) {
+                for (const url of process.detectedUrls) {
+                    urls.add(url);
+                }
+            }
+        }
+        // Add URLs from detected ports
+        try {
+            const db = (0, core_bridge_1.getDatabaseManager)();
+            const projectPorts = db.getProjectPorts(project.id);
+            for (const portInfo of projectPorts) {
+                const url = `http://localhost:${portInfo.port}`;
+                urls.add(url);
+            }
+        }
+        catch (error) {
+            // Ignore
+        }
+        return Array.from(urls).sort();
+    };
+    // Handler for script selection
+    const handleScriptSelect = async (scriptName, background) => {
+        if (!scriptModalData)
+            return;
+        setShowScriptModal(false);
+        setIsLoading(true);
+        setLoadingMessage(`Running ${scriptName}${background ? ' in background' : ''}...`);
+        try {
+            if (background) {
+                await (0, script_runner_1.runScriptInBackground)(scriptModalData.projectPath, scriptModalData.projectName, scriptName, [], false);
+                setIsLoading(false);
+                await loadRunningProcesses();
+            }
+            else {
+                setIsLoading(false);
+                // Run in foreground - the CLI will exit and terminal control will be handed over
+                await (0, script_runner_1.runScript)(scriptModalData.projectPath, scriptName, [], false);
+                exit();
+            }
+        }
+        catch (err) {
+            setIsLoading(false);
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    };
+    (0, ink_1.useInput)((input, key) => {
+        // Handle search mode
+        if (showSearch) {
+            if (key.escape) {
+                setShowSearch(false);
+                setSearchQuery('');
+                filterProjects(allProjects, '');
+                return;
+            }
+            if (key.return) {
+                setShowSearch(false);
+                return;
+            }
+            if (key.backspace || key.delete) {
+                const newQuery = searchQuery.slice(0, -1);
+                setSearchQuery(newQuery);
+                filterProjects(allProjects, newQuery);
+                return;
+            }
+            if (input && input.length === 1 && !key.ctrl && !key.meta) {
+                const newQuery = searchQuery + input;
+                setSearchQuery(newQuery);
+                filterProjects(allProjects, newQuery);
+                return;
+            }
+            return;
+        }
+        // Don't process input if modal is showing
+        if (showHelp || isLoading || error || showUrls || showScriptModal) {
+            // Handle URLs modal
+            if (showUrls && (key.escape || key.return || input === 'q' || input === 'u')) {
+                setShowUrls(false);
+                return;
+            }
+            return;
+        }
+        // Search shortcut
+        if (input === '/') {
+            setShowSearch(true);
+            setSearchQuery('');
+            return;
+        }
+        // Handle editing modes
+        if (editingName || editingDescription || editingTags) {
+            if (key.escape) {
+                setEditingName(false);
+                setEditingDescription(false);
+                setEditingTags(false);
+                setEditInput('');
+                return;
+            }
+            if (key.return) {
+                // Save changes
+                if (selectedProject) {
+                    if (editingName && editInput.trim()) {
+                        try {
+                            const db = (0, core_bridge_1.getDatabaseManager)();
+                            db.updateProjectName(selectedProject.id, editInput.trim());
+                            loadProjects();
+                            setEditingName(false);
+                            setEditInput('');
+                        }
+                        catch (err) {
+                            setError(err instanceof Error ? err.message : String(err));
+                        }
+                    }
+                    else if (editingDescription) {
+                        try {
+                            const db = (0, core_bridge_1.getDatabaseManager)();
+                            db.updateProject(selectedProject.id, { description: editInput.trim() || null });
+                            loadProjects();
+                            setEditingDescription(false);
+                            setEditInput('');
+                        }
+                        catch (err) {
+                            setError(err instanceof Error ? err.message : String(err));
+                        }
+                    }
+                    else if (editingTags) {
+                        // Handle tag input
+                        const newTag = editInput.trim();
+                        if (newTag) {
+                            try {
+                                const db = (0, core_bridge_1.getDatabaseManager)();
+                                const currentTags = selectedProject.tags || [];
+                                if (!currentTags.includes(newTag)) {
+                                    db.updateProject(selectedProject.id, { tags: [...currentTags, newTag] });
+                                    loadProjects();
+                                    loadAllTags();
+                                }
+                                setEditInput('');
+                            }
+                            catch (err) {
+                                setError(err instanceof Error ? err.message : String(err));
+                            }
+                        }
+                    }
+                }
+                return;
+            }
+            // Handle backspace
+            if (key.backspace || key.delete) {
+                setEditInput(prev => prev.slice(0, -1));
+                return;
+            }
+            // Handle regular input
+            if (input && input.length === 1) {
+                setEditInput(prev => prev + input);
+                return;
+            }
+            return;
+        }
+        // Quit
+        if (input === 'q' || key.escape) {
+            exit();
+            return;
+        }
+        // Help
+        if (input === '?') {
+            setShowHelp(true);
+            return;
+        }
+        // Switch panels with Tab or Left/Right arrows
+        if (key.tab || key.leftArrow || key.rightArrow) {
+            setFocusedPanel((prev) => prev === 'list' ? 'details' : 'list');
+            return;
+        }
+        // Navigation (only when focused on list)
+        if (focusedPanel === 'list') {
+            if (key.upArrow || input === 'k') {
+                setSelectedIndex((prev) => {
+                    const newIndex = Math.max(0, prev - 1);
+                    // Update scroll offset
+                    const visibleHeight = Math.max(1, availableHeight - 3);
+                    if (newIndex < listScrollOffset) {
+                        setListScrollOffset(Math.max(0, newIndex));
+                    }
+                    return newIndex;
+                });
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setSelectedIndex((prev) => {
+                    const newIndex = Math.min(projects.length - 1, prev + 1);
+                    // Update scroll offset
+                    const visibleHeight = Math.max(1, availableHeight - 3);
+                    if (newIndex >= listScrollOffset + visibleHeight) {
+                        setListScrollOffset(Math.max(0, newIndex - visibleHeight + 1));
+                    }
+                    return newIndex;
+                });
+                return;
+            }
+        }
+        // Details panel actions
+        if (focusedPanel === 'details' && selectedProject) {
+            // Scroll details panel
+            if (key.upArrow || input === 'k') {
+                setDetailsScrollOffset(prev => Math.max(0, prev - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                const visibleHeight = Math.max(1, availableHeight - 3);
+                // Estimate content height (rough calculation)
+                setDetailsScrollOffset(prev => prev + 1);
+                return;
+            }
+            // Edit name
+            if (input === 'e') {
+                setEditingName(true);
+                setEditingDescription(false);
+                setEditingTags(false);
+                setEditInput(selectedProject.name);
+                return;
+            }
+            // Edit tags
+            if (input === 't') {
+                setEditingTags(true);
+                setEditingName(false);
+                setEditingDescription(false);
+                setEditInput('');
+                return;
+            }
+            // Open in editor
+            if (input === 'o') {
+                openInEditor(selectedProject.path);
+                return;
+            }
+            // Open in file manager
+            if (input === 'f') {
+                openInFiles(selectedProject.path);
+                return;
+            }
+            // Show URLs
+            if (input === 'u') {
+                setShowUrls(true);
+                return;
+            }
+            // Delete project
+            if (input === 'd') {
+                setIsLoading(true);
+                setLoadingMessage(`Deleting ${selectedProject.name}...`);
+                setTimeout(async () => {
+                    try {
+                        const db = (0, core_bridge_1.getDatabaseManager)();
+                        db.removeProject(selectedProject.id);
+                        loadProjects();
+                        if (selectedIndex >= projects.length - 1) {
+                            setSelectedIndex(Math.max(0, projects.length - 2));
+                        }
+                        setIsLoading(false);
+                    }
+                    catch (err) {
+                        setIsLoading(false);
+                        setError(err instanceof Error ? err.message : String(err));
+                    }
+                }, 100);
+                return;
+            }
+        }
+        // Scan project
+        if (input === 's' && selectedProject) {
+            setIsLoading(true);
+            setLoadingMessage(`Scanning ${selectedProject.name}...`);
+            setTimeout(async () => {
+                try {
+                    await (0, core_bridge_1.scanProject)(selectedProject.id);
+                    loadProjects();
+                    setIsLoading(false);
+                }
+                catch (err) {
+                    setIsLoading(false);
+                    setError(err instanceof Error ? err.message : String(err));
+                }
+            }, 100);
+            return;
+        }
+        // Scan ports
+        if (input === 'p' && selectedProject) {
+            setIsLoading(true);
+            setLoadingMessage(`Scanning ports for ${selectedProject.name}...`);
+            setTimeout(async () => {
+                try {
+                    // Import port scanner dynamically
+                    const { scanProjectPorts } = await Promise.resolve().then(() => __importStar(require('../../cli/src/port-scanner')));
+                    await scanProjectPorts(selectedProject.id);
+                    loadProjects();
+                    setIsLoading(false);
+                }
+                catch (err) {
+                    setIsLoading(false);
+                    setError(err instanceof Error ? err.message : String(err));
+                }
+            }, 100);
+            return;
+        }
+        // Run script
+        if (input === 'r' && selectedProject) {
+            try {
+                const projectScripts = (0, script_runner_1.getProjectScripts)(selectedProject.path);
+                if (projectScripts.scripts.size === 0) {
+                    setError(`No scripts found in ${selectedProject.name}`);
+                    return;
+                }
+                setScriptModalData({
+                    scripts: projectScripts.scripts,
+                    projectName: selectedProject.name,
+                    projectPath: selectedProject.path,
+                });
+                setShowScriptModal(true);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : String(err));
+            }
+            return;
+        }
+        // Stop all scripts for project
+        if (input === 'x' && selectedProject) {
+            setIsLoading(true);
+            setLoadingMessage(`Stopping scripts for ${selectedProject.name}...`);
+            setTimeout(async () => {
+                try {
+                    const projectProcesses = runningProcesses.filter((p) => p.projectPath === selectedProject.path);
+                    if (projectProcesses.length === 0) {
+                        setIsLoading(false);
+                        setError(`No running scripts for ${selectedProject.name}`);
+                        return;
+                    }
+                    for (const proc of projectProcesses) {
+                        await (0, script_runner_1.stopScript)(proc.pid);
+                    }
+                    await loadRunningProcesses();
+                    setIsLoading(false);
+                }
+                catch (err) {
+                    setIsLoading(false);
+                    setError(err instanceof Error ? err.message : String(err));
+                }
+            }, 100);
+            return;
+        }
+    });
+    if (showHelp) {
+        return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", padding: 1 },
+            react_1.default.createElement(HelpModal, { onClose: () => setShowHelp(false) })));
+    }
+    if (isLoading) {
+        return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", padding: 1 },
+            react_1.default.createElement(LoadingModal, { message: loadingMessage })));
+    }
+    if (error) {
+        return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", padding: 1 },
+            react_1.default.createElement(ErrorModal, { message: error, onClose: () => setError(null) })));
+    }
+    if (showSearch) {
+        return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", padding: 1 },
+            react_1.default.createElement(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.accentCyan, padding: 1, width: 60 },
+                react_1.default.createElement(ink_1.Text, { bold: true, color: colors.accentCyan }, "Search Projects"),
+                react_1.default.createElement(ink_1.Text, null, " "),
+                react_1.default.createElement(ink_1.Text, { color: colors.textPrimary },
+                    "/",
+                    searchQuery,
+                    react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "_")),
+                react_1.default.createElement(ink_1.Text, null, " "),
+                projects.length === 0 ? (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary },
+                    "No projects match \"",
+                    searchQuery,
+                    "\"")) : (react_1.default.createElement(ink_1.Text, { color: colors.textSecondary },
+                    "Found ",
+                    projects.length,
+                    " project",
+                    projects.length !== 1 ? 's' : '')),
+                react_1.default.createElement(ink_1.Text, null, " "),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Press Enter to confirm, Esc to cancel"))));
+    }
+    if (showUrls && selectedProject) {
+        const urls = getProjectUrls(selectedProject);
+        return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", padding: 1 },
+            react_1.default.createElement(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.accentCyan, padding: 1, width: 70 },
+                react_1.default.createElement(ink_1.Text, { bold: true, color: colors.accentCyan },
+                    "URLs for ",
+                    selectedProject.name),
+                react_1.default.createElement(ink_1.Text, null, " "),
+                urls.length === 0 ? (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "No URLs detected")) : (urls.map((url, idx) => (react_1.default.createElement(ink_1.Text, { key: idx, color: colors.textPrimary },
+                    idx + 1,
+                    ". ",
+                    url)))),
+                react_1.default.createElement(ink_1.Text, null, " "),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Press Esc or u to close..."))));
+    }
+    if (showScriptModal && scriptModalData) {
+        return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", padding: 1 },
+            react_1.default.createElement(ScriptSelectionModal, { scripts: scriptModalData.scripts, projectName: scriptModalData.projectName, projectPath: scriptModalData.projectPath, onSelect: handleScriptSelect, onClose: () => setShowScriptModal(false) })));
+    }
+    const handleTagRemove = (tag) => {
+        if (selectedProject) {
+            try {
+                const db = (0, core_bridge_1.getDatabaseManager)();
+                const currentTags = selectedProject.tags || [];
+                db.updateProject(selectedProject.id, { tags: currentTags.filter((t) => t !== tag) });
+                loadProjects();
+                loadAllTags();
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : String(err));
+            }
+        }
+    };
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", height: terminalHeight },
+        react_1.default.createElement(ink_1.Box, { flexDirection: "row", height: availableHeight, flexGrow: 0, flexShrink: 0 },
+            react_1.default.createElement(ProjectListComponent, { projects: projects, selectedIndex: selectedIndex, runningProcesses: runningProcesses, isFocused: focusedPanel === 'list', height: availableHeight, scrollOffset: listScrollOffset }),
+            react_1.default.createElement(ink_1.Box, { width: 1 }),
+            react_1.default.createElement(ProjectDetailsComponent, { project: selectedProject, runningProcesses: runningProcesses, isFocused: focusedPanel === 'details', editingName: editingName, editingDescription: editingDescription, editingTags: editingTags, editInput: editInput, allTags: allTags, onTagRemove: handleTagRemove, height: availableHeight, scrollOffset: detailsScrollOffset })),
+        react_1.default.createElement(ink_1.Box, { paddingX: 1, borderStyle: "single", borderColor: colors.borderColor, flexShrink: 0, height: 3 },
+            react_1.default.createElement(StatusBar, { focusedPanel: focusedPanel, selectedProject: selectedProject }))));
+};
+// Render the app
+(0, ink_1.render)(react_1.default.createElement(App, null));