Working with child_process and terminal color

apps/studio/electron/main/run/terminal.ts

@@ -1,11 +1,12 @@
 import { MainChannels } from '@onlook/models/constants';
-import * as pty from 'node-pty';
+import { type ChildProcess, spawn } from 'child_process';
 import os from 'os';
+import treeKill from 'tree-kill';
 import { mainWindow } from '..';
 
 class TerminalManager {
     private static instance: TerminalManager;
-    private processes: Map<string, pty.IPty>;
+    private processes: Map<string, ChildProcess>;
     private outputHistory: Map<string, string>;
 
     private constructor() {
@@ -23,41 +24,48 @@ class TerminalManager {
     create(id: string, options?: { cwd?: string }): boolean {
         try {
             const shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash';
+            const shellArgs = os.platform() === 'win32' ? ['-NoLogo'] : [];
 
-            const ptyProcess = pty.spawn(shell, [], {
-                name: 'xterm-color',
+            const childProcess = spawn(shell, shellArgs, {
                 cwd: options?.cwd ?? process.env.HOME,
                 env: process.env,
+                shell: true,
             });
 
-            ptyProcess.onData((data: string) => {
-                this.addTerminalMessage(id, data);
+            childProcess.stdout?.on('data', (data: Buffer) => {
+                this.addTerminalMessage(id, data, false);
             });
 
-            this.processes.set(id, ptyProcess);
+            childProcess.stderr?.on('data', (data: Buffer) => {
+                this.addTerminalMessage(id, data, true);
+            });
+
+            this.processes.set(id, childProcess);
             return true;
         } catch (error) {
             console.error('Failed to create terminal.', error);
             return false;
         }
     }
 
-    addTerminalMessage(id: string, data: string) {
+    addTerminalMessage(id: string, data: Buffer, isError: boolean) {
         const currentHistory = this.getHistory(id) || '';
-        this.outputHistory.set(id, currentHistory + data);
-        this.emitMessage(id, data);
+        const dataString = data.toString();
+        this.outputHistory.set(id, currentHistory + dataString);
+        this.emitMessage(id, dataString, isError);
     }
 
-    emitMessage(id: string, data: string) {
+    emitMessage(id: string, data: string, isError: boolean) {
         mainWindow?.webContents.send(MainChannels.TERMINAL_ON_DATA, {
             id,
             data,
+            isError,
         });
     }
 
     write(id: string, data: string): boolean {
         try {
-            this.processes.get(id)?.write(data);
+            this.processes.get(id)?.stdin?.write(data);
             return true;
         } catch (error) {
             console.error('Failed to write to terminal.', error);
@@ -67,7 +75,7 @@ class TerminalManager {
 
     resize(id: string, cols: number, rows: number): boolean {
         try {
-            this.processes.get(id)?.resize(cols, rows);
+            // this.processes.get(id)?.stdin?.setWindowSize(cols, rows);
             return true;
         } catch (error) {
             console.error('Failed to resize terminal.', error);
@@ -77,9 +85,9 @@ class TerminalManager {
 
     kill(id: string): boolean {
         try {
-            const process = this.processes.get(id);
-            if (process) {
-                process.kill();
+            const childProcess = this.processes.get(id);
+            if (childProcess) {
+                treeKill(childProcess.pid!);
                 this.processes.delete(id);
                 this.outputHistory.delete(id);
             }
@@ -91,7 +99,11 @@ class TerminalManager {
     }
 
     killAll(): boolean {
-        this.processes.forEach((process) => process.kill());
+        this.processes.forEach((childProcess) => {
+            if (childProcess.pid) {
+                treeKill(childProcess.pid);
+            }
+        });
         this.processes.clear();
         return true;
     }

apps/studio/package.json

@@ -67,7 +67,6 @@
         "mixpanel": "^0.18.0",
         "monaco-editor": "^0.52.0",
         "nanoid": "^5.0.7",
-        "node-pty": "^1.1.0-beta22",
         "partial-json": "^0.1.7",
         "prosemirror-commands": "^1.6.0",
         "prosemirror-history": "^1.4.1",
@@ -81,6 +80,7 @@
         "react-markdown": "^9.0.1",
         "remark-gfm": "^4.0.0",
         "shiki": "^1.22.0",
+        "tree-kill": "^1.2.2",
         "ts-morph": "^23.0.0",
         "type-fest": "^4.26.1",
         "use-resize-observer": "^9.1.0",

apps/studio/src/lib/projects/run.ts

@@ -7,6 +7,7 @@ import { invokeMainChannel } from '../utils';
 export type TerminalMessage = {
     id: string;
     data: string;
+    isError: boolean;
 };
 
 export class RunManager {

apps/studio/src/routes/editor/Toolbar/Terminal/index.tsx

@@ -35,6 +35,7 @@ const TERMINAL_THEME: Record<'LIGHT' | 'DARK', ITheme> = {
         brightMagenta: '#ad7fa8',
         brightCyan: '#34e2e2',
         brightWhite: '#eeeeec',
+        selectionBackground: '#bfbfbf',
     },
     DARK: {}, // Use default dark theme
 };
@@ -77,6 +78,10 @@ const Terminal = observer(({ hidden = false }: TerminalProps) => {
             fontSize: 12,
             fontFamily: 'monospace',
             theme: theme === 'light' ? TERMINAL_THEME.LIGHT : TERMINAL_THEME.DARK,
+            convertEol: true,
+            allowTransparency: true,
+            disableStdin: false,
+            allowProposedApi: true,
         });
 
         term.open(container);
@@ -99,13 +104,15 @@ const Terminal = observer(({ hidden = false }: TerminalProps) => {
         });
 
         const terminalDataListener = (message: TerminalMessage) => {
-            if (message.id === projectManager.project?.id) {
+            if (message.isError) {
+                term.write('\x1b[91m' + message.data + '\x1b[0m');
+            } else {
                 term.write(message.data);
             }
         };
 
         const stateListener = ({ state, message }: { state: RunState; message: string }) => {
-            term.write(message);
+            term.write('\x1b[96m' + message + '\x1b[0m\n');
         };
 
         window.api.on(MainChannels.TERMINAL_ON_DATA, terminalDataListener);