@jtaco/customcmd 1.1.0

package/README.md

@@ -0,0 +1,95 @@
+# CustomCMD
+An easy to use custom terminal command creator that can run multiple steps with a single command.
+
+## Installation
+
+**Via npm:**
+
+    npm install -g customcmd
+
+**Via git:**
+
+    git clone https://github.com/J-Taco/custom-command.git
+    cd custom-command
+    npm link
+
+**Verify install:**
+
+    customcmd --version
+
+## Usage
+CustomCMD lets you define commands that run one or more terminal commands in sequence. Once defined, run them by name as if they were built-in terminal commands.
+
+    customcmd define my-command --description "My first command" --cmd "echo Hello, World!"
+    customcmd my-command
+
+## Commands
+
+| Command | Description |
+|---|---|
+| `customcmd define <name> [options]` | Define a new command |
+| `customcmd run <name> [args]` | Run a command (name alone also works) |
+| `customcmd list` | List all defined commands |
+| `customcmd info <name>` | Show details of a command |
+| `customcmd edit <name> [options]` | Update an existing command |
+| `customcmd remove <name>` | Delete a command |
+| `customcmd ui` | Launch the web UI |
+
+### Define & Edit Options
+
+| Option | Description |
+|---|---|
+| `--description <text>` | A description of what the command does |
+| `--cmd <command>` | A step to run (repeat for multiple steps) |
+| `--arg <arg>` | An argument definition (repeat for multiple args) |
+
+> **Note:** `edit` only updates the fields you pass — everything else stays the same. If you pass a --cmd or --arg it will overwrite all of them. 
+
+## Argument Types
+
+CustomCMD supports three types of arguments used as placeholders in your commands with `${arg-name}` syntax.
+
+### Positional
+Required arguments passed by position.
+
+    customcmd define greet --arg "name:positional" --cmd "echo Hello ${name}!"
+    customcmd greet Joshua
+    # -> Hello Joshua!
+
+### Named
+Optional arguments with a default value, passed with --arg-name value.
+
+    customcmd define greet --arg "name:named:World" --cmd "echo Hello ${name}!"
+    customcmd greet                  # -> Hello World!
+    customcmd greet --name Joshua    # -> Hello Joshua!
+
+### Flag
+Boolean arguments — true if passed, false if not.
+
+    customcmd define build --arg "verbose:flag" --cmd "echo Building... ${verbose}"
+    customcmd build             # -> Building... false
+    customcmd build --verbose   # -> Building... true
+
+## Examples
+
+**Create a new Flutter project:**
+
+    customcmd define new-flutter --description "Creates a new Flutter project and opens VS Code" --arg "identifier:positional" --cmd "flutter create ${identifier}" --cmd "code ${identifier}"
+
+    customcmd new-flutter my_app
+
+**Git add, commit and push in one command:**
+
+    customcmd define push --description "Stages, commits and pushes changes" --arg "message:positional" --cmd "git add ." --cmd "git commit -m ${message}" --cmd "git push"
+
+    customcmd push "My commit message"
+
+## Web UI
+CustomCMD includes a local web interface for managing your commands visually.
+
+    customcmd ui
+    # -> Opens http://localhost:4242 in your browser
+    # -> Press q to quit
+
+## License
+ISC

package/bin/customcmd.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+import { program } from 'commander';
+import { runCommand } from '../src/commands/run.js';
+
+program.name('customcmd').description('An easy to use custom terminal command creator that can do multiple steps with one command').version('1.1.0');
+
+import '../src/commands/define.js';
+import '../src/commands/list.js';
+import '../src/commands/remove.js';
+import '../src/commands/run.js';
+import '../src/commands/info.js';
+import '../src/commands/ui.js';
+import '../src/commands/edit.js';
+
+program
+    .arguments('<name> [userInputs...]')
+    .allowUnknownOption()
+    .action(async (name, userInputs) => {
+        await runCommand(name, userInputs);
+    });
+
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@jtaco/customcmd",
+  "version": "1.1.0",
+  "description": "An easy to use custom terminal command creator that can do multiple steps with one command",
+  "license": "ISC",
+  "author": "JTaco",
+  "type": "module",
+  "bin": {
+    "customcmd": "./bin/customcmd.js",
+    "custcmd": "./bin/customcmd.js"
+  },
+  "files": [
+    "bin/",
+    "src/"
+  ],
+  "scripts": {
+    "test": "npm -watch bin/index.js"
+  },
+  "dependencies": {
+    "commander": "^12.0.0",
+    "express": "^4.18.0",
+    "open": "^10.2.0"
+  }
+}

package/src/commands/define.js

@@ -0,0 +1,43 @@
+import { program } from 'commander';
+import { save } from "../core/store.js";
+
+program
+    .command('define <name>')
+    .description('Define a custom command')
+    .option('--description <description>', 'Command description')
+    .option('--cmd <cmd...>', 'Command(s) to save')
+    .option('--arg <arg...>', 'Argument(s) to save')
+    .action(async (name, options) => {
+        const object = {
+            description: options.description ?? '',
+            commands: options.cmd ?? [],
+            arguments: (options.arg ?? []).map(arg => argumentFormat(arg)),
+        };
+
+        const saved = await save(name, object);
+
+        if (saved == 'exists') {
+            console.error(`Error: ${name} is already a registered command! `);
+        } else if (saved == 'success') {
+            console.log(`Command "${name}" saved successfully.`);
+        } else {
+            console.error(`An unknown error occured when creating ${name}. Try again. `);
+        }
+    });
+
+export function argumentFormat(argString) {
+    const parts = argString.split(':');
+
+    if (parts[1] == 'named') {
+        return {
+            name: parts[0],
+            type: parts[1],
+            default: parts[2],
+        };
+    } else {
+        return {
+            name: parts[0],
+            type: parts[1],
+        };
+    }
+}

package/src/commands/edit.js

@@ -0,0 +1,27 @@
+import { program } from 'commander';
+import { update } from '../core/store.js';
+import { argumentFormat } from './define.js';
+
+program
+    .command('edit <name>')
+    .description('Update an already existing command')
+    .option('--description <description>', 'Command description')
+    .option('--cmd <cmd...>', 'Command(s) to save')
+    .option('--arg <arg...>', 'Argument(s) to save')
+    .action(async (name, options) => {
+        const object = {};
+
+        if (options.description !== undefined) object.description = options.description;
+        if (options.cmd !== undefined) object.commands = options.cmd;
+        if (options.arg !== undefined) object.arguments = options.arg.map(arg => argumentFormat(arg));
+
+        const saved = await update(name, object);
+
+        if (saved == 'not-exists') {
+            console.error(`Error: ${name} does not exist. Create a command with customcmd define <name>`);
+        } else if (saved == 'success') {
+            console.log(`Command ${name} updated successfully.`);
+        } else {
+            console.error(`An unknown error occured when updating ${name}. Try again. `)
+        }
+    });

package/src/commands/info.js

@@ -0,0 +1,25 @@
+import { program } from "commander";
+import { getOne } from "../core/store.js";
+
+program
+    .command('info <name>')
+    .description('Get all the info for one command')
+    .action((name) => {
+        const data = getOne(name);
+        const longestLength = Math.max(...data.arguments.map(arg => arg.name.length));
+
+        console.log(`Command: ${name}`);
+        console.log(`Description: ${data.description}`);
+        console.log('\nArguments:')
+        data.arguments.forEach(arg => {
+            if (arg.type == 'named') {
+                console.log(`- ${arg.name.padEnd(longestLength)}  (${arg.type}, default: ${arg.default})`);
+            } else {
+                console.log(`- ${arg.name.padEnd(longestLength)}  (${arg.type})`);
+            }
+        });
+        console.log('\nSteps:')
+        for (let i = 0; i < data.commands.length; i++) {
+            console.log(`${i + 1}. ${data.commands[i]}`);
+        }
+    });

package/src/commands/list.js

@@ -0,0 +1,19 @@
+import { program } from "commander";
+import { getAll } from "../core/store.js";
+
+program
+    .command('list')
+    .description('Lists all custom commands')
+    .action(() => {
+        const data = getAll();
+        const keys = Object.keys(data);
+
+        if (keys.length == 0) {
+            console.log('No defined commands.');
+        } else {
+            keys.forEach(key => {
+                const cmd = data[key];
+                console.log(`${key} - ${cmd.description}`);
+            });
+        }
+    });

package/src/commands/remove.js

@@ -0,0 +1,10 @@
+import { program } from "commander";
+import { remove } from "../core/store.js";
+
+program
+    .command('remove <name>')
+    .description('Remove a custom command')
+    .action(async (name) => {
+        await remove(name);
+        console.log(`Command ${name} was removed. `)
+    });

package/src/commands/run.js

@@ -0,0 +1,40 @@
+import { program } from "commander";
+import { getOne } from "../core/store.js";
+import { execute } from "../core/executor.js";
+
+program
+    .command('run <name> [userInputs...]')
+    .allowUnknownOption()
+    .action(async (name, userInputs) => {
+        await runCommand(name, userInputs);
+    });
+
+export function runCommand(name, userInputs) {
+    const commandDef = getOne(name);
+
+    if (commandDef == null || commandDef == undefined) {
+        console.log(`Could not find a command named ${name}. Try defining a new command: `);
+        console.log('customcmd define <name> --description <cool description> --cmd <commands to run in order. Can do multiple --cmd> --arg <arguments for your command. Can do multiple --arg>');
+        return;
+    }
+
+    const namedArgs = {};
+    const positionalArgs = [];
+
+    for (let i = 0; i < userInputs.length; i++) {
+        if (userInputs[i].startsWith('--')) {
+            const argName = userInputs[i].slice(2);
+
+            if (userInputs[i + 1] != undefined && !userInputs[i + 1].startsWith('--')) {
+                namedArgs[argName] = userInputs[i + 1]
+                i++;
+            } else {
+                namedArgs[argName] = true;
+            }
+        } else {
+            positionalArgs.push(userInputs[i]);
+        }
+    }
+
+    execute(commandDef, positionalArgs, namedArgs);
+}

package/src/commands/ui.js

@@ -0,0 +1,21 @@
+import { program } from "commander";
+import open from "open";
+
+program
+    .command('ui')
+    .description('Start the web UI for easy configuration')
+    .action(async () => {
+        await import('../server/server.js');
+        await open("http://localhost:4242");
+
+        process.stdin.setRawMode(true);
+        process.stdin.resume();
+        process.stdin.setEncoding('utf8');
+
+        process.stdin.on('data', (key) => {
+            if (key === 'q' || key === '\u0003') {
+                console.log('Closing web UI. ');
+                process.exit();
+            }
+        });
+    });

package/src/core/executor.js

@@ -0,0 +1,24 @@
+import { execSync } from 'child_process';
+import { resolve } from './resolver.js';
+
+export function replacePlaceholders(commandString, mapping) {
+    Object.keys(mapping).forEach(key => {
+        commandString = commandString.replaceAll(`\${${key}}`, mapping[key]);
+    });
+
+    return commandString;
+}
+
+export function execute(commandDef, positionalArgs, namedArgs) {
+    const mapping = resolve(commandDef.arguments, positionalArgs, namedArgs);
+
+    if (mapping == undefined) {
+        console.log("Command failed to run. ");
+        return;
+    }
+
+    commandDef.commands.forEach(commandString => {
+        const resolvedCommand = replacePlaceholders(commandString, mapping);
+        execSync(resolvedCommand, { stdio: 'inherit', shell: true });
+    });
+}

package/src/core/resolver.js

@@ -0,0 +1,37 @@
+export function resolve(argumentDefs, positionalArgs, namedArgs) {
+    let positionalArgCounter = 0;
+    for (let i = 0; i < argumentDefs.length; i++) {
+        if (argumentDefs[i].type == 'positional') {
+            positionalArgCounter++;
+        }
+    }
+
+    if (positionalArgCounter != positionalArgs.length) {
+        console.error(`Incorrect number of positional arguments!\nExpected ${positionalArgCounter} but got ${positionalArgs.length}!`);
+        return;
+    }
+
+    const mapping = {};
+    let positionalIndex = 0;
+
+    for (let i = 0; i < argumentDefs.length; i++) {
+        if (argumentDefs[i].type == 'positional') {
+            mapping[argumentDefs[i].name] = positionalArgs[positionalIndex];
+            positionalIndex++;
+        } else if (argumentDefs[i].type == 'named') {
+            if (argumentDefs[i].name in namedArgs) {
+                mapping[argumentDefs[i].name] = namedArgs[argumentDefs[i].name];
+            } else {
+                mapping[argumentDefs[i].name] = argumentDefs[i].default;
+            }
+        } else if (argumentDefs[i].type == 'flag') {
+            if (argumentDefs[i].name in namedArgs) {
+                mapping[argumentDefs[i].name] = true;
+            } else {
+                mapping[argumentDefs[i].name] = false;
+            }
+        }
+    }
+
+    return mapping;
+}

package/src/core/store.js

@@ -0,0 +1,68 @@
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+
+const dirPath = path.join(os.homedir(), ".customcmd");
+const dataPath = path.join(dirPath, "commands.json");
+
+if (!fs.existsSync(dataPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+    fs.writeFileSync(dataPath, "{}");
+}
+
+export function getAll() {
+    try {
+        const rawData = fs.readFileSync(dataPath, "utf8");
+        return JSON.parse(rawData);
+    } catch (e) {
+        return e;
+    }
+}
+
+export function getOne(name) {
+    const all = getAll();
+    return all[name];
+}
+
+export function save(name, command) {
+    const existing = getOne(name);
+    if (existing == null || existing == undefined) {
+        try {
+            let commandsJson = getAll();
+            commandsJson[name] = command;
+            fs.writeFileSync(dataPath, JSON.stringify(commandsJson));
+            return "success";
+        } catch (e) {
+            return 'failed';
+        }
+    } else {
+        return 'exists';
+    }
+}
+
+export function update(name, command) {
+    const exists = getOne(name);
+    if (exists == null || exists == undefined) {
+        return 'not-exist';
+    } else {
+        try {
+            let commandsJson = getAll();
+            const updated = { ...exists, ...command };
+            commandsJson[name] = updated;
+            fs.writeFileSync(dataPath, JSON.stringify(commandsJson));
+            return 'success';
+        } catch (e) {
+            return 'failed';
+        }
+    }
+}
+
+export function remove(name) {
+    try {
+        let commandsJson = getAll();
+        delete commandsJson[name];
+        fs.writeFileSync(dataPath, JSON.stringify(commandsJson));
+    } catch (e) {
+        return e;
+    }
+}

package/src/server/public/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Custom Command Control</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <header>
+        <h1>CustomCMD</h1>
+        <button id="add-cmd">Add Command</button>
+    </header>
+
+    <div id="commands-grid"></div>
+
+    <div id="info-modal" class="modal-overlay">
+        <div class="modal">
+            <div class="modal-header">
+                <h2 id="modal-name"></h2>
+                <button id="modal-close">x</button>
+            </div>
+
+            <p id="modal-description"></p>
+
+            <h3>Arguments</h3>
+            <div id="modal-arguments"></div>
+
+            <h3>Steps</h3>
+            <div id="modal-steps"></div>
+
+            <div id="modal-buttons">
+                <button id="modal-edit">Edit Command</button>
+                <button id="modal-delete">Delete Command</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="add-modal" class="modal-overlay">
+        <div class="modal">
+            <div class="modal-header">
+                <h2>Add Command</h2>
+                <button id="add-modal-close">x</button>
+            </div>
+
+            <label>Name</label>
+            <input id="add-name" type="text" placeholder="e.g. new-flutter" />
+
+            <label>Description</label>
+            <input id="add-description" type="text" placeholder="What does this command do?" />
+
+            <div class="modal-section-header">
+                <h3>Steps</h3>
+                <button id="add-step-btn">+ Add Step</button>
+            </div>
+            <div id="add-steps"></div>
+
+            <div class="modal-section-header">
+                <h3>Arguments</h3>
+                <button id="add-arg-btn">+ Add Argument</button>
+            </div>
+            <div id="add-arguments"></div>
+
+            <button id="add-submit">Save Command</button>
+        </div>
+    </div>
+
+    <script src="index.js"></script>
+</body>
+
+</html>

package/src/server/public/index.js

@@ -0,0 +1,255 @@
+const modal = document.getElementById('info-modal');
+const addModal = document.getElementById('add-modal');
+let editingCommand = null;
+
+function renderCommands(commands) {
+    const grid = document.getElementById("commands-grid");
+    grid.innerHTML = '';
+
+    if (Object.keys(commands).length == 0) {
+        grid.innerHTML = "<h1>You have no commands.</h1>";
+        return;
+    }
+
+    Object.keys(commands).forEach(key => {
+        const command = commands[key];
+
+        const card = document.createElement('div');
+        card.className = 'command-card';
+        card.innerHTML = `
+        <h2>${key}</h2>
+        <p>${command.description}</p>
+        `;
+
+        card.addEventListener('click', () => {
+            document.getElementById('modal-name').textContent = key;
+            document.getElementById('modal-description').textContent = command.description;
+
+            const argsDiv = document.getElementById('modal-arguments');
+            argsDiv.innerHTML = '';
+
+            command.arguments.forEach((arg) => {
+                if (arg.type == 'named') {
+                    argsDiv.innerHTML += `<p>- ${arg.name}    (${arg.type}, default: ${arg.default})</p> `;
+                } else {
+                    argsDiv.innerHTML += `<p>- ${arg.name}    (${arg.type})</p> `;
+                }
+            });
+
+            const stepsDiv = document.getElementById('modal-steps');
+            stepsDiv.innerHTML = '';
+
+            command.commands.forEach((step, index) => {
+                stepsDiv.innerHTML += `<p> ${index + 1}. ${step}</p> `;
+            });
+
+            document.getElementById('modal-edit').onclick = async () => {
+                editingCommand = key;
+
+                document.getElementById('add-name').value = key;
+                document.getElementById('add-description').value = command.description;
+
+                document.getElementById('add-steps').innerHTML = '';
+                document.getElementById('add-arguments').innerHTML = '';
+
+                command.commands.forEach(step => {
+                    const stepsDiv = document.getElementById('add-steps');
+                    const input = document.createElement('input');
+                    input.type = 'text';
+                    input.placeholder = 'e.g. flutter create ${bundle-id}';
+                    input.className = 'step-input';
+                    input.value = step;
+                    stepsDiv.appendChild(input);
+                });
+
+                command.arguments.forEach(arg => {
+                    const argsDiv = document.getElementById('add-arguments');
+
+                    const row = document.createElement('div');
+                    row.className = 'arg-row';
+
+                    const nameInput = document.createElement('input');
+                    nameInput.type = 'text';
+                    nameInput.className = 'arg-name';
+                    nameInput.value = arg.name;
+
+                    const select = document.createElement('select');
+                    select.className = 'arg-type';
+                    select.innerHTML = `
+                    <option value="positional">positional</option>
+                    <option value="named">named</option>
+                    <option value="flag">flag</option>`;
+                    select.value = arg.type;
+
+                    const defaultInput = document.createElement('input');
+                    defaultInput.type = 'text';
+                    defaultInput.placeholder = 'default value';
+                    defaultInput.className = 'arg-default';
+                    defaultInput.value = arg.default ?? '';
+
+                    row.append(nameInput);
+                    row.append(select);
+                    row.append(defaultInput);
+                    argsDiv.append(row);
+                })
+
+                document.querySelector('#add-modal .modal-header h2').textContent = 'Edit Command';
+                document.getElementById('add-name').disabled = true;
+
+                modal.classList.remove('active');
+                addModal.classList.add('active');
+            }
+
+            document.getElementById('modal-delete').onclick = async () => {
+                if (confirm('Are you sure you want to delete this command? It CANNOT be undone. ')) {
+                    await fetch(`/api/commands/${key}`, { method: 'DELETE' });
+                    modal.classList.remove('active');
+                    await renderCommands(await getCommands());
+                }
+            };
+
+            document.getElementById('info-modal').classList.add('active');
+        });
+
+        grid.appendChild(card);
+    });
+}
+
+async function getCommands() {
+    try {
+        const res = await fetch("/api/commands");
+        const commands = await res.json();
+        return commands;
+    } catch (error) {
+        console.error("Failed to fetch commands. ");
+        console.error(error);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", async () => {
+    await renderCommands(await getCommands());
+
+    const closeBtn = document.getElementById('modal-close');
+
+    closeBtn.addEventListener('click', () => {
+        modal.classList.remove('active');
+    });
+
+    modal.addEventListener('click', (e) => {
+        if (e.target == modal) {
+            modal.classList.remove('active');
+        }
+    });
+
+    const addCmdBtn = document.getElementById('add-cmd');
+    const addModalClose = document.getElementById('add-modal-close');
+
+    addCmdBtn.addEventListener('click', () => {
+        addModal.classList.add('active');
+    });
+
+    addModalClose.addEventListener('click', () => {
+        addModal.classList.remove('active');
+        document.querySelector('#add-modal .modal-header h2').textContent = "Add Command";
+        document.getElementById('add-name').disabled = false;
+        editingCommand = null;
+    });
+
+    document.getElementById('add-step-btn').addEventListener('click', () => {
+        const stepsDiv = document.getElementById('add-steps');
+
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.placeholder = 'e.g. flutter create ${bundle-id}';
+        input.className = 'step-input';
+
+        stepsDiv.appendChild(input);
+    });
+
+    document.getElementById('add-arg-btn').addEventListener('click', () => {
+        const argsDiv = document.getElementById('add-arguments');
+
+        const row = document.createElement('div');
+        row.className = 'arg-row';
+
+        const nameInput = document.createElement('input');
+        nameInput.type = 'text';
+        nameInput.placeholder = 'arg name';
+        nameInput.className = 'arg-name';
+
+        const select = document.createElement('select');
+        select.className = 'arg-type';
+        select.innerHTML = `<option value="positional">positional</option>
+    <option value="named">named</option>
+    <option value="flag">flag</option>`;
+
+        const defaultInput = document.createElement('input');
+        defaultInput.type = 'text';
+        defaultInput.placeholder = 'default value';
+        defaultInput.className = 'arg-default';
+
+        row.append(nameInput);
+        row.append(select);
+        row.append(defaultInput);
+        argsDiv.appendChild(row);
+    });
+
+    document.getElementById('add-submit').addEventListener('click', async () => {
+        const name = document.getElementById('add-name').value;
+        if (!name) {
+            alert('Please enter a command name');
+            return;
+        }
+        const stepInputs = document.querySelectorAll('.step-input');
+        if (stepInputs.length == 0) {
+            alert('Please add at least one step');
+            return;
+        }
+        document.getElementById('add-name').value = '';
+        const description = document.getElementById('add-description').value;
+        document.getElementById('add-description').value = '';
+
+        const commands = Array.from(stepInputs).map(input => input.value);
+        document.getElementById('add-steps').innerHTML = '';
+
+        const argRows = document.querySelectorAll('.arg-row');
+        const args = Array.from(argRows).map(row => {
+            return {
+                name: row.querySelector('.arg-name').value,
+                type: row.querySelector('.arg-type').value,
+                default: row.querySelector('.arg-default').value
+            }
+        });
+        document.getElementById('add-arguments').innerHTML = '';
+
+        if (editingCommand) {
+            await fetch(`/api/commands/${editingCommand}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, description, commands, arguments: args })
+            });
+            editingCommand = null;
+        } else {
+            await fetch('/api/commands', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, description, commands, arguments: args })
+            });
+        }
+
+        addModal.classList.remove('active');
+        document.querySelector('#add-modal .modal-header h2').textContent = "Add Command";
+        document.getElementById('add-name').disabled = false;
+        await renderCommands(await getCommands());
+    });
+
+    document.addEventListener('keydown', (e) => {
+        if (e.key == 'Escape') {
+            modal.classList.remove('active');
+            addModal.classList.remove('active');
+            document.querySelector('#add-modal .modal-header h2').textContent = "Add Command";
+            document.getElementById('add-name').disabled = false;
+            editingCommand = null;
+        }
+    });
+});

package/src/server/public/styles.css

@@ -0,0 +1,262 @@
+body {
+    --bg: #0d1117;
+    --surface: #161b27;
+    --card-bg: #1c2333;
+    --card-hover: #222940;
+    --accent: #3665b6;
+    --foreground: #e4dfdf;
+    --subtle: #8b949e;
+    --border: #ffffff15;
+
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg);
+    color: var(--foreground);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segeo UI', sans-serif;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 32px;
+    border-bottom: 1px solid var(--border);
+    background-color: var(--surface);
+}
+
+header h1 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+}
+
+header button {
+    background-color: var(--accent);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 8px 18px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+header button:hover {
+    opacity: 0.75;
+    border-radius: 12px;
+}
+
+#commands-grid {
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+#commands-grid h1 {
+    align-self: center;
+    justify-self: center;
+    text-align: center;
+    font-size: medium;
+    opacity: 0.6;
+    padding-top: 4%;
+}
+
+.command-card {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 16px 20px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.command-card:hover {
+    background-color: var(--card-hover);
+}
+
+.command-card h2 {
+    margin: 0 0 6px 0;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.command-card p {
+    margin: 0;
+    font-size: 14px;
+    color: var(--subtle);
+}
+
+.modal-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #00000080;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+}
+
+.modal-overlay.active {
+    display: flex;
+}
+
+.modal {
+    background-color: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 24px;
+    width: 500px;
+    max-width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.modal-header h2 {
+    margin: 0;
+}
+
+.modal-header button {
+    background: none;
+    border: none;
+    color: var(--subtle);
+    font-size: 22px;
+    cursor: pointer;
+}
+
+.modal h3 {
+    padding-top: 4px;
+}
+
+#modal-buttons {
+    display: flex;
+}
+
+#modal-delete {
+    margin-top: 24px;
+    background-color: #c0392b;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 8px 18px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.2s ease;
+}
+
+#modal-delete:hover {
+    opacity: 0.75;
+}
+
+#modal-edit {
+    margin-top: 24px;
+    margin-right: 12px;
+    background-color: var(--accent);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 8px 18px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.2s ease;
+}
+
+#modal-edit:hover {
+    opacity: 0.75;
+}
+
+.modal input {
+    width: 100%;
+    background-color: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 8px 12px;
+    color: var(--foreground);
+    font-size: 14px;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+}
+
+.modal input:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+.modal label {
+    display: block;
+    font-size: 13px;
+    color: var(--subtle);
+    margin-bottom: 6px;
+}
+
+.modal-section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.modal-section-header h3 {
+    margin: 0;
+}
+
+.modal-section-header button {
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--foreground);
+    border-radius: 6px;
+    padding: 4px 10px;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+#add-submit {
+    margin-top: 24px;
+    background-color: var(--accent);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 8px 18px;
+    cursor: pointer;
+    font-size: 14px;
+    width: 100%;
+    transition: all 0.2s ease;
+}
+
+#add-submit:hover {
+    opacity: 0.75;
+}
+
+.arg-row {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.modal select {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 8px 12px;
+    color: var(--foreground);
+    font-size: 14px;
+    cursor: pointer;
+    height: min-content;
+}
+
+.modal select:focus {
+    outline: none;
+    border-color: var(--accent);
+}

package/src/server/routes/api.js

@@ -0,0 +1,30 @@
+import { Router } from "express";
+import { getAll, save, remove, update, getOne } from '../../core/store.js';
+
+const router = Router();
+
+// Return all commands
+router.get('/commands', (req, res) => {
+    res.json(getAll());
+});
+
+router.get('/commands/:name', (req, res) => {
+    res.json(getOne(req.params.name));
+});
+
+// Create a command
+router.post('/commands', (req, res) => {
+    res.json(save(req.body.name, req.body));
+});
+
+router.put('/commands/:name', (req, res) => {
+    res.json(update(req.params.name, req.body));
+});
+
+// Delete a command
+router.delete('/commands/:name', (req, res) => {
+    remove(req.params.name);
+    res.json({ success: true });
+});
+
+export default router;

package/src/server/server.js

@@ -0,0 +1,13 @@
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import router from './routes/api.js';
+
+const PORT = 4242;
+const app = express();
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+app.use(express.json());
+app.use(express.static(path.join(__dirname, 'public')));
+app.use('/api', router);
+app.listen(PORT, () => console.log(`UI running at http://localhost:${PORT}\nPress q to stop the server\n`));