round trip a message to the backend that updates the terminal fe component

frontend/app/element/button.less

@@ -0,0 +1,135 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+.wave-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    outline: inherit;
+    display: flex;
+    padding: 6px 16px;
+    align-items: center;
+    gap: 4px;
+    border-radius: 6px;
+    height: auto;
+    line-height: 1.5;
+    white-space: nowrap;
+    user-select: none;
+
+    color: var(--main-text-color);
+    background: var(--accent-color);
+    i {
+        fill: var(--main-text-color);
+    }
+
+    &.primary {
+        color: var(--main-text-color);
+        background: var(--accent-color);
+        i {
+            fill: var(--main-text-color);
+        }
+    }
+
+    &.primary.danger {
+        background: var(--error-color);
+    }
+
+    &.primary.outlined {
+        background: none;
+        border: 1px solid var(--accent-color);
+
+        i {
+            fill: var(--accent-color);
+        }
+    }
+
+    &.primary.greyoutlined {
+        background: none;
+        border: 1px solid var(--secondary-text-color);
+
+        i {
+            fill: var(--secondary-text-color);
+        }
+    }
+
+    &.primary.outlined,
+    &.primary.greyoutlined {
+        &.hover-danger:hover {
+            color: var(--main-text-color);
+            border: 1px solid var(--error-color);
+            background: var(--error-color);
+        }
+    }
+
+    &.primary.outlined.danger {
+        background: none;
+        border: 1px solid var(--error-color);
+
+        i {
+            fill: var(--error-color);
+        }
+    }
+
+    &.greytext {
+        color: var(--secondary-text-color);
+    }
+
+    &.primary.ghost {
+        background: none;
+        i {
+            fill: var(--accent-color);
+        }
+    }
+
+    &.primary.ghost.danger {
+        background: none;
+        i {
+            fill: var(--app-error-color);
+        }
+    }
+
+    &.secondary {
+        color: var(--main-text-color);
+        background: var(--highlight-bg-color);
+        i {
+            fill: var(--main-text-color);
+        }
+    }
+
+    &.secondary.outlined {
+        background: none;
+        border: 1px solid var(--main-text-color);
+    }
+
+    &.secondary.outlined.danger {
+        background: none;
+        border: 1px solid var(--error-color);
+    }
+
+    &.secondary.ghost {
+        background: none;
+    }
+
+    &.secondary.danger {
+        color: var(--error-color);
+    }
+
+    &.small {
+        padding: 4px 8px;
+        font-size: 12px;
+        border-radius: 3.6px;
+    }
+
+    &.term-inline {
+        padding: 2px 8px;
+        border-radius: 3px;
+    }
+
+    &.disabled {
+        opacity: 0.5;
+    }
+
+    &.link-button {
+        cursor: pointer;
+    }
+}

frontend/app/element/button.tsx

@@ -0,0 +1,55 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import { clsx } from "clsx";
+
+import "./button.less";
+
+interface ButtonProps {
+    children: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    style?: React.CSSProperties;
+    autoFocus?: boolean;
+    className?: string;
+    termInline?: boolean;
+    title?: string;
+}
+
+class Button extends React.Component<ButtonProps> {
+    static defaultProps = {
+        style: {},
+        className: "primary",
+    };
+
+    handleClick(e) {
+        if (this.props.onClick && !this.props.disabled) {
+            this.props.onClick(e);
+        }
+    }
+
+    render() {
+        const { leftIcon, rightIcon, children, disabled, style, autoFocus, termInline, className, title } = this.props;
+
+        return (
+            <button
+                className={clsx("wave-button", { disabled }, { "term-inline": termInline }, className)}
+                onClick={this.handleClick.bind(this)}
+                disabled={disabled}
+                style={style}
+                autoFocus={autoFocus}
+                title={title}
+            >
+                {leftIcon && <span className="icon-left">{leftIcon}</span>}
+                {children}
+                {rightIcon && <span className="icon-right">{rightIcon}</span>}
+            </button>
+        );
+    }
+}
+
+export { Button };
+export type { ButtonProps };

frontend/app/element/markdown.less

@@ -1,5 +1,8 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 .markdown {
-    color: var(--main-color);
+    color: var(--main-text-color);
     font-family: var(--markdown-font);
     font-size: 14px;
     overflow-wrap: break-word;
@@ -9,13 +12,13 @@
     }
 
     .title {
-        color: var(--main-color);
+        color: var(--main-text-color);
         margin-top: 16px;
         margin-bottom: 8px;
     }
 
     strong {
-        color: var(--main-color);
+        color: var(--main-text-color);
     }
 
     a {
@@ -24,7 +27,7 @@
 
     table {
         tr th {
-            color: var(--main-color);
+            color: var(--main-text-color);
         }
     }
 
@@ -61,7 +64,7 @@
 
     code {
         font: var(--fixed-font);
-        color: var(--main-color);
+        color: var(--main-text-color);
         border-radius: 4px;
         background-color: var(--panel-bg-color);
         padding: 0.15em 0.5em;

frontend/app/store/global.ts

@@ -4,6 +4,9 @@
 import * as jotai from "jotai";
 import { atomFamily } from "jotai/utils";
 import { v4 as uuidv4 } from "uuid";
+import * as rxjs from "rxjs";
+import type { WailsEvent } from "@wailsio/runtime/types/events";
+import { Events } from "@wailsio/runtime";
 
 const globalStore = jotai.createStore();
 
@@ -42,4 +45,40 @@ const atoms = {
     blockAtomFamily,
 };
 
-export { globalStore, atoms };
+type SubjectWithRef<T> = rxjs.Subject<T> & { refCount: number; release: () => void };
+
+const blockSubjects = new Map<string, SubjectWithRef<any>>();
+
+function getBlockSubject(blockId: string): SubjectWithRef<any> {
+    let subject = blockSubjects.get(blockId);
+    if (subject == null) {
+        subject = new rxjs.Subject<any>() as any;
+        subject.refCount = 0;
+        subject.release = () => {
+            subject.refCount--;
+            if (subject.refCount === 0) {
+                subject.complete();
+                blockSubjects.delete(blockId);
+            }
+        };
+        blockSubjects.set(blockId, subject);
+    }
+    subject.refCount++;
+    return subject;
+}
+
+Events.On("block:ptydata", (event: any) => {
+    const data = event?.data;
+    if (data?.blockid == null) {
+        console.log("block:ptydata with null blockid");
+        return;
+    }
+    // we don't use getBlockSubject here because we don't want to create a new subject
+    const subject = blockSubjects.get(data.blockid);
+    if (subject == null) {
+        return;
+    }
+    subject.next(data);
+});
+
+export { globalStore, atoms, getBlockSubject };

frontend/app/view/term.tsx

@@ -6,6 +6,10 @@ import * as jotai from "jotai";
 import { Terminal } from "@xterm/xterm";
 import type { ITheme } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
+import { Button } from "@/element/button";
+import * as BlockService from "@/bindings/pkg/service/blockservice/BlockService";
+import { getBlockSubject } from "@/store/global";
+import { base64ToArray } from "@/util/util";
 
 import "./view.less";
 import "/public/xterm.css";
@@ -40,6 +44,7 @@ function getThemeFromCSSVars(el: Element): ITheme {
 
 const TerminalView = ({ blockId }: { blockId: string }) => {
     const connectElemRef = React.useRef<HTMLDivElement>(null);
+    const [term, setTerm] = React.useState<Terminal>(null);
 
     React.useEffect(() => {
         if (!connectElemRef.current) {
@@ -57,13 +62,47 @@ const TerminalView = ({ blockId }: { blockId: string }) => {
         term.loadAddon(fitAddon);
         term.open(connectElemRef.current);
         fitAddon.fit();
-        term.write("Hello, world!");
+        term.write("Hello, world!\r\n");
+        setTerm(term);
         return () => {
             term.dispose();
         };
     }, [connectElemRef.current]);
+    React.useEffect(() => {
+        if (!term) {
+            return;
+        }
+        const blockSubject = getBlockSubject(blockId);
+        blockSubject.subscribe((data) => {
+            // base64 decode
+            const decodedData = base64ToArray(data.ptydata);
+            term.write(decodedData);
+        });
+        return () => {
+            blockSubject.release();
+        };
+    }, [term]);
 
-    return <div key="conntectElem" className="view-term term-connectelem" ref={connectElemRef}></div>;
+    async function handleRunClick() {
+        try {
+            await BlockService.StartBlock(blockId);
+            await BlockService.SendCommand(blockId, { command: "message", message: "Run clicked" });
+        } catch (e) {
+            console.log("run click error: ", e);
+        }
+    }
+
+    return (
+        <div className="view-term">
+            <div className="term-header">
+                <div>Terminal</div>
+                <Button className="term-inline" onClick={() => handleRunClick()}>
+                    Run
+                </Button>
+            </div>
+            <div key="conntectElem" className="term-connectelem" ref={connectElemRef}></div>
+        </div>
+    );
 };
 
 export { TerminalView };

frontend/app/view/view.less

@@ -7,6 +7,23 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+
+    .term-header {
+        display: flex;
+        flex-direction: row;
+        padding: 4px 10px;
+        height: 35px;
+        gap: 10px;
+        align-items: center;
+        flex-shrink: 0;
+        border-bottom: 1px solid var(--border-color);
+    }
+
+    .term-connectelem {
+        flex-grow: 1;
+        min-height: 0;
+        overflow: hidden;
+    }
 }
 
 .view-preview {

go.mod

@@ -5,6 +5,7 @@ go 1.22
 toolchain go1.22.1
 
 require (
+	github.com/creack/pty v1.1.18
 	github.com/golang-migrate/migrate/v4 v4.17.1
 	github.com/google/uuid v1.4.0
 	github.com/jmoiron/sqlx v1.4.0

go.sum

@@ -17,6 +17,8 @@ github.com/bwesterb/go-ristretto v1.2.3/go.mod h1:fUIoIZaG73pV5biE2Blr2xEzDoMj7N
 github.com/cloudflare/circl v1.3.3/go.mod h1:5XYMA4rFBvNIrhs50XuiBJ15vF2pZn4nnUKZrLbUZFA=
 github.com/cloudflare/circl v1.3.7 h1:qlCDlTPz2n9fu58M0Nh1J/JzcFpfgkFHHX3O35r5vcU=
 github.com/cloudflare/circl v1.3.7/go.mod h1:sRTcRWXGLrKw6yIGJ+l7amYJFfAXbZG0kBSc8r4zxgA=
+github.com/creack/pty v1.1.18 h1:n56/Zwd5o6whRC5PMGretI4IdRLlmBXYNjScPaBgsbY=
+github.com/creack/pty v1.1.18/go.mod h1:MOBLtS5ELjhRRrroQr9kyvTxUAFNvYEK993ew/Vr4O4=
 github.com/cyphar/filepath-securejoin v0.2.4 h1:Ugdm7cg7i6ZK6x3xDF1oEu1nfkyfH53EtKeQYTC3kyg=
 github.com/cyphar/filepath-securejoin v0.2.4/go.mod h1:aPGpWjXOXUn2NCNjFvBE6aRxGGx79pTxQpKOJNYHHl4=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=

pkg/blockcontroller/blockcontroller.go

@@ -4,6 +4,7 @@
 package blockcontroller
 
 import (
+	"encoding/base64"
 	"encoding/json"
 	"fmt"
 	"sync"
@@ -16,14 +17,15 @@ var globalLock = &sync.Mutex{}
 var blockControllerMap = make(map[string]*BlockController)
 
 type BlockCommand interface {
-	GetType() string
+	GetCommand() string
 }
 
 type MessageCommand struct {
+	Command string `json:"command"`
 	Message string `json:"message"`
 }
 
-func (mc *MessageCommand) GetType() string {
+func (mc *MessageCommand) GetCommand() string {
 	return "message"
 }
 
@@ -33,9 +35,9 @@ type BlockController struct {
 }
 
 func ParseCmdMap(cmdMap map[string]any) (BlockCommand, error) {
-	cmdType, ok := cmdMap["type"].(string)
+	cmdType, ok := cmdMap["command"].(string)
 	if !ok {
-		return nil, fmt.Errorf("no type field in command map")
+		return nil, fmt.Errorf("no command field in command map")
 	}
 	mapJson, err := json.Marshal(cmdMap)
 	if err != nil {
@@ -65,10 +67,20 @@ func (bc *BlockController) Run() {
 		delete(blockControllerMap, bc.BlockId)
 	}()
 
+	messageCount := 0
 	for genCmd := range bc.InputCh {
 		switch cmd := genCmd.(type) {
 		case *MessageCommand:
 			fmt.Printf("MESSAGE: %s | %q\n", bc.BlockId, cmd.Message)
+			messageCount++
+			eventbus.SendEvent(application.WailsEvent{
+				Name: "block:ptydata",
+				Data: map[string]any{
+					"blockid":   bc.BlockId,
+					"blockfile": "main",
+					"ptydata":   base64.StdEncoding.EncodeToString([]byte(fmt.Sprintf("message %d\r\n", messageCount))),
+				},
+			})
 
 		default:
 			fmt.Printf("unknown command type %T\n", cmd)
@@ -76,9 +88,12 @@ func (bc *BlockController) Run() {
 	}
 }
 
-func NewBlockController(blockId string) *BlockController {
+func StartBlockController(blockId string) *BlockController {
 	globalLock.Lock()
 	defer globalLock.Unlock()
+	if existingBC, ok := blockControllerMap[blockId]; ok {
+		return existingBC
+	}
 	bc := &BlockController{
 		BlockId: blockId,
 		InputCh: make(chan BlockCommand),

pkg/service/blockservice/blockservice.go

@@ -11,6 +11,11 @@ import (
 
 type BlockService struct{}
 
+func (bs *BlockService) StartBlock(blockId string) error {
+	blockcontroller.StartBlockController(blockId)
+	return nil
+}
+
 func (bs *BlockService) SendCommand(blockId string, cmdMap map[string]any) error {
 	bc := blockcontroller.GetBlockController(blockId)
 	if bc == nil {

pkg/shellexec/shellexec.go

@@ -0,0 +1,52 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+package shellexec
+
+import (
+	"bytes"
+	"fmt"
+	"io"
+	"os"
+	"os/exec"
+	"syscall"
+
+	"github.com/creack/pty"
+	"github.com/wavetermdev/thenextwave/pkg/util/shellutil"
+)
+
+func RunSimpleCmdInPty(ecmd *exec.Cmd) ([]byte, error) {
+	ecmd.Env = os.Environ()
+	shellutil.UpdateCmdEnv(ecmd, shellutil.WaveshellEnvVars(shellutil.DefaultTermType))
+	cmdPty, cmdTty, err := pty.Open()
+	if err != nil {
+		return nil, fmt.Errorf("opening new pty: %w", err)
+	}
+	pty.Setsize(cmdPty, &pty.Winsize{Rows: shellutil.DefaultTermRows, Cols: shellutil.DefaultTermCols})
+	ecmd.Stdin = cmdTty
+	ecmd.Stdout = cmdTty
+	ecmd.Stderr = cmdTty
+	ecmd.SysProcAttr = &syscall.SysProcAttr{}
+	ecmd.SysProcAttr.Setsid = true
+	ecmd.SysProcAttr.Setctty = true
+	err = ecmd.Start()
+	cmdTty.Close()
+	if err != nil {
+		cmdPty.Close()
+		return nil, err
+	}
+	defer cmdPty.Close()
+	ioDone := make(chan bool)
+	var outputBuf bytes.Buffer
+	go func() {
+		// ignore error (/dev/ptmx has read error when process is done)
+		defer close(ioDone)
+		io.Copy(&outputBuf, cmdPty)
+	}()
+	exitErr := ecmd.Wait()
+	if exitErr != nil {
+		return nil, exitErr
+	}
+	<-ioDone
+	return outputBuf.Bytes(), nil
+}

pkg/util/shellutil/shellutil.go

@@ -0,0 +1,62 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+package shellutil
+
+import (
+	"os"
+	"os/exec"
+	"strings"
+
+	"github.com/wavetermdev/thenextwave/pkg/wavebase"
+)
+
+const DefaultTermType = "xterm-256color"
+const DefaultTermRows = 24
+const DefaultTermCols = 80
+
+func WaveshellEnvVars(termType string) map[string]string {
+	rtn := make(map[string]string)
+	if termType != "" {
+		rtn["TERM"] = termType
+	}
+	rtn["WAVETERM"], _ = os.Executable()
+	rtn["WAVETERM_VERSION"] = wavebase.WaveVersion
+	return rtn
+}
+
+func UpdateCmdEnv(cmd *exec.Cmd, envVars map[string]string) {
+	if len(envVars) == 0 {
+		return
+	}
+	found := make(map[string]bool)
+	var newEnv []string
+	for _, envStr := range cmd.Env {
+		envKey := GetEnvStrKey(envStr)
+		newEnvVal, ok := envVars[envKey]
+		if ok {
+			if newEnvVal == "" {
+				continue
+			}
+			newEnv = append(newEnv, envKey+"="+newEnvVal)
+			found[envKey] = true
+		} else {
+			newEnv = append(newEnv, envStr)
+		}
+	}
+	for envKey, envVal := range envVars {
+		if found[envKey] {
+			continue
+		}
+		newEnv = append(newEnv, envKey+"="+envVal)
+	}
+	cmd.Env = newEnv
+}
+
+func GetEnvStrKey(envStr string) string {
+	eqIdx := strings.Index(envStr, "=")
+	if eqIdx == -1 {
+		return envStr
+	}
+	return envStr[0:eqIdx]
+}

pkg/wavebase/wavebase.go

@@ -13,6 +13,7 @@ import (
 	"sync"
 )
 
+const WaveVersion = "v0.1.0"
 const DefaultWaveHome = "~/.w2"
 const WaveHomeVarName = "WAVETERM_HOME"
 const WaveDevVarName = "WAVETERM_DEV"

public/style.less

@@ -2,19 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 @import "./reset.less";
-
-:root {
-    --main-bg-color: #000000;
-    --border-color: #333333;
-    --main-color: #f7f7f7;
-    --base-font: normal 15px / normal "Lato", sans-serif;
-    --fixed-font: normal 12px / normal "Hack", monospace;
-    --app-accent-color: rgb(88, 193, 66);
-    --panel-bg-color: rgba(31, 33, 31, 1);
-    --highlight-bg-color: rgba(255, 255, 255, 0.2);
-    --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji";
-}
+@import "./theme.less";
 
 body {
     display: flex;
@@ -22,7 +10,7 @@ body {
     width: 100vw;
     height: 100vh;
     background-color: var(--main-bg-color);
-    color: var(--main-color);
+    color: var(--main-text-color);
     font: var(--base-font);
     overflow: hidden;
 }

public/theme.less

@@ -0,0 +1,19 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+:root {
+    --main-text-color: #f7f7f7;
+    --secondary-text-color: rgb(195, 200, 194);
+    --main-bg-color: #000000;
+    --border-color: #333333;
+    --base-font: normal 15px / normal "Lato", sans-serif;
+    --fixed-font: normal 12px / normal "Hack", monospace;
+    --accent-color: rgb(88, 193, 66);
+    --panel-bg-color: rgba(31, 33, 31, 1);
+    --highlight-bg-color: rgba(255, 255, 255, 0.2);
+    --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji";
+    --error-color: rgb(229, 77, 46);
+    --warning-color: rgb(224, 185, 86);
+    --success-color: rgb(78, 154, 6);
+}