Add UCM terminal pane

package.json

@@ -44,6 +44,9 @@
   },
   "keywords": [],
   "dependencies": {
-    "electron-squirrel-startup": "^1.0.1"
+    "@xterm/xterm": "^5.5.0",
+    "electron-squirrel-startup": "^1.0.1",
+    "node-pty": "^1.1.0-beta30",
+    "xterm-addon-fit": "^0.8.0"
   }
 }

src/Ucm/WorkspaceScreen.elm

@@ -1,11 +1,12 @@
-module Ucm.WorkspaceScreen exposing (..)
+port module Ucm.WorkspaceScreen exposing (..)
 
 import Browser
 import Code.BranchRef as BranchRef
 import Code.CodebaseTree as CodebaseTree
 import Code.Config
 import Html exposing (Html, div, text)
-import Html.Attributes exposing (class)
+import Html.Attributes exposing (class, id)
+import Lib.Util as Util
 import RemoteData exposing (RemoteData(..))
 import UI.AnchoredOverlay as AnchoredOverlay
 import UI.Button as Button
@@ -72,6 +73,7 @@ init appContext workspaceContext =
     , Cmd.batch
         [ Cmd.map CodebaseTreeMsg codebaseTreeCmd
         , Cmd.map WorkspacePanesMsg panesCmd
+        , Util.delayMsg 5000 OpenTerminal
         ]
     )
 
@@ -88,6 +90,7 @@ type Msg
     | ToggleSidebar
     | ToggleRightPane
     | RefreshCodebase
+    | OpenTerminal
     | Keydown KeyboardEvent.KeyboardEvent
     | CodebaseTreeMsg CodebaseTree.Msg
     | WorkspacePanesMsg WorkspacePanes.Msg
@@ -104,6 +107,9 @@ type OutMsg
 update : AppContext -> Msg -> Model -> ( Model, Cmd Msg, OutMsg )
 update appContext msg model =
     case msg of
+        OpenTerminal ->
+            ( model, openTerminal "terminal-pane", None )
+
         CodebaseTreeMsg codebaseTreeMsg ->
             let
                 ( codebaseTree, codebaseTreeCmd, outMsg ) =
@@ -388,6 +394,13 @@ update appContext msg model =
 
 
 
+-- PORTS
+
+
+port openTerminal : String -> Cmd msg
+
+
+
 -- SUBSCRIPTIONS
 
 
@@ -538,7 +551,10 @@ view appContext model =
                         window_
 
         content =
-            [ Html.map WorkspacePanesMsg (WorkspacePanes.view model.panes) ]
+            [ Html.map WorkspacePanesMsg
+                (WorkspacePanes.view model.panes)
+            , div [ id "terminal-pane" ] []
+            ]
     in
     window__
         |> Window.withTitlebarLeft (titlebarLeft model)

src/css/ucm/workspace-screen.css

@@ -63,3 +63,12 @@
     color: var(--u-color_icon);
   }
 }
+
+#terminal-pane {
+  border-top: 1px solid var(--u-color_border);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 300px;
+}

src/main.js

@@ -1,6 +1,7 @@
-import { app, BrowserWindow } from 'electron';
-import path from 'node:path';
+import { app, BrowserWindow, ipcMain } from 'electron';
 import started from 'electron-squirrel-startup';
+import * as os from 'os';
+import * as pty from 'node-pty';
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (started) {
@@ -22,13 +23,15 @@ const createWindow = () => {
 
   // and load the index.html of the app.
   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
+
+  return mainWindow;
 };
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
-  createWindow();
+  const mainWindow = createWindow();
 
   // On OS X it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
@@ -37,6 +40,13 @@ app.whenReady().then(() => {
       createWindow();
     }
   });
+
+  try {
+    initPty(mainWindow);
+  }
+  catch (ex) {
+    console.error(ex);
+  }
 });
 
 // Quit when all windows are closed, except on macOS. There, it's common
@@ -50,3 +60,20 @@ app.on('window-all-closed', () => {
 
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and import them here.
+//
+
+function initPty(mainWindow) {
+  const shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash';
+  const ptyProcess = pty.spawn(shell, [], {});
+
+  ptyProcess.write('ucm\r');
+  ptyProcess.write('clear\r');
+
+  ptyProcess.on("data", (data) => {
+    mainWindow.webContents.send("pty-output", data);
+  });
+
+  ipcMain.on("pty-input", (_evt, data) => {
+    ptyProcess.write(data);
+  });
+}

src/preload.js

@@ -1,2 +1,13 @@
 // See the Electron documentation for details on how to use preload scripts:
 // https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
+//
+import { contextBridge, ipcRenderer } from 'electron';
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  ptyInput: (command) => ipcRenderer.send('pty-input', command),
+  onPtyOutput: (callback) => {
+    ipcRenderer.on('pty-output', (_event, value) => {
+      callback(value);
+    });
+  },
+})

src/renderer.js

@@ -15,6 +15,9 @@ import "./main.css";
 import * as AppError from "./Ucm/AppError";
 import * as AppSettings from "./Ucm/AppSettings";
 import * as Theme from "./Ucm/Theme";
+import "@xterm/xterm/css/xterm.css";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from 'xterm-addon-fit';
 
 // @ts-ignore
 import { Elm } from './Main.elm';
@@ -32,6 +35,21 @@ try {
   const appSettings = AppSettings.init();
   const operatingSystem = detectOs(window.navigator);
 
+  // -- Terminal -----------------------------------------------------------
+  const terminal = new Terminal({
+    // fontFamily: "Fira Code var",
+    theme: {
+      background: "#18181c" //--color-gray-darken-30 
+    }
+  });
+  terminal.onData(data => window.electronAPI.ptyInput(data));
+
+  window.electronAPI.onPtyOutput((output) => {
+    terminal.write(output);
+  });
+  const fitAddon = new FitAddon();
+  terminal.loadAddon(fitAddon);
+
   // -- Elm -------------------------------------------------------------------
   const flags = {
     operatingSystem: operatingSystem,
@@ -60,6 +78,14 @@ try {
       AppSettings.clear();
       window.location.reload();
     });
+
+    app.ports.openTerminal?.subscribe((targetId) => {
+      const target = document.getElementById(targetId);
+      if (target) {
+        terminal.open(target);
+        fitAddon.fit();
+      }
+    });
   }
 
   // -- CSS env classes -------------------------------------------------------

webpack.main.config.js

@@ -8,4 +8,5 @@ module.exports = {
   module: {
     rules: require('./webpack.rules'),
   },
+  externals: ['node-pty'],
 };