@vjixy/vibel 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 JIHAD Al AKL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,97 @@
+# 🚀 Vibe Launcher
+
+Vibe Launcher is a lightweight, modern project manager tailored specifically for keeping track of your "vibe coded" projects. Designed with a sleek, premium glassmorphic interface, it allows you to centralize your workflow without getting bogged down by heavy configurations.
+
+## 🌟 Features
+
+- **Clean Architecture:** Built on Node.js and Express, utilizing a simple local JSON file (`projects.json`) for persistence. No database installation or complex setups required!
+- **Beautiful UI:** A dynamic, visually striking single-page application (SPA) featuring glassmorphism, fluid animations, and modern typography.
+- **Project Tracking:** Easily add projects with their absolute file paths and optional logos.
+- **Multiple Execution Commands:** Define custom runtime scripts for each project (e.g., frontend server, backend server, tests) that run cleanly in their own visible Command Prompt windows.
+- **Integrated IDE Launcher:** Open your projects instantly in your editor of choice (e.g., `code`, `cursor`, `antigravity`).
+
+## 🛠️ Tech Stack
+
+- **Backend:** Node.js, Express.js
+- **Frontend:** Vanilla HTML, CSS, JavaScript (Zero Build Steps!)
+- **Database:** Local JSON File (`projects.json` - ignored from version control)
+- **Styling:** Custom CSS with [Phosphor Icons](https://phosphoricons.com/) and [Google Fonts](https://fonts.google.com/).
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+You only need **Node.js** installed on your system.
+
+### Installation
+
+#### Option 1: Global CLI (Recommended)
+
+To install Vibe Launcher globally so you can start it from any terminal window simply by typing `vibel`:
+
+1. Clone or download this repository.
+2. Navigate to the project folder:
+   ```bash
+   cd "path/to/VibeLauncher"
+   ```
+3. Install dependencies and the global package simultaneously:
+   ```bash
+   npm install -g .
+   ```
+   Or install it directly from NPM registry:
+   ```bash
+   npm install -g @vjixy/vibel
+   ```
+
+#### Option 2: Local Development
+
+If you prefer to run it locally without installing it globally:
+
+1. Clone or download this repository.
+2. Navigate to the project folder and install dependencies:
+   ```bash
+   npm install
+   ```
+
+### Running the App
+
+If you installed it globally via Option 1, open any terminal and just type:
+```bash
+vibel
+```
+
+If you installed it locally via Option 2, start the launcher from your project terminal:
+```bash
+npm start
+```
+
+The application will launch on your local server. Open your browser and go to:
+**http://localhost:3000**
+
+## 📂 Project Structure
+
+```
+VibeLauncher/
+├── public/                 # Frontend assets
+│   ├── index.html          # Main interface
+│   ├── style.css           # Glassmorphic and animations styles
+│   └── app.js              # Client-side logic and API calls
+├── server.js               # Express API and command execution logic
+├── projects.json           # Local database (auto-generated on first run)
+├── package.json            # Node.js dependencies and scripts
+└── README.md               # Project documentation
+```
+
+## 🪄 How to Use
+
+1. Click **"New Project"** in the top right.
+2. Enter the **Project Name** and the **Absolute Path** to the project on your machine.
+3. Configure your **IDE Command** (e.g., `code` for VS Code, `antigravity`, or `cursor`).
+4. Add as many **Execution Commands** as you need. For example:
+   - Name: `Backend`, Command: `npm run server`
+   - Name: `Frontend`, Command: `npm start`
+5. Save the project!
+6. Use the intuitive buttons on your project cards to pop open your IDE or trigger processes in new visible terminal windows.
+
+---
+*Built with ❤️ for rapid, beautiful vibe coding.*

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@vjixy/vibel",
+  "version": "1.0.0",
+  "description": "Vibe Launcher CLI project manager",
+  "main": "server.js",
+  "bin": {
+    "vibel": "./server.js"
+  },
+  "scripts": {
+    "start": "node server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.6",
+    "express": "^5.2.1"
+  }
+}

package/public/app.js

@@ -0,0 +1,261 @@
+const API_BASE = '/api/projects';
+
+// DOM Elements
+const projectsGrid = document.getElementById('projectsGrid');
+const addModal = document.getElementById('addModal');
+const addProjectBtn = document.getElementById('addProjectBtn');
+const closeModalBtn = document.getElementById('closeModalBtn');
+const cancelModalBtn = document.getElementById('cancelModalBtn');
+const projectForm = document.getElementById('projectForm');
+const commandsList = document.getElementById('commandsList');
+const addCmdBtn = document.getElementById('addCmdBtn');
+
+// State
+let projects = [];
+
+// Search Input
+const searchInput = document.getElementById('searchInput');
+let searchQuery = '';
+
+// Fetch and Render Projects
+async function fetchProjects() {
+    try {
+        const res = await fetch(API_BASE);
+        projects = await res.json();
+        renderProjects();
+    } catch (e) {
+        console.error('Failed to load projects:', e);
+        projectsGrid.innerHTML = '<div class="loading">Error loading projects.</div>';
+    }
+}
+
+function renderProjects() {
+    let filteredProjects = projects;
+    if (searchQuery) {
+        const q = searchQuery.toLowerCase();
+        filteredProjects = projects.filter(p =>
+            p.name.toLowerCase().includes(q) ||
+            p.path.toLowerCase().includes(q)
+        );
+    }
+
+    if (filteredProjects.length === 0) {
+        projectsGrid.innerHTML = `
+            <div class="empty-state" style="grid-column: 1/-1; text-align: center; padding: 4rem; color: var(--text-muted);">
+                <i class="ph-duotone ph-rocket" style="font-size: 4rem; margin-bottom: 1rem; color: var(--primary);"></i>
+                <h2>No Vibe Projects Found</h2>
+                <p>${projects.length === 0 ? 'Click "New Project" to start tracking your magical creations.' : 'Try adjusting your search query.'}</p>
+            </div>
+        `;
+        return;
+    }
+
+    projectsGrid.innerHTML = '';
+    filteredProjects.forEach((p, index) => {
+        const card = document.createElement('div');
+        card.className = 'project-card';
+        card.style.animationDelay = `${index * 0.1}s`;
+
+        const logoHtml = p.logo
+            ? `<img src="${p.logo}" alt="${p.name} logo">`
+            : `<i class="ph-bold ph-code"></i>`;
+
+        let cmdButtons = '';
+        if (p.commands && p.commands.length > 0) {
+            p.commands.forEach((c, i) => {
+                cmdButtons += `
+                    <button class="btn cmd-btn" onclick="executeCommand('${p.id}', ${i})">
+                        <i class="ph-bold ph-play"></i> ${c.name}
+                    </button>
+                `;
+            });
+        }
+
+        // Action grouping string
+        const actionHtml = `
+            <div class="actions-area">
+                <button class="btn cmd-btn ide-btn" onclick="openIDE('${p.id}')">
+                    <i class="ph-bold ph-terminal-window"></i> Open ${p.ide || 'IDE'}
+                </button>
+                ${cmdButtons}
+            </div>
+        `;
+
+        card.innerHTML = `
+            <div class="card-actions-top">
+                <button class="icon-btn edit-btn" onclick="editProject('${p.id}')">
+                    <i class="ph-bold ph-pencil-simple"></i>
+                </button>
+                <button class="icon-btn delete-btn" onclick="deleteProject('${p.id}')">
+                    <i class="ph-bold ph-trash"></i>
+                </button>
+            </div>
+            <div class="card-header">
+                <div class="logo-display">${logoHtml}</div>
+                <div class="card-title">
+                    <h3>${p.name}</h3>
+                    <p>${p.path}</p>
+                </div>
+            </div>
+            ${actionHtml}
+        `;
+        projectsGrid.appendChild(card);
+    });
+}
+
+// Actions
+async function executeCommand(id, cmdIndex) {
+    try {
+        const res = await fetch(`${API_BASE}/${id}/execute`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ commandIndex: cmdIndex })
+        });
+        const data = await res.json();
+        if (!data.success) alert(data.error);
+    } catch (e) {
+        console.error(e);
+        alert("Failed to execute code.");
+    }
+}
+
+async function openIDE(id) {
+    try {
+        const res = await fetch(`${API_BASE}/${id}/open-ide`, {
+            method: 'POST'
+        });
+        const data = await res.json();
+        if (!data.success) alert(data.error);
+    } catch (e) {
+        console.error(e);
+        alert("Failed to open IDE.");
+    }
+}
+
+async function deleteProject(id) {
+    if (!confirm('Are you sure you want to delete this project?')) return;
+    try {
+        await fetch(`${API_BASE}/${id}`, { method: 'DELETE' });
+        fetchProjects();
+    } catch (e) {
+        console.error(e);
+    }
+}
+
+function editProject(id) {
+    const project = projects.find(p => p.id === id);
+    if (!project) return;
+
+    document.getElementById('modalTitle').textContent = 'Edit Project';
+    document.getElementById('editProjectId').value = project.id;
+    document.getElementById('pName').value = project.name || '';
+    document.getElementById('pPath').value = project.path || '';
+    document.getElementById('pLogo').value = project.logo || '';
+    document.getElementById('pIde').value = project.ide || 'code';
+
+    commandsList.innerHTML = '';
+    if (project.commands && project.commands.length > 0) {
+        project.commands.forEach(cmd => {
+            const row = addCommandRow();
+            row.querySelector('.cmd-name').value = cmd.name;
+            row.querySelector('.cmd-val').value = cmd.cmd;
+        });
+    } else {
+        addCommandRow();
+    }
+
+    addModal.classList.remove('hidden');
+}
+
+// Modal Managemenet
+function openModal() {
+    document.getElementById('modalTitle').textContent = 'Add New Project';
+    document.getElementById('editProjectId').value = '';
+    addModal.classList.remove('hidden');
+    // Reset Form
+    projectForm.reset();
+    commandsList.innerHTML = '';
+    addCommandRow(); // Add one default blank row
+}
+
+function closeModal() {
+    addModal.classList.add('hidden');
+}
+
+// Dynamic Command Rows
+function addCommandRow() {
+    const row = document.createElement('div');
+    row.className = 'cmd-row';
+    row.innerHTML = `
+        <input type="text" placeholder="Name (e.g. backend)" class="cmd-name" required>
+        <input type="text" placeholder="Command (e.g. npm run dev)" class="cmd-val" required>
+        <button type="button" class="icon-btn btn-remove-cmd" style="color: #ef4444;"><i class="ph-bold ph-minus-circle"></i></button>
+    `;
+    commandsList.appendChild(row);
+
+    row.querySelector('.btn-remove-cmd').addEventListener('click', () => {
+        row.remove();
+    });
+    return row;
+}
+
+// Event Listeners
+searchInput.addEventListener('input', (e) => {
+    searchQuery = e.target.value;
+    renderProjects();
+});
+addProjectBtn.addEventListener('click', openModal);
+closeModalBtn.addEventListener('click', closeModal);
+cancelModalBtn.addEventListener('click', closeModal);
+addCmdBtn.addEventListener('click', addCommandRow);
+
+addModal.addEventListener('click', (e) => {
+    if (e.target === addModal) closeModal();
+});
+
+projectForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    // gather commands
+    const commands = [];
+    const rows = commandsList.querySelectorAll('.cmd-row');
+    rows.forEach(r => {
+        const name = r.querySelector('.cmd-name').value;
+        const cmd = r.querySelector('.cmd-val').value;
+        if (name && cmd) {
+            commands.push({ name, cmd });
+        }
+    });
+
+    const body = {
+        name: document.getElementById('pName').value,
+        path: document.getElementById('pPath').value,
+        logo: document.getElementById('pLogo').value,
+        ide: document.getElementById('pIde').value,
+        commands
+    };
+
+    const editId = document.getElementById('editProjectId').value;
+    const isEdit = !!editId;
+    const url = isEdit ? `${API_BASE}/${editId}` : API_BASE;
+    const method = isEdit ? 'PUT' : 'POST';
+
+    try {
+        const res = await fetch(url, {
+            method: method,
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body)
+        });
+        if (res.ok) {
+            closeModal();
+            fetchProjects();
+        } else {
+            alert("Failed to save project.");
+        }
+    } catch (err) {
+        console.error(err);
+    }
+});
+
+// Init
+fetchProjects();

package/public/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vibe Launcher</title>
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Phosphor Icons for UI -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="bg-effects">
+        <div class="blob blob-1"></div>
+        <div class="blob blob-2"></div>
+        <div class="blob blob-3"></div>
+    </div>
+
+    <main class="container">
+        <header class="app-header">
+            <div class="logo-area">
+                <i class="ph-fill ph-rocket-launch"></i>
+                <h1>Vibe Launcher</h1>
+            </div>
+            <div class="header-actions">
+                <div class="search-box">
+                    <i class="ph-bold ph-magnifying-glass"></i>
+                    <input type="text" id="searchInput" placeholder="Search projects...">
+                </div>
+                <button id="addProjectBtn" class="btn primary-btn">
+                    <i class="ph-bold ph-plus"></i> New Project
+                </button>
+            </div>
+        </header>
+
+        <div id="projectsGrid" class="projects-grid">
+            <!-- Projects injected via JS -->
+            <div class="loading">Loading your vibe code...</div>
+        </div>
+    </main>
+
+    <!-- Modal for adding/editing project -->
+    <div id="addModal" class="modal-overlay hidden">
+        <div class="modal">
+            <div class="modal-header">
+                <h2 id="modalTitle">Add New Project</h2>
+                <button id="closeModalBtn" class="icon-btn"><i class="ph-bold ph-x"></i></button>
+            </div>
+            <div class="modal-body">
+                <form id="projectForm">
+                    <input type="hidden" id="editProjectId" value="">
+                    <div class="form-group">
+                        <label>Project Name</label>
+                        <input type="text" id="pName" required placeholder="e.g. Magic App">
+                    </div>
+                    <div class="form-group">
+                        <label>Location (Absolute path)</label>
+                        <input type="text" id="pPath" required placeholder="C:\Users\username\Projects\MagicApp">
+                    </div>
+                    <div class="form-group">
+                        <label>Logo URL (Optional)</label>
+                        <input type="url" id="pLogo" placeholder="https://example.com/logo.png">
+                    </div>
+                    <div class="form-group">
+                        <label>IDE Command</label>
+                        <input type="text" id="pIde" required placeholder="code, cursor, or antigravity">
+                    </div>
+
+                    <div class="commands-section">
+                        <div class="commands-header">
+                            <h3>Execution Commands</h3>
+                            <button type="button" id="addCmdBtn" class="text-btn"><i class="ph-bold ph-plus"></i> Add
+                                Command</button>
+                        </div>
+                        <div id="commandsList">
+                            <!-- Commands added here -->
+                        </div>
+                    </div>
+
+                    <div class="modal-actions">
+                        <button type="button" id="cancelModalBtn" class="btn secondary-btn">Cancel</button>
+                        <button type="submit" class="btn primary-btn">Save Project</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+
+</html>

package/public/style.css

@@ -0,0 +1,504 @@
+:root {
+    --bg-base: #0a0a0f;
+    --bg-glass: rgba(20, 20, 30, 0.6);
+    --border-glass: rgba(255, 255, 255, 0.08);
+    --primary: #6366f1;
+    --primary-hover: #4f46e5;
+    --accent: #ec4899;
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --card-hover: rgba(255, 255, 255, 0.03);
+
+    --blur: blur(16px);
+    --radius: 16px;
+    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Outfit', sans-serif;
+}
+
+body {
+    background-color: var(--bg-base);
+    color: var(--text-main);
+    min-height: 100vh;
+    overflow-x: hidden;
+    position: relative;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* Background Animated Blobs */
+.bg-effects {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.blob {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.5;
+    animation: float 20s infinite alternate;
+}
+
+.blob-1 {
+    width: 400px;
+    height: 400px;
+    background: var(--primary);
+    top: -10%;
+    left: -10%;
+}
+
+.blob-2 {
+    width: 300px;
+    height: 300px;
+    background: var(--accent);
+    bottom: -10%;
+    right: -5%;
+    animation-delay: -5s;
+}
+
+.blob-3 {
+    width: 250px;
+    height: 250px;
+    background: #8b5cf6;
+    top: 40%;
+    left: 60%;
+    animation-delay: -10s;
+}
+
+@keyframes float {
+    0% {
+        transform: translate(0, 0) scale(1);
+    }
+
+    100% {
+        transform: translate(30px, -50px) scale(1.1);
+    }
+}
+
+/* Container */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+/* Header */
+.app-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 3rem;
+    padding: 1rem 2rem;
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+}
+
+.logo-area {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.logo-area i {
+    font-size: 2rem;
+    color: var(--primary);
+    background: linear-gradient(135deg, var(--primary), var(--accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.logo-area h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.search-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.search-box i {
+    position: absolute;
+    left: 1rem;
+    color: var(--text-muted);
+}
+
+.search-box input {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-glass);
+    border-radius: 20px;
+    padding: 0.6rem 1rem 0.6rem 2.5rem;
+    color: var(--text-main);
+    font-size: 0.95rem;
+    width: 250px;
+    outline: none;
+    transition: all 0.3s ease;
+}
+
+.search-box input:focus {
+    width: 300px;
+    border-color: var(--primary);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+/* Buttons */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 500;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: none;
+    outline: none;
+}
+
+.primary-btn {
+    background: var(--primary);
+    color: white;
+    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+}
+
+.primary-btn:hover {
+    background: var(--primary-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
+}
+
+.secondary-btn {
+    background: transparent;
+    color: var(--text-main);
+    border: 1px solid var(--border-glass);
+}
+
+.secondary-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.text-btn {
+    background: transparent;
+    color: var(--primary);
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    transition: color 0.2s;
+}
+
+.text-btn:hover {
+    color: var(--text-main);
+}
+
+.icon-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 1.25rem;
+    transition: color 0.2s;
+}
+
+.icon-btn:hover {
+    color: var(--text-main);
+}
+
+/* Grid */
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.5rem;
+}
+
+/* Card */
+.project-card {
+    background: var(--bg-glass);
+    backdrop-filter: var(--blur);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.project-card:hover {
+    transform: translateY(-5px);
+    background: rgba(25, 25, 35, 0.7);
+    border-color: rgba(255, 255, 255, 0.15);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.logo-display {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.05);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    flex-shrink: 0;
+    border: 1px solid var(--border-glass);
+}
+
+.logo-display img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.logo-display i {
+    font-size: 1.5rem;
+    color: var(--text-muted);
+}
+
+.card-title {
+    flex: 1;
+    overflow: hidden;
+}
+
+.card-title h3 {
+    font-size: 1.2rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 0.25rem;
+}
+
+.card-title p {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.card-actions-top {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: flex;
+    gap: 0.5rem;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.project-card:hover .card-actions-top {
+    opacity: 1;
+}
+
+.card-actions-top button {
+    color: var(--text-muted);
+}
+
+.card-actions-top button:hover {
+    color: var(--primary);
+}
+
+.delete-btn:hover {
+    color: #ef4444 !important;
+}
+
+.actions-area {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: auto;
+}
+
+.cmd-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-glass);
+    border-radius: 20px;
+    color: var(--text-main);
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.cmd-btn:hover {
+    background: var(--primary);
+    border-color: var(--primary);
+}
+
+.ide-btn {
+    background: rgba(236, 72, 153, 0.1);
+    border-color: rgba(236, 72, 153, 0.2);
+    color: #fbcfe8;
+}
+
+.ide-btn:hover {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: white;
+}
+
+/* Modal */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(8px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+}
+
+.modal-overlay.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.modal {
+    background: #111116;
+    border: 1px solid var(--border-glass);
+    border-radius: var(--radius);
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: var(--shadow);
+    transform: translateY(0);
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.modal-overlay.hidden .modal {
+    transform: translateY(20px) scale(0.95);
+}
+
+.modal-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-glass);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-body {
+    padding: 1.5rem;
+}
+
+.form-group {
+    margin-bottom: 1.25rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+}
+
+.form-group input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border-glass);
+    border-radius: 8px;
+    color: white;
+    font-size: 1rem;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+    border-color: var(--primary);
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.commands-section {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--border-glass);
+}
+
+.commands-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.cmd-row {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+    align-items: center;
+}
+
+.cmd-row input {
+    flex: 1;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border-glass);
+    border-radius: 6px;
+    color: white;
+}
+
+.modal-actions {
+    margin-top: 2rem;
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.project-card {
+    animation: fadeIn 0.4s ease forwards;
+}

package/server.js

@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+const express = require('express');
+const cors = require('cors');
+const fs = require('fs');
+const path = require('path');
+const { exec } = require('child_process');
+
+// For global install, we want to store projects in a reliable place
+// like the user's home directory so it's persisted across updates
+const os = require('os');
+const DATA_FILE = path.join(os.homedir(), 'vibelancher_projects.json');
+
+const app = express();
+const PORT = 3000;
+
+app.use(cors());
+app.use(express.json());
+app.use(express.static(path.join(__dirname, 'public')));
+
+// Helper to read data
+function readData() {
+    if (!fs.existsSync(DATA_FILE)) {
+        return [];
+    }
+    const raw = fs.readFileSync(DATA_FILE);
+    try {
+        return JSON.parse(raw);
+    } catch (e) {
+        return [];
+    }
+}
+
+// Helper to write data
+function writeData(data) {
+    fs.writeFileSync(DATA_FILE, JSON.stringify(data, null, 2));
+}
+
+// Get all projects
+app.get('/api/projects', (req, res) => {
+    res.json(readData());
+});
+
+// Add a new project
+app.post('/api/projects', (req, res) => {
+    const projects = readData();
+    const newProject = {
+        id: Date.now().toString(),
+        name: req.body.name || 'Unnamed Project',
+        path: req.body.path || '',
+        logo: req.body.logo || '',
+        ide: req.body.ide || 'code',
+        commands: req.body.commands || []
+    };
+    projects.push(newProject);
+    writeData(projects);
+    res.json(newProject);
+});
+
+// Delete a project
+app.delete('/api/projects/:id', (req, res) => {
+    let projects = readData();
+    projects = projects.filter(p => p.id !== req.params.id);
+    writeData(projects);
+    res.json({ success: true });
+});
+
+// Update an existing project
+app.put('/api/projects/:id', (req, res) => {
+    const projects = readData();
+    const index = projects.findIndex(p => p.id === req.params.id);
+    if (index === -1) {
+        return res.status(404).json({ error: 'Project not found' });
+    }
+
+    projects[index] = {
+        id: req.params.id, // Preserve ID
+        name: req.body.name || projects[index].name,
+        path: req.body.path || projects[index].path,
+        logo: req.body.logo || projects[index].logo,
+        ide: req.body.ide || projects[index].ide,
+        commands: req.body.commands || projects[index].commands
+    };
+
+    writeData(projects);
+    res.json(projects[index]);
+});
+
+// Execute a project command
+app.post('/api/projects/:id/execute', (req, res) => {
+    const projects = readData();
+    const project = projects.find(p => p.id === req.params.id);
+    if (!project) {
+        return res.status(404).json({ error: 'Project not found' });
+    }
+
+    const { commandIndex } = req.body;
+    const cmdObj = project.commands[commandIndex];
+    if (!cmdObj) {
+        return res.status(400).json({ error: 'Command not found' });
+    }
+
+    // Launch in a new command prompt window on Windows
+    // /k keeps the window open
+    const fullCmd = `start "" cmd.exe /k "cd /d "${project.path}" && ${cmdObj.cmd}"`;
+    exec(fullCmd, (error) => {
+        if (error) {
+            console.error('Execution error:', error);
+            return res.status(500).json({ error: error.message });
+        }
+    });
+    res.json({ success: true, message: `Executed ${cmdObj.name}` });
+});
+
+// Open IDE
+app.post('/api/projects/:id/open-ide', (req, res) => {
+    const projects = readData();
+    const project = projects.find(p => p.id === req.params.id);
+    if (!project) {
+        return res.status(404).json({ error: 'Project not found' });
+    }
+
+    // Launch IDE
+    const fullCmd = `start "" cmd.exe /c "cd /d "${project.path}" && ${project.ide} ."`;
+    exec(fullCmd, (error) => {
+        if (error) {
+            console.error('Execution error:', error);
+            return res.status(500).json({ error: error.message });
+        }
+    });
+
+    res.json({ success: true, message: `Opened with ${project.ide}` });
+});
+
+app.listen(PORT, () => {
+    console.log(`Vibe Launcher API listening at http://localhost:${PORT}`);
+});