@deploid/studio 2.0.0

package/README.md

@@ -0,0 +1,20 @@
+# Deploid Studio
+
+Desktop GUI for running Deploid commands in a selected project folder.
+
+## Install
+
+```bash
+npm install -g @deploid/studio
+```
+
+## Run
+
+```bash
+deploid-studio
+```
+
+## Notes
+
+- Deploid Studio executes `@deploid/cli` commands from the selected working directory.
+- Packaging in Deploid 2.0 is `capacitor` only.

package/bin/deploid-studio.cjs

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+const { existsSync } = require('node:fs');
+const { join } = require('node:path');
+const { spawn } = require('node:child_process');
+
+const electronPath = require('electron');
+const appMain = join(__dirname, '..', 'dist', 'main.js');
+
+if (!existsSync(appMain)) {
+  console.error('Deploid Studio is not built yet. Run: pnpm --filter @deploid/studio build');
+  process.exit(1);
+}
+
+const child = spawn(electronPath, [appMain, ...process.argv.slice(2)], {
+  stdio: 'inherit',
+  env: process.env
+});
+
+child.on('exit', (code) => process.exit(code ?? 0));

package/dist/main.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":""}

package/dist/main.js

@@ -0,0 +1,110 @@
+import { app, BrowserWindow, dialog, ipcMain } from 'electron';
+import { spawn } from 'node:child_process';
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+const require = createRequire(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+let mainWindow = null;
+let activeProcess = null;
+const ALLOWED_COMMANDS = new Set([
+    'init',
+    'assets',
+    'package',
+    'build',
+    'deploy',
+    'devices',
+    'logs',
+    'uninstall',
+    'debug',
+    'ios',
+    'ios:handbook',
+    'firebase',
+    'plugin'
+]);
+function createWindow() {
+    mainWindow = new BrowserWindow({
+        width: 1000,
+        height: 720,
+        webPreferences: {
+            preload: join(__dirname, 'preload.js'),
+            contextIsolation: true,
+            nodeIntegration: false
+        }
+    });
+    mainWindow.loadFile(join(__dirname, 'renderer', 'index.html'));
+}
+function sendLog(kind, message) {
+    if (!mainWindow)
+        return;
+    mainWindow.webContents.send('studio:log', { kind, message });
+}
+function resolveCliEntrypoint() {
+    return require.resolve('@deploid/cli/dist/index.js');
+}
+function parseCommand(input) {
+    return input.trim().split(/\s+/).filter(Boolean);
+}
+ipcMain.handle('studio:choose-project', async () => {
+    const result = await dialog.showOpenDialog({
+        properties: ['openDirectory']
+    });
+    if (result.canceled || result.filePaths.length === 0) {
+        return null;
+    }
+    return result.filePaths[0];
+});
+ipcMain.handle('studio:run-command', async (_event, payload) => {
+    if (activeProcess) {
+        throw new Error('A command is already running');
+    }
+    if (!payload.cwd) {
+        throw new Error('Project folder is required');
+    }
+    const args = parseCommand(payload.command);
+    if (args.length === 0) {
+        throw new Error('Command is required');
+    }
+    if (!ALLOWED_COMMANDS.has(args[0])) {
+        throw new Error(`Unsupported command: ${args[0]}`);
+    }
+    const cliEntrypoint = resolveCliEntrypoint();
+    sendLog('system', `$ deploid ${args.join(' ')}\n`);
+    activeProcess = spawn(process.execPath, [cliEntrypoint, ...args], {
+        cwd: payload.cwd,
+        env: process.env
+    });
+    mainWindow?.webContents.send('studio:state', { running: true });
+    activeProcess.stdout.on('data', (chunk) => {
+        sendLog('stdout', String(chunk));
+    });
+    activeProcess.stderr.on('data', (chunk) => {
+        sendLog('stderr', String(chunk));
+    });
+    return await new Promise((resolve) => {
+        activeProcess?.on('close', (code) => {
+            sendLog('system', `\nProcess exited with code ${String(code)}\n`);
+            activeProcess = null;
+            mainWindow?.webContents.send('studio:state', { running: false });
+            resolve({ code });
+        });
+    });
+});
+ipcMain.handle('studio:stop-command', async () => {
+    if (!activeProcess) {
+        return { stopped: false };
+    }
+    activeProcess.kill('SIGINT');
+    return { stopped: true };
+});
+app.whenReady().then(createWindow);
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin')
+        app.quit();
+});
+app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0)
+        createWindow();
+});
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"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"}

package/dist/preload.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=preload.d.ts.map

package/dist/preload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preload.d.ts","sourceRoot":"","sources":["../src/preload.ts"],"names":[],"mappings":""}

package/dist/preload.js

@@ -0,0 +1,9 @@
+import { contextBridge, ipcRenderer } from 'electron';
+contextBridge.exposeInMainWorld('deploidStudio', {
+    chooseProject: () => ipcRenderer.invoke('studio:choose-project'),
+    runCommand: (cwd, command) => ipcRenderer.invoke('studio:run-command', { cwd, command }),
+    stopCommand: () => ipcRenderer.invoke('studio:stop-command'),
+    onLog: (cb) => ipcRenderer.on('studio:log', (_event, payload) => cb(payload)),
+    onState: (cb) => ipcRenderer.on('studio:state', (_event, payload) => cb(payload))
+});
+//# sourceMappingURL=preload.js.map

package/dist/preload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preload.js","sourceRoot":"","sources":["../src/preload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEtD,aAAa,CAAC,iBAAiB,CAAC,eAAe,EAAE;IAC/C,aAAa,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,uBAAuB,CAA2B;IAC1F,UAAU,EAAE,CAAC,GAAW,EAAE,OAAe,EAAE,EAAE,CAC3C,WAAW,CAAC,MAAM,CAAC,oBAAoB,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAqC;IAChG,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,qBAAqB,CAAkC;IAC7F,KAAK,EAAE,CAAC,EAA8E,EAAE,EAAE,CACxF,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAChE,OAAO,EAAE,CAAC,EAAyC,EAAE,EAAE,CACrD,WAAW,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;CACnE,CAAC,CAAC"}

package/dist/renderer/index.html

@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Deploid Studio</title>
+    <style>
+      :root {
+        --bg: #0b1210;
+        --card: #15241f;
+        --line: #254037;
+        --text: #e7fff3;
+        --muted: #9ec8b6;
+        --accent: #56d9a1;
+      }
+      body {
+        margin: 0;
+        font-family: "Segoe UI", Arial, sans-serif;
+        background: radial-gradient(circle at top right, #133226, var(--bg) 50%);
+        color: var(--text);
+      }
+      .wrap {
+        max-width: 980px;
+        margin: 24px auto;
+        padding: 0 16px;
+      }
+      .card {
+        background: linear-gradient(180deg, #1a2f29, var(--card));
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        padding: 16px;
+      }
+      .row {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      input, select, button {
+        border-radius: 8px;
+        border: 1px solid var(--line);
+        background: #0f1d19;
+        color: var(--text);
+        padding: 10px 12px;
+      }
+      input {
+        flex: 1;
+        min-width: 320px;
+      }
+      button {
+        cursor: pointer;
+      }
+      button.primary {
+        background: var(--accent);
+        color: #062517;
+        border: none;
+        font-weight: 700;
+      }
+      #logs {
+        margin-top: 14px;
+        background: #07110e;
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        height: 430px;
+        overflow: auto;
+        padding: 12px;
+        white-space: pre-wrap;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 12px;
+      }
+      .muted {
+        color: var(--muted);
+        font-size: 12px;
+      }
+      @media (max-width: 640px) {
+        input {
+          min-width: 100%;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <div class="card">
+        <h2>Deploid Studio</h2>
+        <p class="muted">Run Deploid commands in a selected project folder.</p>
+        <div class="row">
+          <input id="cwd" type="text" placeholder="Project folder..." />
+          <button id="pick">Choose Folder</button>
+        </div>
+        <div class="row" style="margin-top: 10px;">
+          <select id="cmd">
+            <option value="init">init</option>
+            <option value="assets">assets</option>
+            <option value="package">package</option>
+            <option value="build">build</option>
+            <option value="deploy">deploy</option>
+            <option value="devices">devices</option>
+            <option value="logs">logs</option>
+            <option value="uninstall">uninstall</option>
+            <option value="debug">debug</option>
+            <option value="ios">ios</option>
+            <option value="ios:handbook">ios:handbook</option>
+          </select>
+          <button id="run" class="primary">Run Command</button>
+          <button id="stop">Stop</button>
+        </div>
+        <div id="status" class="muted" style="margin-top: 10px;">Idle</div>
+        <div id="logs"></div>
+      </div>
+    </div>
+    <script src="./renderer.js"></script>
+  </body>
+  </html>

package/dist/renderer/renderer.js

@@ -0,0 +1,44 @@
+const cwdInput = document.getElementById('cwd');
+const pickButton = document.getElementById('pick');
+const runButton = document.getElementById('run');
+const stopButton = document.getElementById('stop');
+const cmdSelect = document.getElementById('cmd');
+const logs = document.getElementById('logs');
+const status = document.getElementById('status');
+
+function appendLog(text) {
+  logs.textContent += text;
+  logs.scrollTop = logs.scrollHeight;
+}
+
+pickButton.addEventListener('click', async () => {
+  const folder = await window.deploidStudio.chooseProject();
+  if (folder) cwdInput.value = folder;
+});
+
+runButton.addEventListener('click', async () => {
+  const cwd = cwdInput.value.trim();
+  if (!cwd) {
+    appendLog('Select a project folder first.\n');
+    return;
+  }
+  const command = cmdSelect.value;
+  try {
+    await window.deploidStudio.runCommand(cwd, command);
+  } catch (error) {
+    appendLog(`Error: ${error.message}\n`);
+  }
+});
+
+stopButton.addEventListener('click', async () => {
+  await window.deploidStudio.stopCommand();
+});
+
+window.deploidStudio.onLog((entry) => {
+  appendLog(entry.message);
+});
+
+window.deploidStudio.onState((state) => {
+  status.textContent = state.running ? 'Running...' : 'Idle';
+  runButton.disabled = state.running;
+});

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@deploid/studio",
+  "version": "2.0.0",
+  "description": "Desktop GUI for running Deploid workflows in a project folder",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "dist/main.js",
+  "bin": {
+    "deploid-studio": "bin/deploid-studio.cjs"
+  },
+  "files": [
+    "dist/",
+    "bin/",
+    "renderer/",
+    "README.md"
+  ],
+  "dependencies": {
+    "electron": "^31.7.7",
+    "@deploid/cli": "2.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.9.1"
+  },
+  "scripts": {
+    "build": "tsc -b && node ./scripts/copy-renderer.mjs",
+    "dev": "pnpm build && node ./bin/deploid-studio.cjs"
+  }
+}

package/renderer/index.html

@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Deploid Studio</title>
+    <style>
+      :root {
+        --bg: #0b1210;
+        --card: #15241f;
+        --line: #254037;
+        --text: #e7fff3;
+        --muted: #9ec8b6;
+        --accent: #56d9a1;
+      }
+      body {
+        margin: 0;
+        font-family: "Segoe UI", Arial, sans-serif;
+        background: radial-gradient(circle at top right, #133226, var(--bg) 50%);
+        color: var(--text);
+      }
+      .wrap {
+        max-width: 980px;
+        margin: 24px auto;
+        padding: 0 16px;
+      }
+      .card {
+        background: linear-gradient(180deg, #1a2f29, var(--card));
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        padding: 16px;
+      }
+      .row {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      input, select, button {
+        border-radius: 8px;
+        border: 1px solid var(--line);
+        background: #0f1d19;
+        color: var(--text);
+        padding: 10px 12px;
+      }
+      input {
+        flex: 1;
+        min-width: 320px;
+      }
+      button {
+        cursor: pointer;
+      }
+      button.primary {
+        background: var(--accent);
+        color: #062517;
+        border: none;
+        font-weight: 700;
+      }
+      #logs {
+        margin-top: 14px;
+        background: #07110e;
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        height: 430px;
+        overflow: auto;
+        padding: 12px;
+        white-space: pre-wrap;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 12px;
+      }
+      .muted {
+        color: var(--muted);
+        font-size: 12px;
+      }
+      @media (max-width: 640px) {
+        input {
+          min-width: 100%;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <div class="card">
+        <h2>Deploid Studio</h2>
+        <p class="muted">Run Deploid commands in a selected project folder.</p>
+        <div class="row">
+          <input id="cwd" type="text" placeholder="Project folder..." />
+          <button id="pick">Choose Folder</button>
+        </div>
+        <div class="row" style="margin-top: 10px;">
+          <select id="cmd">
+            <option value="init">init</option>
+            <option value="assets">assets</option>
+            <option value="package">package</option>
+            <option value="build">build</option>
+            <option value="deploy">deploy</option>
+            <option value="devices">devices</option>
+            <option value="logs">logs</option>
+            <option value="uninstall">uninstall</option>
+            <option value="debug">debug</option>
+            <option value="ios">ios</option>
+            <option value="ios:handbook">ios:handbook</option>
+          </select>
+          <button id="run" class="primary">Run Command</button>
+          <button id="stop">Stop</button>
+        </div>
+        <div id="status" class="muted" style="margin-top: 10px;">Idle</div>
+        <div id="logs"></div>
+      </div>
+    </div>
+    <script src="./renderer.js"></script>
+  </body>
+  </html>

package/renderer/renderer.js

@@ -0,0 +1,44 @@
+const cwdInput = document.getElementById('cwd');
+const pickButton = document.getElementById('pick');
+const runButton = document.getElementById('run');
+const stopButton = document.getElementById('stop');
+const cmdSelect = document.getElementById('cmd');
+const logs = document.getElementById('logs');
+const status = document.getElementById('status');
+
+function appendLog(text) {
+  logs.textContent += text;
+  logs.scrollTop = logs.scrollHeight;
+}
+
+pickButton.addEventListener('click', async () => {
+  const folder = await window.deploidStudio.chooseProject();
+  if (folder) cwdInput.value = folder;
+});
+
+runButton.addEventListener('click', async () => {
+  const cwd = cwdInput.value.trim();
+  if (!cwd) {
+    appendLog('Select a project folder first.\n');
+    return;
+  }
+  const command = cmdSelect.value;
+  try {
+    await window.deploidStudio.runCommand(cwd, command);
+  } catch (error) {
+    appendLog(`Error: ${error.message}\n`);
+  }
+});
+
+stopButton.addEventListener('click', async () => {
+  await window.deploidStudio.stopCommand();
+});
+
+window.deploidStudio.onLog((entry) => {
+  appendLog(entry.message);
+});
+
+window.deploidStudio.onState((state) => {
+  status.textContent = state.running ? 'Running...' : 'Idle';
+  runButton.disabled = state.running;
+});