Merge c2219d1d15 into 63aa940f42

jsonrpc.go

@@ -772,6 +772,8 @@ func rpcSetActiveExtension(extensionId string) error {
 		_ = unmountATXControl()
 	case "dc-power":
 		_ = unmountDCControl()
+	case "serial-buttons":
+		_ = unmountSerialButtons()
 	}
 	config.ActiveExtension = extensionId
 	if err := SaveConfig(); err != nil {
@@ -782,6 +784,8 @@ func rpcSetActiveExtension(extensionId string) error {
 		_ = mountATXControl()
 	case "dc-power":
 		_ = mountDCControl()
+	case "serial-buttons":
+		_ = mountSerialButtons()
 	}
 	return nil
 }
@@ -816,6 +820,15 @@ func rpcGetATXState() (ATXState, error) {
 	return state, nil
 }
 
+func rpcSendCustomCommand(command string, terminator string) error {
+	logger.Debug().Str("Command", command).Msg("JSONRPC: Sending custom serial command")
+	err := sendCustomCommand(command, terminator)
+	if err != nil {
+		return fmt.Errorf("failed to send custom command in jsonrpc: %w", err)
+	}
+	return nil
+}
+
 type SerialSettings struct {
 	BaudRate string `json:"baudRate"`
 	DataBits string `json:"dataBits"`
@@ -907,6 +920,54 @@ func rpcSetSerialSettings(settings SerialSettings) error {
 	return nil
 }
 
+func rpcGetSerialButtonConfig() (CustomButtonSettings, error) {
+	return getSerialSettings()
+}
+
+func rpcSetSerialButtonConfig(config CustomButtonSettings) error {
+	return setSerialSettings(config)
+}
+
+const SerialCommandHistoryPath = "/userdata/serialCommandHistory.json"
+
+func rpcGetSerialCommandHistory() ([]string, error) {
+	items := []string{}
+
+	file, err := os.Open(SerialCommandHistoryPath)
+	if err != nil {
+		logger.Debug().Msg("SerialCommandHistory file doesn't exist, using default")
+		return items, nil
+	}
+	defer file.Close()
+
+	// load and merge the default config with the user config
+	var loadedItems []string
+	if err := json.NewDecoder(file).Decode(&loadedItems); err != nil {
+		logger.Warn().Err(err).Msg("SerialCommandHistory file JSON parsing failed")
+		return items, nil
+	}
+
+	return loadedItems, nil
+}
+
+func rpcSetSerialCommandHistory(commandHistory []string) error {
+	logger.Trace().Str("path", SerialCommandHistoryPath).Msg("Saving serial command history")
+
+	file, err := os.Create(SerialCommandHistoryPath)
+	if err != nil {
+		return fmt.Errorf("failed to create SerialCommandHistory file: %w", err)
+	}
+	defer file.Close()
+
+	encoder := json.NewEncoder(file)
+	encoder.SetIndent("", "  ")
+	if err := encoder.Encode(commandHistory); err != nil {
+		return fmt.Errorf("failed to encode SerialCommandHistory: %w", err)
+	}
+
+	return nil
+}
+
 func rpcGetUsbDevices() (usbgadget.Devices, error) {
 	return *config.UsbDevices, nil
 }
@@ -1255,8 +1316,13 @@ var rpcHandlers = map[string]RPCHandler{
 	"setActiveExtension":      {Func: rpcSetActiveExtension, Params: []string{"extensionId"}},
 	"getATXState":             {Func: rpcGetATXState},
 	"setATXPowerAction":       {Func: rpcSetATXPowerAction, Params: []string{"action"}},
+  "sendCustomCommand":       {Func: rpcSendCustomCommand, Params: []string{"command", "terminator"}},
 	"getSerialSettings":       {Func: rpcGetSerialSettings},
 	"setSerialSettings":       {Func: rpcSetSerialSettings, Params: []string{"settings"}},
+  "getSerialButtonConfig":   {Func: rpcGetSerialButtonConfig},
+	"setSerialButtonConfig":   {Func: rpcSetSerialButtonConfig, Params: []string{"config"}},
+	"getSerialCommandHistory": {Func: rpcGetSerialCommandHistory},
+	"setSerialCommandHistory": {Func: rpcSetSerialCommandHistory, Params: []string{"commandHistory"}},
 	"getUsbDevices":           {Func: rpcGetUsbDevices},
 	"setUsbDevices":           {Func: rpcSetUsbDevices, Params: []string{"devices"}},
 	"setUsbDeviceState":       {Func: rpcSetUsbDeviceState, Params: []string{"device", "enabled"}},

serial.go

@@ -2,7 +2,11 @@ package kvm
 
 import (
 	"bufio"
+	"encoding/base64"
+	"encoding/json"
+	"fmt"
 	"io"
+	"os"
 	"strconv"
 	"strings"
 	"time"
@@ -251,6 +255,89 @@ func setDCRestoreState(state int) error {
 	return nil
 }
 
+func mountSerialButtons() error {
+	_ = port.SetMode(defaultMode)
+	startSerialButtonsRxLoop(currentSession)
+	return nil
+}
+
+func unmountSerialButtons() error {
+	stopSerialButtonsRxLoop()
+	_ = reopenSerialPort()
+	return nil
+}
+
+// ---- Serial Buttons RX fan-out (JSON-RPC events) ----
+var serialButtonsRXStopCh chan struct{}
+
+func startSerialButtonsRxLoop(session *Session) {
+	scopedLogger := serialLogger.With().Str("service", "custom_buttons_rx").Logger()
+	scopedLogger.Debug().Msg("Attempting to start RX reader.")
+	// Stop previous loop if running
+	if serialButtonsRXStopCh != nil {
+		stopSerialButtonsRxLoop()
+	}
+	serialButtonsRXStopCh = make(chan struct{})
+
+	go func() {
+		buf := make([]byte, 4096)
+		scopedLogger.Debug().Msg("Starting loop")
+
+		for {
+			select {
+			case <-serialButtonsRXStopCh:
+				return
+			default:
+				if currentSession == nil {
+					time.Sleep(500 * time.Millisecond)
+					continue
+				}
+				n, err := port.Read(buf)
+				if err != nil {
+					if err != io.EOF {
+						scopedLogger.Debug().Err(err).Msg("serial RX read error")
+					}
+					time.Sleep(50 * time.Millisecond)
+					continue
+				}
+				if n == 0 {
+					continue
+				}
+				// Safe for any bytes: wrap in Base64
+				b64 := base64.StdEncoding.EncodeToString(buf[:n])
+				writeJSONRPCEvent("serial.rx", map[string]any{
+					"base64": b64,
+				}, currentSession)
+			}
+		}
+	}()
+}
+
+func stopSerialButtonsRxLoop() {
+	scopedLogger := serialLogger.With().Str("service", "custom_buttons_rx").Logger()
+	scopedLogger.Debug().Msg("Stopping RX reader.")
+	if serialButtonsRXStopCh != nil {
+		close(serialButtonsRXStopCh)
+		serialButtonsRXStopCh = nil
+	}
+}
+
+func sendCustomCommand(command string, terminator string) error {
+	scopedLogger := serialLogger.With().Str("service", "custom_buttons_tx").Logger()
+	scopedLogger.Info().Str("Command", command).Msg("Sending custom command.")
+	_, err := port.Write([]byte(terminator))
+	if err != nil {
+		scopedLogger.Warn().Err(err).Msg("Failed to send terminator")
+		return err
+	}
+	_, err = port.Write([]byte(command))
+	if err != nil {
+		scopedLogger.Warn().Err(err).Str("Command", command).Msg("Failed to send serial command")
+		return err
+	}
+	return nil
+}
+
 var defaultMode = &serial.Mode{
 	BaudRate: 115200,
 	DataBits: 8,
@@ -258,6 +345,149 @@ var defaultMode = &serial.Mode{
 	StopBits: serial.OneStopBit,
 }
 
+const serialSettingsPath = "/userdata/serialSettings.json"
+
+type Terminator struct {
+	Label string `json:"label"` // Terminator label
+	Value string `json:"value"` // Terminator value
+}
+
+type QuickButton struct {
+	Id         string     `json:"id"`         // Unique identifier
+	Label      string     `json:"label"`      // Button label
+	Command    string     `json:"command"`    // Command to send, raw command to send (without auto-terminator)
+	Terminator Terminator `json:"terminator"` // Terminator to use: None/CR/LF/CRLF/LFCR
+	Sort       int        `json:"sort"`       // Sort order
+}
+
+// Mode describes a serial port configuration.
+type CustomButtonSettings struct {
+	BaudRate           string        `json:"baudRate"`           // The serial port bitrate (aka Baudrate)
+	DataBits           string        `json:"dataBits"`           // Size of the character (must be 5, 6, 7 or 8)
+	Parity             string        `json:"parity"`             // Parity (see Parity type for more info)
+	StopBits           string        `json:"stopBits"`           // Stop bits (see StopBits type for more info)
+	Terminator         Terminator    `json:"terminator"`         // Terminator to send after each command
+	LineMode           bool          `json:"lineMode"`           // Whether to send each line when Enter is pressed, or each character immediately
+	HideSerialSettings bool          `json:"hideSerialSettings"` // Whether to hide the serial settings in the UI
+	EnableEcho         bool          `json:"enableEcho"`         // Whether to echo received characters back to the sender
+	Buttons            []QuickButton `json:"buttons"`            // Custom quick buttons
+}
+
+func getSerialSettings() (CustomButtonSettings, error) {
+	config := CustomButtonSettings{
+		BaudRate:           strconv.Itoa(defaultMode.BaudRate),
+		DataBits:           strconv.Itoa(defaultMode.DataBits),
+		Parity:             "none",
+		StopBits:           "1",
+		Terminator:         Terminator{Label: "CR (\\r)", Value: "\r"},
+		LineMode:           true,
+		HideSerialSettings: false,
+		EnableEcho:         false,
+		Buttons:            []QuickButton{},
+	}
+
+	switch defaultMode.StopBits {
+	case serial.OneStopBit:
+		config.StopBits = "1"
+	case serial.OnePointFiveStopBits:
+		config.StopBits = "1.5"
+	case serial.TwoStopBits:
+		config.StopBits = "2"
+	}
+
+	switch defaultMode.Parity {
+	case serial.NoParity:
+		config.Parity = "none"
+	case serial.OddParity:
+		config.Parity = "odd"
+	case serial.EvenParity:
+		config.Parity = "even"
+	case serial.MarkParity:
+		config.Parity = "mark"
+	case serial.SpaceParity:
+		config.Parity = "space"
+	}
+
+	file, err := os.Open(serialSettingsPath)
+	if err != nil {
+		logger.Debug().Msg("SerialButtons config file doesn't exist, using default")
+		return config, err
+	}
+	defer file.Close()
+
+	// load and merge the default config with the user config
+	var loadedConfig CustomButtonSettings
+	if err := json.NewDecoder(file).Decode(&loadedConfig); err != nil {
+		logger.Warn().Err(err).Msg("SerialButtons config file JSON parsing failed")
+		return config, nil
+	}
+
+	return loadedConfig, nil
+}
+
+func setSerialSettings(newSettings CustomButtonSettings) error {
+	logger.Trace().Str("path", serialSettingsPath).Msg("Saving config")
+
+	file, err := os.Create(serialSettingsPath)
+	if err != nil {
+		return fmt.Errorf("failed to create SerialButtons config file: %w", err)
+	}
+	defer file.Close()
+
+	encoder := json.NewEncoder(file)
+	encoder.SetIndent("", "  ")
+	if err := encoder.Encode(newSettings); err != nil {
+		return fmt.Errorf("failed to encode SerialButtons config: %w", err)
+	}
+
+	baudRate, err := strconv.Atoi(newSettings.BaudRate)
+	if err != nil {
+		return fmt.Errorf("invalid baud rate: %v", err)
+	}
+	dataBits, err := strconv.Atoi(newSettings.DataBits)
+	if err != nil {
+		return fmt.Errorf("invalid data bits: %v", err)
+	}
+
+	var stopBits serial.StopBits
+	switch newSettings.StopBits {
+	case "1":
+		stopBits = serial.OneStopBit
+	case "1.5":
+		stopBits = serial.OnePointFiveStopBits
+	case "2":
+		stopBits = serial.TwoStopBits
+	default:
+		return fmt.Errorf("invalid stop bits: %s", newSettings.StopBits)
+	}
+
+	var parity serial.Parity
+	switch newSettings.Parity {
+	case "none":
+		parity = serial.NoParity
+	case "odd":
+		parity = serial.OddParity
+	case "even":
+		parity = serial.EvenParity
+	case "mark":
+		parity = serial.MarkParity
+	case "space":
+		parity = serial.SpaceParity
+	default:
+		return fmt.Errorf("invalid parity: %s", newSettings.Parity)
+	}
+	serialPortMode = &serial.Mode{
+		BaudRate: baudRate,
+		DataBits: dataBits,
+		StopBits: stopBits,
+		Parity:   parity,
+	}
+
+	_ = port.SetMode(serialPortMode)
+
+	return nil
+}
+
 func initSerialPort() {
 	_ = reopenSerialPort()
 	switch config.ActiveExtension {

ui/src/components/CommandInput.tsx

@@ -0,0 +1,290 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+
+import InputField from "@/components/InputField"; // your existing input component
+import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
+import notifications from "@/notifications";
+
+interface Hit { value: string; index: number }
+
+// ---------- history hook ----------
+function useCommandHistory(max = 300) {
+    const { send } = useJsonRpc();
+    const [items, setItems] = useState<string[]>([]);
+
+    useEffect(() => {
+        send("getSerialCommandHistory", {}, (resp: JsonRpcResponse) => {
+            if ("error" in resp) {
+                notifications.error(
+                    `Failed to get command history: ${resp.error.data || "Unknown error"}`,
+                );
+            } else if ("result" in resp) {
+                setItems(resp.result as string[]);
+            }
+        });
+    }, [send]);
+
+    const [pointer, setPointer] = useState<number>(-1); // -1 = fresh line
+    const [anchorPrefix, setAnchorPrefix] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (items.length > 1) {
+            send("setSerialCommandHistory", { commandHistory: items }, (resp: JsonRpcResponse) => {
+                if ("error" in resp) {
+                notifications.error(`Failed to update command history: ${resp.error.data || "Unknown error"}`);
+                return;
+                }
+            });
+        }
+    }, [items, send]);
+
+    const push = useCallback((cmd: string) => {
+        if (!cmd.trim()) return;
+        setItems((prev) => {
+            const next = prev[prev.length - 1] === cmd ? prev : [...prev, cmd];
+            return next.slice(-max);
+        });
+        setPointer(-1);
+        setAnchorPrefix(null);
+    }, [max]);
+
+    const resetTraversal = useCallback(() => {
+        setPointer(-1);
+        setAnchorPrefix(null);
+    }, []);
+
+    const up = useCallback((draft: string) => {
+        const pref = anchorPrefix ?? draft;
+        if (anchorPrefix == null) setAnchorPrefix(pref);
+        let i = pointer < 0 ? items.length - 1 : pointer - 1;
+        for (; i >= 0; i--) {
+            if (items[i].startsWith(pref)) {
+                setPointer(i);
+                return items[i];
+            }
+        }
+        return draft;
+    }, [items, pointer, anchorPrefix]);
+
+    const down = useCallback((draft: string) => {
+        const pref = anchorPrefix ?? draft;
+        if (anchorPrefix == null) setAnchorPrefix(pref);
+        let i = pointer < 0 ? 0 : pointer + 1;
+        for (; i < items.length; i++) {
+            if (items[i].startsWith(pref)) {
+                setPointer(i);
+                return items[i];
+            }
+        }
+        setPointer(-1);
+        return draft;
+    }, [items, pointer, anchorPrefix]);
+
+    const search = useCallback((query: string): Hit[] => {
+        if (!query) return [];
+        const q = query.toLowerCase();
+        return [...items]
+            .map((value, index) => ({ value, index }))
+            .filter((x) => x.value.toLowerCase().includes(q))
+            .reverse(); // newest first
+    }, [items]);
+
+    return { push, up, down, resetTraversal, search };
+}
+
+function Portal({ children }: { children: React.ReactNode }) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    if (!mounted) return null;
+    return createPortal(children, document.body);
+}
+
+// ---------- reverse search popup ----------
+function ReverseSearch({
+    open, results, sel, setSel, onPick, onClose,
+}: {
+    open: boolean;
+    results: Hit[];
+    sel: number;
+    setSel: (i: number) => void;
+    onPick: (val: string) => void;
+    onClose: () => void;
+}) {
+    const listRef = React.useRef<HTMLDivElement>(null);
+
+    // keep selected item in view when sel changes
+    useEffect(() => {
+        if (!listRef.current) return;
+        const el = listRef.current.querySelector<HTMLDivElement>(`[data-idx="${sel}"]`);
+        el?.scrollIntoView({ block: "nearest" });
+    }, [sel, results]);
+
+    if (!open) return null;
+    return (
+        <Portal>
+            <div
+                className="absolute bottom-12 left-0 right-0 ml-17 mr-8 mb-5 rounded-md border border-slate-600 bg-slate-900/95 p-2 shadow-lg"
+                role="listbox"
+                aria-activedescendant={`rev-opt-${sel}`}
+            >
+                <div ref={listRef} className="max-h-48 overflow-auto">
+                    {results.length === 0 ? (
+                        <div className="px-2 py-1 text-sm text-slate-400">No matches</div>
+                    ) : results.map((r, i) => (
+                        <div
+                            id={`rev-opt-${i}`}
+                            data-idx={i}
+                            key={`${r.index}-${i}`}
+                            role="option"
+                            aria-selected={i === sel}
+                            className={clsx(
+                                "px-2 py-1 font-mono text-sm cursor-pointer",
+                                i === sel ? "bg-slate-700 text-white rounded" : "text-slate-200",
+                            )}
+                            onMouseEnter={() => setSel(i)}
+                            onClick={() => onPick(r.value)}
+                        >
+                            {r.value}
+                        </div>
+                    ))}
+                </div>
+                <div className="mt-1 flex justify-between text-s text-slate-400">
+                    <span>↑/↓ select • Enter accept • Esc close</span>
+                    <button className="underline" onClick={onClose}>Close</button>
+                </div>
+            </div>
+        </Portal>
+    );
+}
+
+// ---------- main component ----------
+interface CommandInputProps {
+    onSend: (line: string) => void;         // called on Enter
+    storageKey?: string;                    // localStorage key for history
+    placeholder?: string;                   // input placeholder
+    className?: string;                     // container className
+    disabled?: boolean;                     // disable input (optional)
+}
+
+export function CommandInput({
+    onSend,
+    placeholder = "Type serial command…  (Enter to send • ↑/↓ history • Ctrl+R search)",
+    className,
+    disabled,
+}: CommandInputProps) {
+    const [cmd, setCmd] = useState("");
+    const [revOpen, setRevOpen] = useState(false);
+    const [revQuery, setRevQuery] = useState("");
+    const [sel, setSel] = useState(0);
+    const { push, up, down, resetTraversal, search } = useCommandHistory();
+
+    const results = useMemo(() => search(revQuery), [revQuery, search]);
+
+    useEffect(() => { setSel(0); }, [results]);
+
+    const cmdInputRef = React.useRef<HTMLInputElement>(null);
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        const isMeta = e.ctrlKey || e.metaKey;
+
+        if (e.key === "Enter" && !e.shiftKey && !isMeta) {
+            e.preventDefault();
+            if (!cmd) return;
+            onSend(cmd);
+            push(cmd);
+            setCmd("");
+            resetTraversal();
+            setRevOpen(false);
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setCmd((prev) => up(prev));
+            return;
+        }
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setCmd((prev) => down(prev));
+            return;
+        }
+        if (isMeta && e.key.toLowerCase() === "r") {
+            e.preventDefault();
+            setRevOpen(true);
+            setRevQuery(cmd);
+            setSel(0);
+            return;
+        }
+        if (e.key === "Escape" && revOpen) {
+            e.preventDefault();
+            setRevOpen(false);
+            return;
+        }
+    };
+
+    return (
+        <div className={clsx("relative", className)}>
+            <div className="flex items-center gap-2" style={{visibility: revOpen ? "hidden" : "unset"} }>
+                <span className="text-xs text-slate-400 select-none">CMD</span>
+                <InputField
+                    ref={cmdInputRef}
+                    size="MD"
+                    disabled={disabled}
+                    value={cmd}
+                    onChange={(e) => { setCmd(e.target.value); resetTraversal(); }}
+                    onKeyDown={handleKeyDown}
+                    placeholder={placeholder}
+                    className="font-mono"
+                />
+            </div>
+
+            {/* Reverse search controls */}
+            {revOpen && (
+                <div className="mt-[-40px]">
+                    <div className="flex items-center gap-2 bg-[#0f172a]">
+                        <span className="text-s text-slate-400 select-none">Search</span>
+                        <InputField
+                            size="MD"
+                            autoFocus
+                            value={revQuery}
+                            onChange={(e) => setRevQuery(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === "ArrowDown") {
+                                    e.preventDefault();
+                                    setSel((i) => (i + 1) % Math.max(1, results.length));
+                                } else if (e.key === "ArrowUp") {
+                                    e.preventDefault();
+                                    setSel((i) => (i - 1 + results.length) % Math.max(1, results.length));
+                                } else if (e.key === "Enter") {
+                                    e.preventDefault();
+                                    const pick = results[sel]?.value ?? results[0]?.value;
+                                    if (pick) {
+                                        setCmd(pick);
+                                        setRevOpen(false);
+                                        requestAnimationFrame(() => cmdInputRef.current?.focus());
+                                    }
+                                } else if (e.key === "Escape") {
+                                    e.preventDefault();
+                                    setRevOpen(false);
+                                    requestAnimationFrame(() => cmdInputRef.current?.focus());
+                                }
+                            }}
+                            placeholder="Type to filter history…"
+                            className="font-mono"
+                        />
+                    </div>
+                    <ReverseSearch
+                        open={revOpen}
+                        results={results}
+                        sel={sel}
+                        setSel={setSel}
+                        onPick={(v) => { setCmd(v); setRevOpen(false); requestAnimationFrame(() => cmdInputRef.current?.focus()); }}
+                        onClose={() => {setRevOpen(false); requestAnimationFrame(() => cmdInputRef.current?.focus());}}
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CommandInput;

ui/src/components/Terminal.tsx

@@ -1,6 +1,6 @@
 import "react-simple-keyboard/build/css/index.css";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useCallback } from "react";
 import { useXTerm } from "react-xtermjs";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
@@ -10,9 +10,11 @@ import { ClipboardAddon } from "@xterm/addon-clipboard";
 
 import { cx } from "@/cva.config";
 import { AvailableTerminalTypes, useUiStore } from "@/hooks/stores";
+import { CommandInput } from "@/components/CommandInput";
 
 import { Button } from "./Button";
 
+
 const isWebGl2Supported = !!document.createElement("canvas").getContext("webgl2");
 
 // Terminal theme configuration
@@ -65,13 +67,20 @@ function Terminal({
   readonly dataChannel: RTCDataChannel;
   readonly type: AvailableTerminalTypes;
 }) {
-  const { terminalType, setTerminalType, setDisableVideoFocusTrap } = useUiStore();
+  const { terminalLineMode, terminalType, setTerminalType, setDisableVideoFocusTrap } = useUiStore();
   const { instance, ref } = useXTerm({ options: TERMINAL_CONFIG });
 
   const isTerminalTypeEnabled = useMemo(() => {
+    console.log("Terminal type:", terminalType, "Checking against:", type);
     return terminalType == type;
   }, [terminalType, type]);
 
+  useEffect(() => {
+    if (!instance) return;
+    instance.options.disableStdin = !terminalLineMode;
+    instance.options.cursorStyle = terminalLineMode ? "bar" : "block";
+  }, [instance, terminalLineMode]);
+
   useEffect(() => {
     setTimeout(() => {
       setDisableVideoFocusTrap(isTerminalTypeEnabled);
@@ -161,6 +170,11 @@ function Terminal({
     };
   }, [instance]);
 
+  const sendLine = useCallback((line: string) => {
+    // Just send; echo/normalization handled elsewhere as you planned
+    dataChannel.send(line + "\r\n"); // adjust CR/LF to taste
+  }, [dataChannel]);
+
   return (
     <div
       onKeyDown={e => e.stopPropagation()}
@@ -199,7 +213,14 @@ function Terminal({
             </div>
 
             <div className="h-[calc(100%-36px)] p-3">
-              <div ref={ref} style={{ height: "100%", width: "100%" }} />
+              <div key="serial" ref={ref} style={{height: (terminalType === "serial" && terminalLineMode) ? "90%" : "100%", width: "100%" }} />
+              {terminalType == "serial" && terminalLineMode && (
+                <CommandInput
+                  placeholder="Type serial command…  (Enter to send • ↑/↓ history • Ctrl+R search)"
+                  onSend={sendLine}
+                  className="mt-2"
+                />
+              )}
             </div>
           </div>
         </div>

ui/src/components/extensions/SerialButtons.tsx

@@ -0,0 +1,500 @@
+import { LuPlus, LuTrash2, LuPencil, LuSettings2, LuEye, LuEyeOff, LuSave, LuArrowBigUp, LuArrowBigDown, LuCircleX, LuTerminal } from "react-icons/lu";
+import { useEffect, useMemo, useState } from "react";
+
+import { Button } from "@components/Button";
+import Card from "@components/Card";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
+import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
+import notifications from "@/notifications";
+import { SelectMenuBasic } from "@components/SelectMenuBasic";
+import { InputFieldWithLabel } from "@components/InputField";
+import { useUiStore } from "@/hooks/stores";
+
+import Checkbox from "../../components/Checkbox";
+import { SettingsItem } from "../../routes/devices.$id.settings";
+
+
+
+/** ============== Types ============== */
+interface QuickButton {
+  id: string;         // uuid-ish
+  label: string;      // shown on the button
+  command: string;    // raw command to send (without auto-terminator)
+  terminator: {label: string, value: string}; // None/CR/LF/CRLF/LFCR
+  sort: number;       // for stable ordering
+}
+
+interface CustomButtonSettings {
+  baudRate: string;
+  dataBits: string;
+  stopBits: string;
+  parity: string;
+  terminator: {label: string, value: string}; // None/CR/LF/CRLF/LFCR
+  lineMode: boolean;
+  hideSerialSettings: boolean;
+  enableEcho: boolean; // future use
+  buttons: QuickButton[];
+}
+
+/** ============== Component ============== */
+
+export function SerialButtons() {
+  const { setTerminalType, setTerminalLineMode } = useUiStore();
+
+  // This will receive all JSON-RPC notifications (method + no id)
+  const { send } = useJsonRpc((payload) => {
+    if (payload.method !== "serial.rx") return;
+    // if (paused) return;
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const p = payload.params as any;
+    let chunk = "";
+
+    if (typeof p?.base64 === "string") {
+      try {
+        chunk = atob(p.base64);
+      } catch {
+        // ignore malformed base64
+      }
+    } else if (typeof p?.data === "string") {
+      // fallback if you ever send plain text
+      chunk = p.data;
+    }
+
+    if (!chunk) return;
+
+    // Normalize CRLF for display
+    chunk = chunk.replace(/\r\n/g, "\n");
+
+    // setSerialResponse(prev => (prev + chunk).slice(-MAX_CHARS));
+  });
+
+  // extension config (buttons + prefs)
+  const [buttonConfig, setButtonConfig] = useState<CustomButtonSettings>({
+    baudRate: "9600",
+    dataBits: "8",
+    stopBits: "1",
+    parity: "none",
+    terminator: {label: "CR (\\r)", value: "\r"},
+    lineMode: true,
+    hideSerialSettings: false,
+    enableEcho: false,
+    buttons: [],
+  });
+
+  // editor modal state
+  const [editorOpen, setEditorOpen] = useState<null | { id?: string }>(null);
+  const [draftLabel, setDraftLabel] = useState("");
+  const [draftCmd, setDraftCmd] = useState("");
+  const [draftTerminator, setDraftTerminator] = useState({label: "CR (\\r)", value: "\r"});
+
+  // load serial settings like SerialConsole
+  useEffect(() => {
+    send("getSerialButtonConfig", {}, (resp: JsonRpcResponse) => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to get button config: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+
+      setButtonConfig(resp.result as CustomButtonSettings);
+      setTerminalLineMode((resp.result as CustomButtonSettings).lineMode);
+    });
+
+  }, [send, setTerminalLineMode]);
+
+  const handleSerialButtonConfigChange = (config: keyof CustomButtonSettings, value: unknown) => {
+    const newButtonConfig = { ...buttonConfig, [config]: value };
+    send("setSerialButtonConfig", { config: newButtonConfig }, (resp: JsonRpcResponse) => {
+      if ("error" in resp) {
+        notifications.error(`Failed to update button config: ${resp.error.data || "Unknown error"}`);
+        return;
+      }
+    });
+    setButtonConfig(newButtonConfig);
+  };
+
+  const onClickButton = (btn: QuickButton) => {
+
+    const command = btn.command + btn.terminator.value;
+    const terminator = btn.terminator.value;
+
+    send("sendCustomCommand", { command, terminator }, (resp: JsonRpcResponse) => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to send custom command: ${resp.error.data || "Unknown error"}`,
+        );
+      }
+    });
+  };
+
+  /** CRUD helpers */
+  const addNew = () => {
+    setEditorOpen({ id: undefined });
+    setDraftLabel("");
+    setDraftCmd("");
+    setDraftTerminator({label: "CR (\\r)", value: "\r"});
+  };
+
+  const editBtn = (btn: QuickButton) => {
+    setEditorOpen({ id: btn.id });
+    setDraftLabel(btn.label);
+    setDraftCmd(btn.command);
+    setDraftTerminator(btn.terminator);
+  };
+
+  const removeBtn = (id: string) => {
+    const nextButtons = buttonConfig.buttons.filter(b => b.id !== id).map((b, i) => ({ ...b, sort: i })) ;
+    handleSerialButtonConfigChange("buttons", stableSort(nextButtons) );
+    setEditorOpen(null);
+  };
+
+  const moveUpBtn = (id: string) => {
+    // Make a copy so we don't mutate state directly
+    const newButtons = [...buttonConfig.buttons];
+
+    // Find the index of the button to move
+    const index = newButtons.findIndex(b => b.id === id);
+
+    if (index > 0) {
+      // Swap with the previous element
+      [newButtons[index - 1], newButtons[index]] = [
+        newButtons[index],
+        newButtons[index - 1],
+      ];
+    }
+
+    // Re-assign sort values
+    const nextButtons = newButtons.map((b, i) => ({ ...b, sort: i }));
+    handleSerialButtonConfigChange("buttons", stableSort(nextButtons) );
+    setEditorOpen(null);
+  };
+
+  const moveDownBtn = (id: string) => {
+    // Make a copy so we don't mutate state directly
+    const newButtons = [...buttonConfig.buttons];
+
+    // Find the index of the button to move
+    const index = newButtons.findIndex(b => b.id === id);
+
+    if (index >= 0 && index < newButtons.length - 1) {
+      // Swap with the next element
+      [newButtons[index], newButtons[index + 1]] = [
+        newButtons[index + 1],
+        newButtons[index],
+      ];
+    }
+
+    // Re-assign sort values
+    const nextButtons = newButtons.map((b, i) => ({ ...b, sort: i }));
+    handleSerialButtonConfigChange("buttons", stableSort(nextButtons) );
+    setEditorOpen(null);
+  };
+
+  const saveDraft = () => {
+    const label = draftLabel.trim() || "Unnamed";
+    const command = draftCmd;
+    if (!command) {
+      notifications.error("Command cannot be empty.");
+      return;
+    }
+    const terminator = draftTerminator;
+
+    // if editing, get current id, otherwise undefined => new button
+    const currentID = editorOpen?.id;
+
+    // either update existing or add new
+    // if new, assign next sort index
+    // if existing, keep sort index
+    const nextButtons = currentID
+      ? buttonConfig.buttons.map(b => (b.id === currentID ? { ...b, label, command } : b))
+      : [...buttonConfig.buttons, { id: genId(), label, command, terminator, sort: buttonConfig.buttons.length }];
+
+    handleSerialButtonConfigChange("buttons", stableSort(nextButtons) );
+    setEditorOpen(null);
+  };
+
+  /** simple reordering: alphabetical by sort, then label */
+  const sortedButtons = useMemo(() => buttonConfig.buttons, [buttonConfig.buttons]);
+
+  return (
+    <div className="space-y-4">
+      <SettingsPageHeader
+        title="Serial Buttons"
+        description="Quick custom commands over the extension serial port"
+      />
+
+      <Card className="animate-fadeIn opacity-0">
+        <div className="space-y-4 p-3">
+          {/* Top actions */}
+          <div className="flex flex-wrap justify-around items-center gap-3">
+            <Button
+              size="XS"
+              theme="primary"
+              LeadingIcon={buttonConfig.hideSerialSettings ? LuEye : LuEyeOff}
+              text={buttonConfig.hideSerialSettings ? "Show Settings" : "Hide Settings"}
+              onClick={() => handleSerialButtonConfigChange("hideSerialSettings", !buttonConfig.hideSerialSettings )}
+            />
+            <Button
+              size="XS"
+              theme="primary"
+              LeadingIcon={LuPlus}
+              text="Add Button"
+              onClick={addNew}
+            />
+            <Button
+              size="XS"
+              theme="primary"
+              LeadingIcon={LuTerminal}
+              text="Open Console"
+              onClick={() => {
+                setTerminalType("serial");
+                console.log("Opening serial console with settings: ", buttonConfig);
+              }}
+            />
+          </div>
+          <hr className="border-slate-700/30 dark:border-slate-600/30" />
+
+          {/* Serial settings (collapsible) */}
+          {!buttonConfig.hideSerialSettings && (
+            <>
+              <div className="grid grid-cols-2 gap-4">
+                <SelectMenuBasic
+                  label="Baud Rate"
+                  options={[
+                    { label: "1200", value: "1200" },
+                    { label: "2400", value: "2400" },
+                    { label: "4800", value: "4800" },
+                    { label: "9600", value: "9600" },
+                    { label: "19200", value: "19200" },
+                    { label: "38400", value: "38400" },
+                    { label: "57600", value: "57600" },
+                    { label: "115200", value: "115200" },
+                  ]}
+                  value={buttonConfig.baudRate}
+                  onChange={(e) => handleSerialButtonConfigChange("baudRate", e.target.value)}
+                />
+
+                <SelectMenuBasic
+                  label="Data Bits"
+                  options={[
+                    { label: "8", value: "8" },
+                    { label: "7", value: "7" },
+                  ]}
+                  value={buttonConfig.dataBits}
+                  onChange={(e) => handleSerialButtonConfigChange("dataBits", e.target.value)}
+                />
+
+                <SelectMenuBasic
+                  label="Stop Bits"
+                  options={[
+                    { label: "1", value: "1" },
+                    { label: "1.5", value: "1.5" },
+                    { label: "2", value: "2" },
+                  ]}
+                  value={buttonConfig.stopBits}
+                  onChange={(e) => handleSerialButtonConfigChange("stopBits", e.target.value)}
+                />
+
+                <SelectMenuBasic
+                  label="Parity"
+                  options={[
+                    { label: "None", value: "none" },
+                    { label: "Even", value: "even" },
+                    { label: "Odd", value: "odd" },
+                  ]}
+                  value={buttonConfig.parity}
+                  onChange={(e) => handleSerialButtonConfigChange("parity", e.target.value)}
+                />
+                <div>
+                  <SelectMenuBasic
+                    className="mb-1"
+                    label="Line ending"
+                    options={[
+                      { label: "None", value: "" },
+                      { label: "CR (\\r)", value: "\r" },
+                      { label: "LF (\\n)", value: "\n" },
+                      { label: "CRLF (\\r\\n)", value: "\r\n" },
+                      { label: "LFCR (\\n\\r)", value: "\n\r" },
+                    ]}
+                    value={buttonConfig.terminator.value}
+                    onChange={(e) => handleSerialButtonConfigChange("terminator", {label: e.target.selectedOptions[0].text, value: e.target.value})}
+                  />
+                  <div className="text-xs text-white opacity-70 mt-0 ml-2">
+                    When sent, the selected line ending ({buttonConfig.terminator.label}) will be appended.
+                  </div>
+                </div>
+                <div>
+                  <SelectMenuBasic
+                    className="mb-1"
+                    label="Terminal Mode"
+                    options={[
+                      { label: "Raw Mode", value: "raw" },
+                      { label: "Line Mode", value: "line" },
+                    ]}
+                    value={buttonConfig.lineMode ? "line" : "raw"}
+                    onChange={(e) => {
+                      handleSerialButtonConfigChange("lineMode", e.target.value === "line")
+                      setTerminalLineMode(e.target.value === "line");
+                    }}
+                  />
+                  <div className="text-xs text-white opacity-70 mt-0 ml-2">
+                    {buttonConfig.lineMode
+                      ? "In Line Mode, input is sent when you press Enter in the input field."
+                      : "In Raw Mode, input is sent immediately as you type in the console."}
+                  </div>
+                </div>
+              </div>
+              <div className="space-y-4 m-2">
+                <SettingsItem
+                  title="Local Echo"
+                  description="Whether to echo received characters back to the sender"
+                >
+                  <Checkbox
+                    checked={buttonConfig.enableEcho}
+                    onChange={e => {
+                      handleSerialButtonConfigChange("enableEcho", e.target.checked);
+                    }}
+                  />
+                </SettingsItem>
+              </div>
+              <hr className="border-slate-700/30 dark:border-slate-600/30" />
+            </>
+          )}
+
+          {/* Buttons grid */}
+          <div className="grid grid-cols-2 gap-2 pt-2">
+            {sortedButtons.map((btn) => (
+              <div key={btn.id} className="flex items-stretch gap-2 min-w-0">
+                <div className=" flex-1  min-w-0 ">
+                  <Button
+                    size="MD"
+                    fullWidth
+                    className="overflow-hidden text-ellipsis whitespace-nowrap"
+                    theme="primary"
+                    text={btn.label}
+                    onClick={() => onClickButton(btn)}
+                  />
+                </div>
+                <Button
+                  size="MD"
+                  theme="light"
+                  className="shrink-0"
+                  LeadingIcon={LuPencil}
+                  onClick={() => editBtn(btn)}
+                  aria-label={`Edit ${btn.label}`}
+                />
+              </div>
+            ))}
+            {sortedButtons.length === 0 && (
+              <div className="col-span-2 text-sm text-black dark:text-slate-300">No buttons yet. Click “Add Button”.</div>
+            )}
+          </div>
+
+          {/* Editor drawer/modal (inline lightweight) */}
+          {editorOpen && (
+            <div className="mt-4 border rounded-md p-3 bg-slate-50 dark:bg-slate-900/30">
+              <div className="flex items-center gap-2 mb-2">
+                <LuSettings2 className="h-3.5 text-white shrink-0 justify-start" />
+                <div className="font-medium text-black dark:text-white">{editorOpen.id ? "Edit Button" : "New Button"}</div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 h-23">
+                <div>
+                  <InputFieldWithLabel
+                    size="SM"
+                    type="text"
+                    label="Label"
+                    placeholder="New Command"
+                    value={draftLabel}
+                    onChange={e => {
+                      setDraftLabel(e.target.value);
+                    }}
+                  />
+                </div>
+                <div>
+                  <InputFieldWithLabel
+                    size="SM"
+                    type="text"
+                    label="Command"
+                    placeholder="Command to send"
+                    value={draftCmd}
+                    onChange={e => {
+                      setDraftCmd(e.target.value);
+                    }}
+                  />
+                  {draftTerminator.value != "" && (
+                    <div className="text-xs text-white opacity-70 mt-1">
+                      When sent, the selected line ending ({draftTerminator.label}) will be appended.
+                  </div>
+                  )}
+                </div>
+              </div>
+              <div className="flex justify-around items-end">
+                <SelectMenuBasic
+                  label="Line ending"
+                  options={[
+                    { label: "None", value: "" },
+                    { label: "CR (\\r)", value: "\r" },
+                    { label: "LF (\\n)", value: "\n" },
+                    { label: "CRLF (\\r\\n)", value: "\r\n" },
+                    { label: "LFCR (\\n\\r)", value: "\n\r" },
+                  ]}
+                  value={draftTerminator.value}
+                  onChange={(e) => setDraftTerminator({label: e.target.selectedOptions[0].text, value: e.target.value})}
+                />
+                <div className="pb-[3px]">
+                  <Button size="SM" theme="primary" LeadingIcon={LuSave} text="Save" onClick={saveDraft} />
+                </div>
+                <div className="pb-[3px]">
+                  <Button size="SM" theme="primary" LeadingIcon={LuCircleX} text="Cancel" onClick={() => setEditorOpen(null)} />
+                </div>
+              </div>
+              <div className="flex justify-around mt-3">
+                {editorOpen.id && (
+                  <>
+                    <Button
+                      size="SM"
+                      theme="danger"
+                      LeadingIcon={LuTrash2}
+                      text="Delete"
+                      onClick={() => removeBtn(editorOpen.id!)}
+                      aria-label={`Delete ${draftLabel}`}
+                    />
+                    <Button
+                      size="SM"
+                      theme="primary"
+                      LeadingIcon={LuArrowBigUp}
+                      text="Move Up"
+                      aria-label={`Move ${draftLabel} up`}
+                      disabled={sortedButtons.findIndex(b => b.id === editorOpen.id) === 0}
+                      onClick={() => moveUpBtn(editorOpen.id!)}
+                    />
+                    <Button
+                      size="SM"
+                      theme="primary"
+                      LeadingIcon={LuArrowBigDown}
+                      text="Move Down"
+                      aria-label={`Move ${draftLabel} down`}
+                      disabled={sortedButtons.findIndex(b => b.id === editorOpen.id)+1 === sortedButtons.length}
+                      onClick={() => moveDownBtn(editorOpen.id!)}
+                    />
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+/** ============== helpers ============== */
+function genId() {
+  return "b_" + Math.random().toString(36).slice(2, 10);
+}
+function stableSort(arr: QuickButton[]) {
+  return [...arr].sort((a, b) => (a.sort - b.sort) || a.label.localeCompare(b.label));
+}
+

ui/src/components/popovers/ExtensionPopover.tsx

@@ -7,6 +7,7 @@ import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { ATXPowerControl } from "@components/extensions/ATXPowerControl";
 import { DCPowerControl } from "@components/extensions/DCPowerControl";
 import { SerialConsole } from "@components/extensions/SerialConsole";
+import { SerialButtons } from "@components/extensions/SerialButtons";
 import { Button } from "@components/Button";
 import notifications from "@/notifications";
 
@@ -36,6 +37,12 @@ const AVAILABLE_EXTENSIONS: Extension[] = [
     description: "Access your serial console extension",
     icon: LuTerminal,
   },
+  {
+    id: "serial-buttons",
+    name: "Serial Buttons",
+    description: "Send custom serial signals by buttons",
+    icon: LuTerminal,
+  },
 ];
 
 export default function ExtensionPopover() {
@@ -76,6 +83,8 @@ export default function ExtensionPopover() {
         return <DCPowerControl />;
       case "serial-console":
         return <SerialConsole />;
+      case "serial-buttons":
+        return <SerialButtons />;
       default:
         return null;
     }

ui/src/hooks/stores.ts

@@ -69,6 +69,9 @@ export interface UIState {
 
   terminalType: AvailableTerminalTypes;
   setTerminalType: (type: UIState["terminalType"]) => void;
+
+  terminalLineMode: boolean;
+  setTerminalLineMode: (enabled: boolean) => void;
 }
 
 export const useUiStore = create<UIState>(set => ({
@@ -96,6 +99,9 @@ export const useUiStore = create<UIState>(set => ({
   isAttachedVirtualKeyboardVisible: true,
   setAttachedVirtualKeyboardVisibility: (enabled: boolean) =>
     set({ isAttachedVirtualKeyboardVisible: enabled }),
+
+  terminalLineMode: true,
+  setTerminalLineMode: (enabled: boolean) => set({ terminalLineMode: enabled }),
 }));
 
 export interface RTCState {