projax 3.3.58 → 3.3.63

package/dist/prxi.js

@@ -35,11 +35,24 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const ink_1 = require("ink");
+// Handle EPIPE errors gracefully to prevent crashes when output streams close
+process.stdout.on('error', (err) => {
+    if (err.code === 'EPIPE') {
+        // Output stream closed, exit gracefully
+        process.exit(0);
+    }
+});
+process.stderr.on('error', (err) => {
+    if (err.code === 'EPIPE') {
+        process.exit(0);
+    }
+});
 const core_bridge_1 = require("./core-bridge");
 const script_runner_1 = require("./script-runner");
 const child_process_1 = require("child_process");
 const path = __importStar(require("path"));
 const os = __importStar(require("os"));
+const fs = __importStar(require("fs"));
 // Color scheme matching desktop app
 const colors = {
     bgPrimary: '#0d1117',
@@ -74,26 +87,51 @@ function truncateText(text, maxLength) {
         return text;
     return text.substring(0, maxLength - 3) + '...';
 }
+const FILTER_TYPES = ['all', 'name', 'path', 'ports', 'tags', 'running'];
+const SORT_TYPES = ['name-asc', 'name-desc', 'recent', 'oldest', 'running'];
+const FILTER_LABELS = {
+    'all': 'All',
+    'name': 'Name',
+    'path': 'Path',
+    'ports': 'Ports',
+    'tags': 'Tags',
+    'running': 'Running',
+};
+const SORT_LABELS = {
+    'name-asc': 'Name A-Z',
+    'name-desc': 'Name Z-A',
+    'recent': 'Recently Scanned',
+    'oldest': 'Oldest First',
+    'running': 'Running First',
+};
 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 },
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.accentCyan, padding: 1, width: 75 },
         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, { color: colors.accentCyan }, "View Navigation:"),
+        react_1.default.createElement(ink_1.Text, null, "  1          Projects view"),
+        react_1.default.createElement(ink_1.Text, null, "  2          Workspaces view"),
+        react_1.default.createElement(ink_1.Text, null, "  3          Global processes view"),
+        react_1.default.createElement(ink_1.Text, null, "  4          Settings"),
+        react_1.default.createElement(ink_1.Text, null, "  T          Toggle terminal output panel"),
         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, { color: colors.accentCyan }, "Projects View - Navigation:"),
+        react_1.default.createElement(ink_1.Text, null, "  \u2191/k        Move up in list"),
+        react_1.default.createElement(ink_1.Text, null, "  \u2193/j        Move down in 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, "  /          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, "  F          Cycle filter type (all/name/path/ports/tags/running)"),
+        react_1.default.createElement(ink_1.Text, null, "  S          Cycle sort order (name/recent/oldest/running)"),
+        react_1.default.createElement(ink_1.Text, null, "  g          Refresh git branches"),
+        react_1.default.createElement(ink_1.Text, null, "  R          Full refresh (projects + branches + processes)"),
         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, { color: colors.accentCyan }, "Projects View - Actions:"),
+        react_1.default.createElement(ink_1.Text, null, "  a          Add new project"),
         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"),
@@ -101,16 +139,12 @@ const HelpModal = ({ onClose }) => {
         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, "  r          Run scripts (select from list)"),
         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, "  d          Delete project (with confirmation)"),
         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, "  q/Esc      Quit (or close modal)"),
         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...")));
@@ -120,6 +154,157 @@ const LoadingModal = ({ message }) => {
         react_1.default.createElement(ink_1.Text, null, message),
         react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Please wait...")));
 };
+const ConfirmModal = ({ title, message, onConfirm, onCancel }) => {
+    const [selected, setSelected] = (0, react_1.useState)('no');
+    (0, ink_1.useInput)((input, key) => {
+        if (key.escape || input === 'n') {
+            onCancel();
+            return;
+        }
+        if (key.return) {
+            if (selected === 'yes') {
+                onConfirm();
+            }
+            else {
+                onCancel();
+            }
+            return;
+        }
+        if (input === 'y') {
+            onConfirm();
+            return;
+        }
+        if (key.leftArrow || key.rightArrow || input === 'h' || input === 'l') {
+            setSelected(prev => prev === 'yes' ? 'no' : 'yes');
+        }
+    });
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.accentOrange, padding: 1, width: 60 },
+        react_1.default.createElement(ink_1.Text, { bold: true, color: colors.accentOrange }, title),
+        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.Box, null,
+            react_1.default.createElement(ink_1.Text, { color: selected === 'yes' ? colors.accentCyan : colors.textSecondary },
+                selected === 'yes' ? '▶ ' : '  ',
+                "Yes"),
+            react_1.default.createElement(ink_1.Text, null, "  "),
+            react_1.default.createElement(ink_1.Text, { color: selected === 'no' ? colors.accentCyan : colors.textSecondary },
+                selected === 'no' ? '▶ ' : '  ',
+                "No")),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "y/n or \u2190\u2192 to select, Enter to confirm")));
+};
+const AddProjectModal = ({ onAdd, onCancel }) => {
+    const [step, setStep] = (0, react_1.useState)('path');
+    const [pathInput, setPathInput] = (0, react_1.useState)('');
+    const [nameInput, setNameInput] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, ink_1.useInput)((input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (step === 'path') {
+            if (key.return) {
+                // Validate path
+                const resolvedPath = pathInput.startsWith('~')
+                    ? path.join(os.homedir(), pathInput.slice(1))
+                    : path.resolve(pathInput);
+                if (!fs.existsSync(resolvedPath)) {
+                    setError('Path does not exist');
+                    return;
+                }
+                if (!fs.statSync(resolvedPath).isDirectory()) {
+                    setError('Path is not a directory');
+                    return;
+                }
+                // Check if project already exists
+                const db = (0, core_bridge_1.getDatabaseManager)();
+                const existing = db.getProjectByPath(resolvedPath);
+                if (existing) {
+                    setError(`Project already exists: ${existing.name}`);
+                    return;
+                }
+                setError(null);
+                setNameInput(path.basename(resolvedPath));
+                setStep('name');
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setPathInput(prev => prev.slice(0, -1));
+                setError(null);
+                return;
+            }
+            if (key.tab) {
+                // Tab completion - get directories in current path
+                try {
+                    const currentPath = pathInput.startsWith('~')
+                        ? path.join(os.homedir(), pathInput.slice(1))
+                        : pathInput || '.';
+                    const dir = path.dirname(currentPath);
+                    const base = path.basename(currentPath);
+                    if (fs.existsSync(dir)) {
+                        const entries = fs.readdirSync(dir, { withFileTypes: true })
+                            .filter(e => e.isDirectory() && e.name.startsWith(base) && !e.name.startsWith('.'))
+                            .map(e => e.name);
+                        if (entries.length === 1) {
+                            const completed = path.join(dir, entries[0]) + '/';
+                            setPathInput(completed.replace(os.homedir(), '~'));
+                        }
+                    }
+                }
+                catch {
+                    // Ignore tab completion errors
+                }
+                return;
+            }
+            if (input && input.length === 1 && !key.ctrl && !key.meta) {
+                setPathInput(prev => prev + input);
+                setError(null);
+            }
+        }
+        else if (step === 'name') {
+            if (key.return) {
+                const resolvedPath = pathInput.startsWith('~')
+                    ? path.join(os.homedir(), pathInput.slice(1))
+                    : path.resolve(pathInput);
+                onAdd(resolvedPath, nameInput.trim() || undefined);
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setNameInput(prev => prev.slice(0, -1));
+                return;
+            }
+            if (input && input.length === 1 && !key.ctrl && !key.meta) {
+                setNameInput(prev => prev + input);
+            }
+        }
+    });
+    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 }, "Add Project"),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        step === 'path' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ink_1.Text, null, "Enter project path:"),
+            react_1.default.createElement(ink_1.Box, null,
+                react_1.default.createElement(ink_1.Text, { color: colors.accentGreen }, "> "),
+                react_1.default.createElement(ink_1.Text, null, pathInput),
+                react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "_")),
+            error && (react_1.default.createElement(ink_1.Text, { color: "#f85149" }, error)),
+            react_1.default.createElement(ink_1.Text, null, " "),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Tab: autocomplete | Enter: next | Esc: cancel"))),
+        step === 'name' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary },
+                "Path: ",
+                pathInput),
+            react_1.default.createElement(ink_1.Text, null, " "),
+            react_1.default.createElement(ink_1.Text, null, "Enter project name:"),
+            react_1.default.createElement(ink_1.Box, null,
+                react_1.default.createElement(ink_1.Text, { color: colors.accentGreen }, "> "),
+                react_1.default.createElement(ink_1.Text, null, nameInput),
+                react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "_")),
+            react_1.default.createElement(ink_1.Text, null, " "),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, "Enter: add project | Esc: cancel")))));
+};
 const ErrorModal = ({ message, onClose }) => {
     (0, ink_1.useInput)((input, key) => {
         if (key.escape || key.return) {
@@ -176,7 +361,7 @@ const ScriptSelectionModal = ({ scripts, projectName, projectPath, onSelect, onC
         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 ProjectListComponent = ({ projects, selectedIndex, runningProcesses, isFocused, height, scrollOffset, gitBranches, filterType, sortType, }) => {
     const { focus } = (0, ink_1.useFocus)({ id: 'projectList' });
     // Calculate visible range
     const startIndex = Math.max(0, scrollOffset);
@@ -189,10 +374,15 @@ const ProjectListComponent = ({ projects, selectedIndex, runningProcesses, isFoc
     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" },
+            react_1.default.createElement(ink_1.Text, { bold: true, color: colors.textPrimary },
+                "Projects (",
+                projects.length,
+                ")"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textTertiary },
+                react_1.default.createElement(ink_1.Text, { color: colors.accentPurple }, FILTER_LABELS[filterType]),
+                ' | ',
+                react_1.default.createElement(ink_1.Text, { color: colors.accentOrange }, SORT_LABELS[sortType]))),
         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 ",
@@ -204,28 +394,37 @@ const ProjectListComponent = ({ projects, selectedIndex, runningProcesses, isFoc
                 // 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,
-                        ")")));
+                // Get git branch
+                const branch = gitBranches.get(project.id);
+                const isMainBranch = branch === 'main' || branch === 'master';
+                return (react_1.default.createElement(ink_1.Box, { key: project.id, flexDirection: "column" },
+                    react_1.default.createElement(ink_1.Text, { color: isSelected ? colors.accentCyan : colors.textPrimary, bold: isSelected },
+                        isSelected ? '▶ ' : '  ',
+                        hasRunningScripts && react_1.default.createElement(ink_1.Text, { color: colors.accentGreen }, "\u25CF "),
+                        truncateText(project.name, 22),
+                        hasRunningScripts && react_1.default.createElement(ink_1.Text, { color: colors.accentGreen },
+                            " (",
+                            projectRunning.length,
+                            ")")),
+                    branch && (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary },
+                        '    ',
+                        react_1.default.createElement(ink_1.Text, { color: isMainBranch ? colors.accentGreen : colors.accentBlue }, truncateText(branch, 18))))));
             }),
             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 ProjectDetailsComponent = ({ project, runningProcesses, isFocused, editingName, editingDescription, editingTags, editInput, allTags, onTagRemove, height, scrollOffset, gitBranch, }) => {
     const { focus } = (0, ink_1.useFocus)({ id: 'projectDetails' });
     const [scripts, setScripts] = (0, react_1.useState)(null);
     const [ports, setPorts] = (0, react_1.useState)([]);
+    const [npmPackage, setNpmPackage] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!project) {
             setScripts(null);
             setPorts([]);
+            setNpmPackage(null);
             return;
         }
         // Load scripts
@@ -245,6 +444,26 @@ const ProjectDetailsComponent = ({ project, runningProcesses, isFocused, editing
         catch (error) {
             setPorts([]);
         }
+        // Check if npm package (live registry check)
+        setNpmPackage(null);
+        try {
+            const packageJsonPath = path.join(project.path, 'package.json');
+            if (fs.existsSync(packageJsonPath)) {
+                const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+                if (pkg.name && !pkg.private) {
+                    fetch(`https://registry.npmjs.org/${encodeURIComponent(pkg.name)}`, {
+                        method: 'HEAD',
+                        signal: AbortSignal.timeout(2000),
+                    })
+                        .then(res => {
+                        if (res.ok)
+                            setNpmPackage(pkg.name);
+                    })
+                        .catch(() => { });
+                }
+            }
+        }
+        catch { }
     }, [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 },
@@ -299,8 +518,20 @@ const ProjectDetailsComponent = ({ project, runningProcesses, isFocused, editing
         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))));
+            react_1.default.createElement(ink_1.Text, { color: colors.accentCyan }, scripts?.scripts?.size || 0)),
+        npmPackage && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ink_1.Text, null, " | "),
+            react_1.default.createElement(ink_1.Text, null,
+                "NPM: ",
+                react_1.default.createElement(ink_1.Text, { color: "#f85149" }, npmPackage))))));
     contentLines.push(react_1.default.createElement(ink_1.Text, { key: "spacer2" }, " "));
+    // Git branch
+    if (gitBranch) {
+        const isMainBranch = gitBranch === 'main' || gitBranch === 'master';
+        contentLines.push(react_1.default.createElement(ink_1.Text, { key: "git-branch" },
+            "Branch: ",
+            react_1.default.createElement(ink_1.Text, { color: isMainBranch ? colors.accentGreen : colors.accentBlue }, gitBranch)));
+    }
     if (project.framework) {
         contentLines.push(react_1.default.createElement(ink_1.Text, { key: "framework" },
             "Framework: ",
@@ -335,34 +566,28 @@ const ProjectDetailsComponent = ({ project, runningProcesses, isFocused, editing
         });
         contentLines.push(react_1.default.createElement(ink_1.Text, { key: "spacer4" }, " "));
     }
-    // Scripts
+    // Scripts - show all, let virtual scrolling handle visibility
     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]) => {
+        Array.from(scripts.scripts.entries()).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
+    // Ports - show all, let virtual scrolling handle visibility
     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) => {
+        ports.forEach((port) => {
             contentLines.push(react_1.default.createElement(ink_1.Text, { key: `port-${port.id}` },
                 '  ',
                 "Port ",
@@ -371,12 +596,6 @@ const ProjectDetailsComponent = ({ project, runningProcesses, isFocused, editing
                     " - ",
                     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
@@ -404,6 +623,80 @@ const ProjectDetailsComponent = ({ project, runningProcesses, isFocused, editing
                 contentLines.length - endIndex,
                 " more below")))));
 };
+const TerminalOutputPanel = ({ processes, selectedPid, height, onSelectProcess, }) => {
+    const [logs, setLogs] = (0, react_1.useState)([]);
+    const [scrollOffset, setScrollOffset] = (0, react_1.useState)(0);
+    // Find the selected process or default to first
+    const activeProcess = selectedPid
+        ? processes.find((p) => p.pid === selectedPid)
+        : processes[0];
+    (0, react_1.useEffect)(() => {
+        if (!activeProcess?.logFile) {
+            setLogs(['No active process selected']);
+            return;
+        }
+        // Read initial logs
+        try {
+            if (fs.existsSync(activeProcess.logFile)) {
+                const content = fs.readFileSync(activeProcess.logFile, 'utf-8');
+                const lines = content.split('\n').slice(-50); // Last 50 lines
+                setLogs(lines);
+                setScrollOffset(Math.max(0, lines.length - 10));
+            }
+            else {
+                setLogs(['Log file not found']);
+            }
+        }
+        catch {
+            setLogs(['Error reading logs']);
+        }
+        // Watch for changes
+        let watcher = null;
+        try {
+            watcher = fs.watch(activeProcess.logFile, () => {
+                try {
+                    const content = fs.readFileSync(activeProcess.logFile, 'utf-8');
+                    const lines = content.split('\n').slice(-100);
+                    setLogs(lines);
+                    // Auto-scroll to bottom
+                    setScrollOffset(Math.max(0, lines.length - 10));
+                }
+                catch {
+                    // Ignore read errors during watch
+                }
+            });
+        }
+        catch {
+            // Ignore watch errors
+        }
+        return () => {
+            if (watcher) {
+                watcher.close();
+            }
+        };
+    }, [activeProcess?.logFile, activeProcess?.pid]);
+    const visibleLines = logs.slice(scrollOffset, scrollOffset + height - 4);
+    const hasMoreAbove = scrollOffset > 0;
+    const hasMoreBelow = scrollOffset + height - 4 < logs.length;
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", width: "30%", height: height, borderStyle: "round", borderColor: colors.accentGreen, padding: 1, flexShrink: 0 },
+        react_1.default.createElement(ink_1.Box, { flexDirection: "row", justifyContent: "space-between" },
+            react_1.default.createElement(ink_1.Text, { bold: true, color: colors.accentGreen }, "Terminal Output"),
+            processes.length > 1 && (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary },
+                "[",
+                processes.findIndex((p) => p.pid === activeProcess?.pid) + 1,
+                "/",
+                processes.length,
+                "]"))),
+        activeProcess && (react_1.default.createElement(ink_1.Text, { color: colors.textSecondary },
+            truncateText(activeProcess.scriptName, 20),
+            " (PID: ",
+            activeProcess.pid,
+            ")")),
+        react_1.default.createElement(ink_1.Box, { flexDirection: "column", flexGrow: 1, marginTop: 1 },
+            hasMoreAbove && (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "\u2191 more above")),
+            visibleLines.map((line, idx) => (react_1.default.createElement(ink_1.Text, { key: idx, color: colors.textPrimary }, truncateText(line, 40)))),
+            hasMoreBelow && (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "\u2193 more below")))));
+};
 const StatusBar = ({ focusedPanel, selectedProject }) => {
     if (focusedPanel === 'list') {
         return (react_1.default.createElement(ink_1.Box, { flexDirection: "column" },
@@ -411,16 +704,22 @@ const StatusBar = ({ focusedPanel, selectedProject }) => {
                 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.Text, { color: colors.accentCyan }, "List")),
             react_1.default.createElement(ink_1.Box, null,
+                react_1.default.createElement(ink_1.Text, { bold: true }, "a"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Add | "),
                 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, { bold: true }, "F"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Filter | "),
+                react_1.default.createElement(ink_1.Text, { bold: true }, "S"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Sort | "),
+                react_1.default.createElement(ink_1.Text, { bold: true }, "\u2191\u2193"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Nav | "),
+                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 }, "s"),
-                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Scan | "),
+                react_1.default.createElement(ink_1.Text, { bold: true }, "T"),
+                react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Terminal | "),
                 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"),
@@ -435,26 +734,18 @@ const StatusBar = ({ focusedPanel, selectedProject }) => {
             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.Text, { color: colors.textPrimary }, truncateText(selectedProject.name, 20))))),
         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 }, "r"),
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Run | "),
             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"),
@@ -462,9 +753,7 @@ const StatusBar = ({ focusedPanel, selectedProject }) => {
             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"))));
+            react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, " Help"))));
 };
 // Simple fuzzy search function
 function fuzzyMatch(query, text) {
@@ -492,6 +781,13 @@ const App = () => {
     const [error, setError] = (0, react_1.useState)(null);
     const [runningProcesses, setRunningProcesses] = (0, react_1.useState)([]);
     const [focusedPanel, setFocusedPanel] = (0, react_1.useState)('list');
+    // View state
+    const [currentView, setCurrentView] = (0, react_1.useState)('projects');
+    // Git branches
+    const [gitBranches, setGitBranches] = (0, react_1.useState)(new Map());
+    // Filter and sort state
+    const [filterType, setFilterType] = (0, react_1.useState)('all');
+    const [sortType, setSortType] = (0, react_1.useState)('name-asc');
     // Editing state
     const [editingName, setEditingName] = (0, react_1.useState)(false);
     const [editingDescription, setEditingDescription] = (0, react_1.useState)(false);
@@ -499,6 +795,9 @@ const App = () => {
     const [editInput, setEditInput] = (0, react_1.useState)('');
     const [showUrls, setShowUrls] = (0, react_1.useState)(false);
     const [allTags, setAllTags] = (0, react_1.useState)([]);
+    // Modal state
+    const [showAddProjectModal, setShowAddProjectModal] = (0, react_1.useState)(false);
+    const [showConfirmDelete, setShowConfirmDelete] = (0, react_1.useState)(false);
     // Search state
     const [showSearch, setShowSearch] = (0, react_1.useState)(false);
     const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
@@ -507,19 +806,69 @@ const App = () => {
     // Script selection state
     const [showScriptModal, setShowScriptModal] = (0, react_1.useState)(false);
     const [scriptModalData, setScriptModalData] = (0, react_1.useState)(null);
+    // Workspace state
+    const [workspaces, setWorkspaces] = (0, react_1.useState)([]);
+    const [selectedWorkspaceIndex, setSelectedWorkspaceIndex] = (0, react_1.useState)(0);
+    // Terminal panel state
+    const [showTerminalPanel, setShowTerminalPanel] = (0, react_1.useState)(false);
+    const [terminalLogs, setTerminalLogs] = (0, react_1.useState)([]);
+    const [selectedProcessPid, setSelectedProcessPid] = (0, react_1.useState)(null);
+    // Settings state
+    const [settings, setSettings] = (0, react_1.useState)({
+        editor: { type: 'vscode' },
+        browser: { type: 'chrome' },
+    });
+    const [settingsSection, setSettingsSection] = (0, react_1.useState)('editor');
+    const [settingsOptionIndex, setSettingsOptionIndex] = (0, react_1.useState)(0);
+    const settingsEditorOptions = [
+        'vscode', 'cursor', 'windsurf', 'zed', 'custom',
+    ];
+    const settingsBrowserOptions = [
+        'chrome', 'firefox', 'safari', 'edge', 'custom',
+    ];
     // Get terminal dimensions
     const terminalHeight = process.stdout.rows || 24;
-    const availableHeight = terminalHeight - 3; // Subtract status bar
+    const availableHeight = terminalHeight - 4; // Subtract status bar (increased for view indicator)
     (0, react_1.useEffect)(() => {
         loadProjects();
         loadRunningProcesses();
         loadAllTags();
-        // Refresh running processes every 5 seconds
+        // Load settings
+        try {
+            const settingsPath = path.join(os.homedir(), '.projax', 'settings.json');
+            if (fs.existsSync(settingsPath)) {
+                const data = fs.readFileSync(settingsPath, 'utf-8');
+                setSettings(JSON.parse(data));
+            }
+        }
+        catch {
+            // Use defaults
+        }
+        // Refresh running processes and git branches every 5 seconds
         const interval = setInterval(() => {
             loadRunningProcesses();
         }, 5000);
         return () => clearInterval(interval);
     }, []);
+    // Load git branches when projects change
+    (0, react_1.useEffect)(() => {
+        if (allProjects.length > 0) {
+            loadGitBranches();
+        }
+    }, [allProjects]);
+    const loadGitBranches = async () => {
+        const branches = new Map();
+        for (const project of allProjects) {
+            try {
+                const branch = (0, core_bridge_1.getCurrentBranch)(project.path);
+                branches.set(project.id, branch);
+            }
+            catch {
+                branches.set(project.id, null);
+            }
+        }
+        setGitBranches(branches);
+    };
     // Reset editing state and scroll when project changes
     (0, react_1.useEffect)(() => {
         setEditingName(false);
@@ -528,6 +877,12 @@ const App = () => {
         setEditInput('');
         setDetailsScrollOffset(0); // Reset scroll when switching projects
     }, [selectedIndex]);
+    // Load workspaces when switching to workspaces view
+    (0, react_1.useEffect)(() => {
+        if (currentView === 'workspaces' && workspaces.length === 0) {
+            loadWorkspacesFromApi();
+        }
+    }, [currentView]);
     // Update scroll offset when selected index changes
     (0, react_1.useEffect)(() => {
         const visibleHeight = Math.max(1, availableHeight - 3);
@@ -560,26 +915,71 @@ const App = () => {
     const loadProjects = () => {
         const loadedProjects = (0, core_bridge_1.getAllProjects)();
         setAllProjects(loadedProjects);
-        filterProjects(loadedProjects, searchQuery);
+        applyFilterAndSort(loadedProjects, searchQuery, filterType, sortType);
     };
-    const filterProjects = (projectsToFilter, query) => {
-        if (!query.trim()) {
-            setProjects(projectsToFilter);
-            return;
+    const applyFilterAndSort = (projectsToFilter, query, filter, sort) => {
+        let filtered = projectsToFilter;
+        // Apply search query with filter type
+        if (query.trim()) {
+            const q = query.toLowerCase();
+            filtered = projectsToFilter.filter(project => {
+                switch (filter) {
+                    case 'name':
+                        return fuzzyMatch(q, project.name);
+                    case 'path':
+                        return fuzzyMatch(q, project.path);
+                    case 'tags':
+                        return project.tags?.some((tag) => fuzzyMatch(q, tag)) || false;
+                    case 'ports': {
+                        // Check if project has ports matching the query
+                        const db = (0, core_bridge_1.getDatabaseManager)();
+                        const ports = db.getProjectPorts(project.id);
+                        return ports.some((p) => p.port.toString().includes(q));
+                    }
+                    case 'running': {
+                        const isRunning = runningProcesses.some((p) => p.projectPath === project.path);
+                        return (q === 'running' || q === 'yes' || q === 'true') ? isRunning : !isRunning;
+                    }
+                    case 'all':
+                    default:
+                        return (fuzzyMatch(q, project.name) ||
+                            (project.description ? fuzzyMatch(q, project.description) : false) ||
+                            fuzzyMatch(q, project.path) ||
+                            project.tags?.some((tag) => fuzzyMatch(q, tag)) ||
+                            false);
+                }
+            });
         }
-        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;
+        // Apply sorting
+        const sorted = [...filtered].sort((a, b) => {
+            switch (sort) {
+                case 'name-asc':
+                    return a.name.localeCompare(b.name);
+                case 'name-desc':
+                    return b.name.localeCompare(a.name);
+                case 'recent':
+                    return (b.last_scanned || 0) - (a.last_scanned || 0);
+                case 'oldest':
+                    return (a.created_at || 0) - (b.created_at || 0);
+                case 'running': {
+                    const aRunning = runningProcesses.filter((p) => p.projectPath === a.path).length;
+                    const bRunning = runningProcesses.filter((p) => p.projectPath === b.path).length;
+                    return bRunning - aRunning;
+                }
+                default:
+                    return 0;
+            }
         });
-        setProjects(filtered);
+        setProjects(sorted);
         // Adjust selected index if current selection is out of bounds
-        if (selectedIndex >= filtered.length) {
-            setSelectedIndex(Math.max(0, filtered.length - 1));
+        if (selectedIndex >= sorted.length) {
+            setSelectedIndex(Math.max(0, sorted.length - 1));
         }
     };
+    // Re-apply filter/sort when dependencies change
+    (0, react_1.useEffect)(() => {
+        applyFilterAndSort(allProjects, searchQuery, filterType, sortType);
+    }, [filterType, sortType, runningProcesses]);
     const loadRunningProcesses = async () => {
         try {
             const processes = await (0, script_runner_1.getRunningProcessesClean)();
@@ -726,13 +1126,144 @@ const App = () => {
             setError(err instanceof Error ? err.message : String(err));
         }
     };
+    // Handler for adding a project
+    const handleAddProject = async (projectPath, projectName) => {
+        setShowAddProjectModal(false);
+        setIsLoading(true);
+        setLoadingMessage('Adding project...');
+        try {
+            const name = projectName || path.basename(projectPath);
+            const db = (0, core_bridge_1.getDatabaseManager)();
+            const project = db.addProject(name, projectPath);
+            // Scan for tests
+            setLoadingMessage('Scanning for tests...');
+            await (0, core_bridge_1.scanProject)(project.id);
+            // Scan for ports
+            setLoadingMessage('Scanning for ports...');
+            try {
+                const { scanProjectPorts } = await Promise.resolve().then(() => __importStar(require('./port-scanner')));
+                await scanProjectPorts(project.id);
+            }
+            catch {
+                // Ignore port scanning errors
+            }
+            loadProjects();
+            setIsLoading(false);
+            // Select the newly added project
+            const newProjects = (0, core_bridge_1.getAllProjects)();
+            const newIndex = newProjects.findIndex((p) => p.id === project.id);
+            if (newIndex >= 0) {
+                setSelectedIndex(newIndex);
+            }
+        }
+        catch (err) {
+            setIsLoading(false);
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    };
+    // Handler for deleting a project
+    const handleDeleteProject = () => {
+        if (!selectedProject)
+            return;
+        setShowConfirmDelete(false);
+        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);
+    };
+    // Cycle filter type
+    const cycleFilterType = () => {
+        const currentIndex = FILTER_TYPES.indexOf(filterType);
+        const nextIndex = (currentIndex + 1) % FILTER_TYPES.length;
+        setFilterType(FILTER_TYPES[nextIndex]);
+    };
+    // Cycle sort type
+    const cycleSortType = () => {
+        const currentIndex = SORT_TYPES.indexOf(sortType);
+        const nextIndex = (currentIndex + 1) % SORT_TYPES.length;
+        setSortType(SORT_TYPES[nextIndex]);
+    };
     (0, ink_1.useInput)((input, key) => {
+        if (key.mouse) {
+            const { x, y, wheelDown, wheelUp, left } = key.mouse;
+            const { columns: width } = process.stdout;
+            // Assuming project list is on the left 35% and details on the right.
+            const projectListWidth = Math.floor(width * 0.35);
+            if (x < projectListWidth) {
+                // Mouse is over the project list
+                if (wheelUp) {
+                    setSelectedIndex((prev) => Math.max(0, prev - 1));
+                    return;
+                }
+                if (wheelDown) {
+                    setSelectedIndex((prev) => Math.min(projects.length - 1, prev + 1));
+                    return;
+                }
+                if (left) {
+                    // It's a click, so we need to calculate which item was clicked.
+                    // This is an approximation based on the known layout of the ProjectListComponent.
+                    const listTopBorder = 1;
+                    const listPadding = 1;
+                    const listHeaderHeight = 2; // "Projects (...)" + "Filter | Sort"
+                    const listStartY = listTopBorder + listPadding + listHeaderHeight;
+                    const scrollIndicatorHeight = listScrollOffset > 0 ? 1 : 0;
+                    const firstItemY = listStartY + scrollIndicatorHeight;
+                    const clickYInList = y - firstItemY;
+                    if (clickYInList >= 0) {
+                        let cumulativeHeight = 0;
+                        const visibleProjects = projects.slice(listScrollOffset);
+                        for (let i = 0; i < visibleProjects.length; i++) {
+                            const project = visibleProjects[i];
+                            const branch = gitBranches.get(project.id);
+                            const itemHeight = branch ? 2 : 1;
+                            if (clickYInList >= cumulativeHeight && clickYInList < cumulativeHeight + itemHeight) {
+                                const newIndex = listScrollOffset + i;
+                                if (newIndex < projects.length) {
+                                    setSelectedIndex(newIndex);
+                                    setFocusedPanel('list');
+                                }
+                                break;
+                            }
+                            cumulativeHeight += itemHeight;
+                            if (cumulativeHeight > availableHeight) {
+                                break;
+                            }
+                        }
+                    }
+                    return;
+                }
+            }
+            else {
+                // Mouse is over the details panel
+                if (wheelUp) {
+                    setDetailsScrollOffset(prev => Math.max(0, prev - 1));
+                    return;
+                }
+                if (wheelDown) {
+                    setDetailsScrollOffset(prev => prev + 1);
+                    return;
+                }
+            }
+        }
         // Handle search mode
         if (showSearch) {
             if (key.escape) {
                 setShowSearch(false);
                 setSearchQuery('');
-                filterProjects(allProjects, '');
+                applyFilterAndSort(allProjects, '', filterType, sortType);
                 return;
             }
             if (key.return) {
@@ -742,19 +1273,19 @@ const App = () => {
             if (key.backspace || key.delete) {
                 const newQuery = searchQuery.slice(0, -1);
                 setSearchQuery(newQuery);
-                filterProjects(allProjects, newQuery);
+                applyFilterAndSort(allProjects, newQuery, filterType, sortType);
                 return;
             }
             if (input && input.length === 1 && !key.ctrl && !key.meta) {
                 const newQuery = searchQuery + input;
                 setSearchQuery(newQuery);
-                filterProjects(allProjects, newQuery);
+                applyFilterAndSort(allProjects, newQuery, filterType, sortType);
                 return;
             }
             return;
         }
         // Don't process input if modal is showing
-        if (showHelp || isLoading || error || showUrls || showScriptModal) {
+        if (showHelp || isLoading || error || showUrls || showScriptModal || showAddProjectModal || showConfirmDelete) {
             // Handle URLs modal
             if (showUrls && (key.escape || key.return || input === 'q' || input === 'u')) {
                 setShowUrls(false);
@@ -762,12 +1293,135 @@ const App = () => {
             }
             return;
         }
+        // Handle navigation in workspaces view
+        if (currentView === 'workspaces') {
+            if (key.upArrow || input === 'k') {
+                setSelectedWorkspaceIndex((prev) => Math.max(0, prev - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setSelectedWorkspaceIndex((prev) => Math.min(workspaces.length - 1, prev + 1));
+                return;
+            }
+        }
+        // Handle navigation in processes view
+        if (currentView === 'processes') {
+            if (input === 'x' && runningProcesses.length > 0) {
+                // Stop all processes (or could select one)
+                setIsLoading(true);
+                setLoadingMessage('Stopping processes...');
+                setTimeout(async () => {
+                    try {
+                        for (const proc of runningProcesses) {
+                            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;
+            }
+        }
+        // Handle navigation in settings view
+        if (currentView === 'settings') {
+            if (key.tab) {
+                setSettingsSection((prev) => (prev === 'editor' ? 'browser' : 'editor'));
+                setSettingsOptionIndex(0);
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setSettingsOptionIndex((prev) => Math.max(0, prev - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                const maxIndex = settingsSection === 'editor' ? settingsEditorOptions.length - 1 : settingsBrowserOptions.length - 1;
+                setSettingsOptionIndex((prev) => Math.min(maxIndex, prev + 1));
+                return;
+            }
+            if (input === ' ' || key.return) {
+                // Select option and save
+                const newSettings = { ...settings };
+                if (settingsSection === 'editor') {
+                    newSettings.editor = { type: settingsEditorOptions[settingsOptionIndex] };
+                }
+                else {
+                    newSettings.browser = { type: settingsBrowserOptions[settingsOptionIndex] };
+                }
+                setSettings(newSettings);
+                // Save to file
+                try {
+                    const settingsDir = path.join(os.homedir(), '.projax');
+                    if (!fs.existsSync(settingsDir)) {
+                        fs.mkdirSync(settingsDir, { recursive: true });
+                    }
+                    const settingsPath = path.join(settingsDir, 'settings.json');
+                    fs.writeFileSync(settingsPath, JSON.stringify(newSettings, null, 2));
+                }
+                catch {
+                    // Ignore save errors
+                }
+                return;
+            }
+        }
+        // Global navigation - number keys for view switching
+        if (input === '1') {
+            setCurrentView('projects');
+            return;
+        }
+        if (input === '2') {
+            setCurrentView('workspaces');
+            return;
+        }
+        if (input === '3') {
+            setCurrentView('processes');
+            return;
+        }
+        if (input === '4') {
+            setCurrentView('settings');
+            return;
+        }
+        // Terminal panel toggle
+        if (input === 'T') {
+            setShowTerminalPanel(prev => !prev);
+            return;
+        }
         // Search shortcut
         if (input === '/') {
             setShowSearch(true);
             setSearchQuery('');
             return;
         }
+        // Add project shortcut (in projects view)
+        if (input === 'a' && currentView === 'projects') {
+            setShowAddProjectModal(true);
+            return;
+        }
+        // Filter cycle shortcut
+        if (input === 'F' && currentView === 'projects') {
+            cycleFilterType();
+            return;
+        }
+        // Sort cycle shortcut
+        if (input === 'S' && currentView === 'projects') {
+            cycleSortType();
+            return;
+        }
+        // Refresh git branches
+        if (input === 'g' && currentView === 'projects') {
+            loadGitBranches();
+            return;
+        }
+        // Full refresh
+        if (input === 'R') {
+            loadProjects();
+            loadRunningProcesses();
+            loadGitBranches();
+            return;
+        }
         // Handle editing modes
         if (editingName || editingDescription || editingTags) {
             if (key.escape) {
@@ -924,25 +1578,9 @@ const App = () => {
                 setShowUrls(true);
                 return;
             }
-            // Delete project
+            // Delete project (with confirmation)
             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);
+                setShowConfirmDelete(true);
                 return;
             }
         }
@@ -1076,6 +1714,14 @@ const App = () => {
                 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 (showAddProjectModal) {
+        return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", padding: 1 },
+            react_1.default.createElement(AddProjectModal, { onAdd: handleAddProject, onCancel: () => setShowAddProjectModal(false) })));
+    }
+    if (showConfirmDelete && selectedProject) {
+        return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", padding: 1 },
+            react_1.default.createElement(ConfirmModal, { title: "Delete Project", message: `Are you sure you want to remove "${selectedProject.name}" from the dashboard?`, onConfirm: handleDeleteProject, onCancel: () => setShowConfirmDelete(false) })));
+    }
     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) })));
@@ -1094,11 +1740,133 @@ const App = () => {
             }
         }
     };
-    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 }),
+    // Render Projects view
+    const renderProjectsView = () => (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, gitBranches: gitBranches, filterType: filterType, sortType: sortType }),
+        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, gitBranch: selectedProject ? gitBranches.get(selectedProject.id) || null : null }),
+        showTerminalPanel && (react_1.default.createElement(react_1.default.Fragment, null,
             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(TerminalOutputPanel, { processes: runningProcesses, selectedPid: selectedProcessPid, height: availableHeight, onSelectProcess: (pid) => setSelectedProcessPid(pid) })))));
+    // Render Workspaces view
+    const renderWorkspacesView = () => (react_1.default.createElement(ink_1.Box, { flexDirection: "row", height: availableHeight, flexGrow: 0, flexShrink: 0 },
+        react_1.default.createElement(ink_1.Box, { flexDirection: "column", width: "35%", height: availableHeight, borderStyle: "round", borderColor: colors.accentCyan, padding: 1 },
+            react_1.default.createElement(ink_1.Text, { bold: true, color: colors.textPrimary },
+                "Workspaces (",
+                workspaces.length,
+                ")"),
+            react_1.default.createElement(ink_1.Box, { flexDirection: "column", flexGrow: 1 }, workspaces.length === 0 ? (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "No workspaces found")) : (workspaces.map((ws, index) => {
+                const isSelected = index === selectedWorkspaceIndex;
+                return (react_1.default.createElement(ink_1.Text, { key: ws.id, color: isSelected ? colors.accentCyan : colors.textPrimary, bold: isSelected },
+                    isSelected ? '▶ ' : '  ',
+                    truncateText(ws.name, 25)));
+            })))),
+        react_1.default.createElement(ink_1.Box, { width: 1 }),
+        react_1.default.createElement(ink_1.Box, { flexDirection: "column", width: "65%", height: availableHeight, borderStyle: "round", borderColor: colors.borderColor, padding: 1 }, workspaces[selectedWorkspaceIndex] ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ink_1.Text, { bold: true, color: colors.accentCyan }, workspaces[selectedWorkspaceIndex].name),
+            react_1.default.createElement(ink_1.Text, null, " "),
+            workspaces[selectedWorkspaceIndex].description && (react_1.default.createElement(ink_1.Text, { color: colors.textSecondary }, workspaces[selectedWorkspaceIndex].description)),
+            react_1.default.createElement(ink_1.Text, null, " "),
+            react_1.default.createElement(ink_1.Text, { color: colors.textTertiary },
+                "Path: ",
+                getDisplayPath(workspaces[selectedWorkspaceIndex].workspace_file_path)))) : (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "Select a workspace")))));
+    // Load workspaces from API
+    const loadWorkspacesFromApi = async () => {
+        try {
+            // Try common API ports
+            const ports = [38124, 38125, 38126, 38127, 38128, 3001];
+            let apiBaseUrl = '';
+            for (const port of ports) {
+                try {
+                    const response = await fetch(`http://localhost:${port}/health`, {
+                        signal: AbortSignal.timeout(500),
+                    });
+                    if (response.ok) {
+                        apiBaseUrl = `http://localhost:${port}/api`;
+                        break;
+                    }
+                }
+                catch {
+                    continue;
+                }
+            }
+            if (!apiBaseUrl) {
+                return;
+            }
+            const response = await fetch(`${apiBaseUrl}/workspaces`);
+            if (response.ok) {
+                const ws = (await response.json());
+                setWorkspaces(ws);
+            }
+        }
+        catch {
+            // Ignore workspace loading errors
+        }
+    };
+    // Render Processes view placeholder
+    const renderProcessesView = () => (react_1.default.createElement(ink_1.Box, { flexDirection: "column", padding: 2 },
+        react_1.default.createElement(ink_1.Text, { bold: true, color: colors.accentCyan },
+            "Running Processes (",
+            runningProcesses.length,
+            ")"),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        runningProcesses.length === 0 ? (react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "No running processes")) : (runningProcesses.map((proc) => {
+            const uptime = Math.floor((Date.now() - proc.startedAt) / 1000);
+            const minutes = Math.floor(uptime / 60);
+            const seconds = uptime % 60;
+            const uptimeStr = minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
+            return (react_1.default.createElement(ink_1.Text, { key: proc.pid, color: colors.textPrimary },
+                react_1.default.createElement(ink_1.Text, { color: colors.accentGreen }, "\u25CF"),
+                " PID ",
+                proc.pid,
+                ": ",
+                proc.projectName,
+                " (",
+                proc.scriptName,
+                ") - ",
+                uptimeStr));
+        })),
+        react_1.default.createElement(ink_1.Text, null, " "),
+        react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "Press 1 to return to Projects")));
+    // Render Settings view
+    const renderSettingsView = () => {
+        const currentOptions = settingsSection === 'editor' ? settingsEditorOptions : settingsBrowserOptions;
+        const currentValue = settingsSection === 'editor' ? settings.editor.type : settings.browser.type;
+        return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", padding: 2 },
+            react_1.default.createElement(ink_1.Text, { bold: true, color: colors.accentCyan }, "Settings"),
+            react_1.default.createElement(ink_1.Text, null, " "),
+            react_1.default.createElement(ink_1.Box, null,
+                react_1.default.createElement(ink_1.Text, { color: settingsSection === 'editor' ? colors.accentCyan : colors.textTertiary, bold: settingsSection === 'editor' }, "[Editor]"),
+                react_1.default.createElement(ink_1.Text, null, "  "),
+                react_1.default.createElement(ink_1.Text, { color: settingsSection === 'browser' ? colors.accentCyan : colors.textTertiary, bold: settingsSection === 'browser' }, "[Browser]")),
+            react_1.default.createElement(ink_1.Text, null, " "),
+            currentOptions.map((option, index) => {
+                const isSelected = index === settingsOptionIndex;
+                const isActive = option === currentValue;
+                return (react_1.default.createElement(ink_1.Text, { key: option, color: isSelected ? colors.accentCyan : colors.textPrimary, bold: isSelected },
+                    isSelected ? '▶ ' : '  ',
+                    isActive ? '● ' : '○ ',
+                    option.charAt(0).toUpperCase() + option.slice(1)));
+            }),
+            react_1.default.createElement(ink_1.Text, null, " "),
+            react_1.default.createElement(ink_1.Text, { color: colors.textTertiary }, "Tab: switch section | \u2191\u2193/jk: select | Space/Enter: choose")));
+    };
+    return (react_1.default.createElement(ink_1.Box, { flexDirection: "column", height: terminalHeight },
+        react_1.default.createElement(ink_1.Box, { paddingX: 1, height: 1 },
+            react_1.default.createElement(ink_1.Text, { color: currentView === 'projects' ? colors.accentCyan : colors.textTertiary }, "[1] Projects"),
+            react_1.default.createElement(ink_1.Text, null, " "),
+            react_1.default.createElement(ink_1.Text, { color: currentView === 'workspaces' ? colors.accentCyan : colors.textTertiary }, "[2] Workspaces"),
+            react_1.default.createElement(ink_1.Text, null, " "),
+            react_1.default.createElement(ink_1.Text, { color: currentView === 'processes' ? colors.accentCyan : colors.textTertiary }, "[3] Processes"),
+            react_1.default.createElement(ink_1.Text, null, " "),
+            react_1.default.createElement(ink_1.Text, { color: currentView === 'settings' ? colors.accentCyan : colors.textTertiary }, "[4] Settings"),
+            showTerminalPanel && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ink_1.Text, null, " | "),
+                react_1.default.createElement(ink_1.Text, { color: colors.accentGreen }, "Terminal [T]")))),
+        currentView === 'projects' && renderProjectsView(),
+        currentView === 'workspaces' && renderWorkspacesView(),
+        currentView === 'processes' && renderProcessesView(),
+        currentView === 'settings' && renderSettingsView(),
         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 }))));
 };