Merge 1e2cee7060 into c8dd84c6b7

Ensure the jiggler config loads the defaults so they can be saved.
Ensure the file.Sync occurs before acknowledging save.
Also fixup the old KeyboardLayout to use en-US not en_US

cloud.go

@@ -477,7 +477,7 @@ func handleSessionRequest(
 	cloudLogger.Trace().Interface("session", session).Msg("new session accepted")
 
 	// Cancel any ongoing keyboard report multi when session changes
-	cancelKeyboardReportMulti()
+	cancelKeyboardMacro()
 
 	currentSession = session
 	_ = wsjson.Write(context.Background(), c, gin.H{"type": "answer", "data": sd})

config.go

@@ -118,6 +118,7 @@ var defaultConfig = &Config{
 	DisplayMaxBrightness: 64,
 	DisplayDimAfterSec:   120,  // 2 minutes
 	DisplayOffAfterSec:   1800, // 30 minutes
+	JigglerEnabled:       false,
 	// This is the "Standard" jiggler option in the UI
 	JigglerConfig: &JigglerConfig{
 		InactivityLimitSeconds: 60,
@@ -205,6 +206,15 @@ func LoadConfig() {
 		loadedConfig.NetworkConfig = defaultConfig.NetworkConfig
 	}
 
+	if loadedConfig.JigglerConfig == nil {
+		loadedConfig.JigglerConfig = defaultConfig.JigglerConfig
+	}
+
+	// fixup old keyboard layout value
+	if loadedConfig.KeyboardLayout == "en_US" {
+		loadedConfig.KeyboardLayout = "en-US"
+	}
+
 	config = &loadedConfig
 
 	logging.GetRootLogger().UpdateLogLevel(config.DefaultLogLevel)
@@ -221,6 +231,11 @@ func SaveConfig() error {
 
 	logger.Trace().Str("path", configPath).Msg("Saving config")
 
+	// fixup old keyboard layout value
+	if config.KeyboardLayout == "en_US" {
+		config.KeyboardLayout = "en-US"
+	}
+
 	file, err := os.Create(configPath)
 	if err != nil {
 		return fmt.Errorf("failed to create config file: %w", err)
@@ -233,6 +248,11 @@ func SaveConfig() error {
 		return fmt.Errorf("failed to encode config: %w", err)
 	}
 
+	if err := file.Sync(); err != nil {
+		return fmt.Errorf("failed to wite config: %w", err)
+	}
+
+	logger.Info().Str("path", configPath).Msg("config saved")
 	return nil
 }
 

hidrpc.go

@@ -1,7 +1,6 @@
 package kvm
 
 import (
-	"context"
 	"errors"
 	"fmt"
 	"io"
@@ -38,7 +37,10 @@ func handleHidRPCMessage(message hidrpc.Message, session *Session) {
 			logger.Warn().Err(err).Msg("failed to get keyboard macro report")
 			return
 		}
-		_, rpcErr = rpcKeyboardReportMulti(context.Background(), keyboardMacroReport.Macro)
+		_, rpcErr = rpcExecuteKeyboardMacro(keyboardMacroReport.Macro)
+	case hidrpc.TypeCancelKeyboardMacroReport:
+		rpcCancelKeyboardMacro()
+		return
 	case hidrpc.TypePointerReport:
 		pointerReport, err := message.PointerReport()
 		if err != nil {
@@ -138,6 +140,8 @@ func reportHidRPC(params any, session *Session) {
 		message, err = hidrpc.NewKeyboardLedMessage(params).Marshal()
 	case usbgadget.KeysDownState:
 		message, err = hidrpc.NewKeydownStateMessage(params).Marshal()
+	case hidrpc.KeyboardMacroStateReport:
+		message, err = hidrpc.NewKeyboardMacroStateMessage(params.State, params.IsPaste).Marshal()
 	default:
 		err = fmt.Errorf("unknown HID RPC message type: %T", params)
 	}
@@ -174,3 +178,10 @@ func (s *Session) reportHidRPCKeysDownState(state usbgadget.KeysDownState) {
 	}
 	reportHidRPC(state, s)
 }
+
+func (s *Session) reportHidRPCKeyboardMacroState(state hidrpc.KeyboardMacroStateReport) {
+	if !s.hidRPCAvailable {
+		writeJSONRPCEvent("keyboardMacroState", state, s)
+	}
+	reportHidRPC(state, s)
+}

internal/hidrpc/hidrpc.go

@@ -32,10 +32,13 @@ func GetQueueIndex(messageType MessageType) int {
 	switch messageType {
 	case TypeHandshake:
 		return 0
-	case TypeKeyboardReport, TypeKeypressReport, TypeKeyboardLedState, TypeKeydownState, TypeKeyboardMacroStateReport:
+	case TypeKeyboardReport, TypeKeypressReport, TypeKeyboardMacroReport, TypeKeyboardLedState, TypeKeydownState, TypeKeyboardMacroStateReport:
 		return 1
 	case TypePointerReport, TypeMouseReport, TypeWheelReport:
 		return 2
+	// we don't want to block the queue for this message
+	case TypeCancelKeyboardMacroReport:
+		return 3
 	default:
 		return 3
 	}
@@ -101,3 +104,19 @@ func NewKeydownStateMessage(state usbgadget.KeysDownState) *Message {
 		d: data,
 	}
 }
+
+// NewKeyboardMacroStateMessage creates a new keyboard macro state message.
+func NewKeyboardMacroStateMessage(state bool, isPaste bool) *Message {
+	data := make([]byte, 2)
+	if state {
+		data[0] = 1
+	}
+	if isPaste {
+		data[1] = 1
+	}
+
+	return &Message{
+		t: TypeKeyboardMacroStateReport,
+		d: data,
+	}
+}

internal/hidrpc/message.go

@@ -182,3 +182,20 @@ func (m *Message) MouseReport() (MouseReport, error) {
 		Button: uint8(m.d[2]),
 	}, nil
 }
+
+type KeyboardMacroStateReport struct {
+	State   bool
+	IsPaste bool
+}
+
+// KeyboardMacroStateReport returns the keyboard macro state report from the message.
+func (m *Message) KeyboardMacroStateReport() (KeyboardMacroStateReport, error) {
+	if m.t != TypeKeyboardMacroStateReport {
+		return KeyboardMacroStateReport{}, fmt.Errorf("invalid message type: %d", m.t)
+	}
+
+	return KeyboardMacroStateReport{
+		State:   m.d[0] == uint8(1),
+		IsPaste: m.d[1] == uint8(1),
+	}, nil
+}

jiggler.go

@@ -17,16 +17,20 @@ type JigglerConfig struct {
 	Timezone               string `json:"timezone,omitempty"`
 }
 
-var jigglerEnabled = false
 var jobDelta time.Duration = 0
 var scheduler gocron.Scheduler = nil
 
-func rpcSetJigglerState(enabled bool) {
+func rpcSetJigglerState(enabled bool) error {
-	jigglerEnabled = enabled
+	config.JigglerEnabled = enabled
+	err := SaveConfig()
+	if err != nil {
+		return fmt.Errorf("failed to save config: %w", err)
+	}
+	return nil
 }
 
 func rpcGetJigglerState() bool {
-	return jigglerEnabled
+	return config.JigglerEnabled
 }
 
 func rpcGetTimezones() []string {
@@ -118,7 +122,7 @@ func runJigglerCronTab() error {
 }
 
 func runJiggler() {
-	if jigglerEnabled {
+	if config.JigglerEnabled {
 		if config.JigglerConfig.JitterPercentage != 0 {
 			jitter := calculateJitterDuration(jobDelta)
 			time.Sleep(jitter)

jsonrpc.go

@@ -1,6 +1,7 @@
 package kvm
 
 import (
+	"bytes"
 	"context"
 	"encoding/json"
 	"errors"
@@ -10,6 +11,7 @@ import (
 	"path/filepath"
 	"reflect"
 	"strconv"
+	"sync"
 	"time"
 
 	"github.com/pion/webrtc/v4"
@@ -1050,85 +1052,100 @@ func rpcSetLocalLoopbackOnly(enabled bool) error {
 	return nil
 }
 
-func cancelKeyboardReportMulti() {
+var (
+	keyboardMacroCancel context.CancelFunc
+	keyboardMacroLock   sync.Mutex
+)
 
+// cancelKeyboardMacro cancels any ongoing keyboard macro execution
+func cancelKeyboardMacro() {
+	keyboardMacroLock.Lock()
+	defer keyboardMacroLock.Unlock()
+
+	if keyboardMacroCancel != nil {
+		keyboardMacroCancel()
+		logger.Info().Msg("canceled keyboard macro")
+		keyboardMacroCancel = nil
+	}
 }
 
-// // cancelKeyboardReportMulti cancels any ongoing keyboard report multi execution
+func setKeyboardMacroCancel(cancel context.CancelFunc) {
-// func cancelKeyboardReportMulti() {
+	keyboardMacroLock.Lock()
-// 	keyboardReportMultiLock.Lock()
+	defer keyboardMacroLock.Unlock()
-// 	defer keyboardReportMultiLock.Unlock()
 
-// 	if keyboardReportMultiCancel != nil {
+	keyboardMacroCancel = cancel
-// 		keyboardReportMultiCancel()
+}
-// 		logger.Info().Msg("canceled keyboard report multi")
-// 		keyboardReportMultiCancel = nil
-// 	}
-// }
 
-// func setKeyboardReportMultiCancel(cancel context.CancelFunc) {
+func rpcExecuteKeyboardMacro(macro []hidrpc.KeyboardMacro) (usbgadget.KeysDownState, error) {
-// 	keyboardReportMultiLock.Lock()
+	cancelKeyboardMacro()
-// 	defer keyboardReportMultiLock.Unlock()
 
-// 	keyboardReportMultiCancel = cancel
+	ctx, cancel := context.WithCancel(context.Background())
-// }
+	setKeyboardMacroCancel(cancel)
 
-// func rpcKeyboardReportMultiWrapper(macro []map[string]any) (usbgadget.KeysDownState, error) {
+	s := hidrpc.KeyboardMacroStateReport{
-// 	// cancelKeyboardReportMulti()
+		State:   true,
+		IsPaste: true,
+	}
 
-// 	// ctx, cancel := context.WithCancel(context.Background())
+	if currentSession != nil {
-// 	// setKeyboardReportMultiCancel(cancel)
+		currentSession.reportHidRPCKeyboardMacroState(s)
+	}
 
-// 	// writeJSONRPCEvent("keyboardReportMultiState", true, currentSession)
+	result, err := rpcDoExecuteKeyboardMacro(ctx, macro)
 
-// 	// result, err := rpcKeyboardReportMulti(ctx, macro)
+	setKeyboardMacroCancel(nil)
 
-// 	// setKeyboardReportMultiCancel(nil)
+	s.State = false
+	if currentSession != nil {
+		currentSession.reportHidRPCKeyboardMacroState(s)
+	}
 
-// 	// writeJSONRPCEvent("keyboardReportMultiState", false, currentSession)
+	return result, err
+}
 
-// 	// return result, err
+func rpcCancelKeyboardMacro() {
-// }
+	cancelKeyboardMacro()
+}
 
-// var (
+var keyboardClearStateKeys = make([]byte, 6)
-// 	keyboardReportMultiCancel context.CancelFunc
-// 	keyboardReportMultiLock   sync.Mutex
-// )
 
-// func rpcCancelKeyboardReportMulti() {
+func isClearKeyStep(step hidrpc.KeyboardMacro) bool {
-// 	cancelKeyboardReportMulti()
+	return step.Modifier == 0 && bytes.Equal(step.Keys, keyboardClearStateKeys)
-// }
+}
 
-func rpcKeyboardReportMulti(ctx context.Context, macro []hidrpc.KeyboardMacro) (usbgadget.KeysDownState, error) {
+func rpcDoExecuteKeyboardMacro(ctx context.Context, macro []hidrpc.KeyboardMacro) (usbgadget.KeysDownState, error) {
 	var last usbgadget.KeysDownState
 	var err error
 
-	logger.Debug().Interface("macro", macro).Msg("Executing keyboard report multi")
+	logger.Debug().Interface("macro", macro).Msg("Executing keyboard macro")
 
 	for i, step := range macro {
-		// Check for cancellation before each step
-		select {
-		case <-ctx.Done():
-			logger.Debug().Msg("Keyboard report multi context cancelled")
-			return last, ctx.Err()
-		default:
-		}
-
 		delay := time.Duration(step.Delay) * time.Millisecond
-		logger.Info().Int("step", i).Uint16("delay", step.Delay).Msg("Keyboard report multi delay")
 
 		last, err = rpcKeyboardReport(step.Modifier, step.Keys)
 		if err != nil {
-			logger.Warn().Err(err).Msg("failed to execute keyboard report multi")
+			logger.Warn().Err(err).Msg("failed to execute keyboard macro")
 			return last, err
 		}
 
+		// notify the device that the keyboard state is being cleared
+		if isClearKeyStep(step) {
+			gadget.UpdateKeysDown(0, keyboardClearStateKeys)
+		}
+
 		// Use context-aware sleep that can be cancelled
 		select {
 		case <-time.After(delay):
 			// Sleep completed normally
 		case <-ctx.Done():
-			logger.Debug().Int("step", i).Msg("Keyboard report multi cancelled during sleep")
+			// make sure keyboard state is reset
+			_, err := rpcKeyboardReport(0, keyboardClearStateKeys)
+			if err != nil {
+				logger.Warn().Err(err).Msg("failed to reset keyboard state")
+			}
+			gadget.UpdateKeysDown(0, keyboardClearStateKeys)
+
+			logger.Debug().Int("step", i).Msg("Keyboard macro cancelled during sleep")
 			return last, ctx.Err()
 		}
 	}
@@ -1137,18 +1154,16 @@ func rpcKeyboardReportMulti(ctx context.Context, macro []hidrpc.KeyboardMacro) (
 }
 
 var rpcHandlers = map[string]RPCHandler{
-	"ping":               {Func: rpcPing},
+	"ping":                   {Func: rpcPing},
-	"reboot":             {Func: rpcReboot, Params: []string{"force"}},
+	"reboot":                 {Func: rpcReboot, Params: []string{"force"}},
-	"getDeviceID":        {Func: rpcGetDeviceID},
+	"getDeviceID":            {Func: rpcGetDeviceID},
-	"deregisterDevice":   {Func: rpcDeregisterDevice},
+	"deregisterDevice":       {Func: rpcDeregisterDevice},
-	"getCloudState":      {Func: rpcGetCloudState},
+	"getCloudState":          {Func: rpcGetCloudState},
-	"getNetworkState":    {Func: rpcGetNetworkState},
+	"getNetworkState":        {Func: rpcGetNetworkState},
-	"getNetworkSettings": {Func: rpcGetNetworkSettings},
+	"getNetworkSettings":     {Func: rpcGetNetworkSettings},
-	"setNetworkSettings": {Func: rpcSetNetworkSettings, Params: []string{"settings"}},
+	"setNetworkSettings":     {Func: rpcSetNetworkSettings, Params: []string{"settings"}},
-	"renewDHCPLease":     {Func: rpcRenewDHCPLease},
+	"renewDHCPLease":         {Func: rpcRenewDHCPLease},
-	"keyboardReport":     {Func: rpcKeyboardReport, Params: []string{"modifier", "keys"}},
+	"keyboardReport":         {Func: rpcKeyboardReport, Params: []string{"modifier", "keys"}},
-	// "keyboardReportMulti":       {Func: rpcKeyboardReportMultiWrapper, Params: []string{"macro"}},
-	// "cancelKeyboardReportMulti": {Func: rpcCancelKeyboardReportMulti},
 	"getKeyboardLedState":    {Func: rpcGetKeyboardLedState},
 	"keypressReport":         {Func: rpcKeypressReport, Params: []string{"key", "press"}},
 	"getKeyDownState":        {Func: rpcGetKeysDownState},

ui/src/components/CustomTooltip.tsx

@@ -1,25 +1,25 @@
 import Card from "@components/Card";
 
 export interface CustomTooltipProps {
-  payload: { payload: { date: number; stat: number }; unit: string }[];
+  payload: { payload: { date: number; metric: number }; unit: string }[];
 }
 
 export default function CustomTooltip({ payload }: CustomTooltipProps) {
   if (payload?.length) {
     const toolTipData = payload[0];
-    const { date, stat } = toolTipData.payload;
+    const { date, metric } = toolTipData.payload;
 
     return (
       <Card>
-        <div className="p-2 text-black dark:text-white">
+        <div className="px-2 py-1.5 text-black dark:text-white">
-          <div className="font-semibold">
+          <div className="text-[13px] font-semibold">
             {new Date(date * 1000).toLocaleTimeString()}
           </div>
           <div className="space-y-1">
             <div className="flex items-center gap-x-1">
               <div className="h-[2px] w-2 bg-blue-700" />
-              <span >
+              <span className="text-[13px]">
-                {stat} {toolTipData?.unit}
+                {metric} {toolTipData?.unit}
               </span>
             </div>
           </div>

ui/src/components/Header.tsx

@@ -103,7 +103,7 @@ export default function DashboardNavbar({
                     <hr className="h-[20px] w-px self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
                     <div className="relative inline-block text-left">
                       <Menu>
-                        <MenuButton className="h-full">
+                        <MenuButton as="div" className="h-full">
                           <Button className="flex h-full items-center gap-x-3 rounded-md border border-slate-800/20 bg-white px-2 py-1.5 dark:border-slate-600 dark:bg-slate-800 dark:text-white">
                             {picture ? (
                               <img

ui/src/components/KvmCard.tsx

@@ -100,15 +100,12 @@ export default function KvmCard({
             )}
           </div>
           <Menu as="div" className="relative inline-block text-left">
-            <div>
+            <MenuButton
-              <MenuButton
+              as={Button}
-                as={Button}
+              theme="light"
-                theme="light"
+              TrailingIcon={LuEllipsisVertical}
-                TrailingIcon={LuEllipsisVertical}
+              size="MD"
-                size="MD"
+            ></MenuButton>
-              ></MenuButton>
-            </div>
-
             <MenuItems
               transition
               className="data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-leave:duration-75 data-enter:ease-out data-leave:ease-in"

ui/src/components/Metric.tsx

@@ -0,0 +1,180 @@
+/* eslint-disable react-refresh/only-export-components */
+import { ComponentProps } from "react";
+import { cva, cx } from "cva";
+
+import { someIterable } from "../utils";
+
+import { GridCard } from "./Card";
+import MetricsChart from "./MetricsChart";
+
+interface ChartPoint {
+  date: number;
+  metric: number | null;
+}
+
+interface MetricProps<T, K extends keyof T> {
+  title: string;
+  description: string;
+  stream?: Map<number, T>;
+  metric?: K;
+  data?: ChartPoint[];
+  gate?: Map<number, unknown>;
+  supported?: boolean;
+  map?: (p: { date: number; metric: number | null }) => ChartPoint;
+  domain?: [number, number];
+  unit: string;
+  heightClassName?: string;
+  referenceValue?: number;
+  badge?: ComponentProps<typeof MetricHeader>["badge"];
+  badgeTheme?: ComponentProps<typeof MetricHeader>["badgeTheme"];
+}
+
+/**
+ * Creates a chart array from a metrics map and a metric name.
+ *
+ * @param metrics - Expected to be ordered from oldest to newest.
+ * @param metricName - Name of the metric to create a chart array for.
+ */
+export function createChartArray<T, K extends keyof T>(
+  metrics: Map<number, T>,
+  metricName: K,
+) {
+  const result: { date: number; metric: number | null }[] = [];
+  const iter = metrics.entries();
+  let next = iter.next() as IteratorResult<[number, T]>;
+  const nowSeconds = Math.floor(Date.now() / 1000);
+
+  // We want 120 data points, in the chart.
+  const firstDate = Math.min(next.value?.[0] ?? nowSeconds, nowSeconds - 120);
+
+  for (let t = firstDate; t < nowSeconds; t++) {
+    while (!next.done && next.value[0] < t) next = iter.next();
+    const has = !next.done && next.value[0] === t;
+
+    let metric = null;
+    if (has) metric = next.value[1][metricName] as number;
+    result.push({ date: t, metric });
+
+    if (has) next = iter.next();
+  }
+
+  return result;
+}
+
+function computeReferenceValue(points: ChartPoint[]): number | undefined {
+  const values = points
+    .filter(p => p.metric != null && Number.isFinite(p.metric))
+    .map(p => Number(p.metric));
+
+  if (values.length === 0) return undefined;
+
+  const sum = values.reduce((acc, v) => acc + v, 0);
+  const mean = sum / values.length;
+  return Math.round(mean);
+}
+
+const theme = {
+  light:
+    "bg-white text-black border border-slate-800/20 dark:border dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300",
+  danger: "bg-red-500 dark:border-red-700 dark:bg-red-800 dark:text-red-50",
+  primary: "bg-blue-500 dark:border-blue-700 dark:bg-blue-800 dark:text-blue-50",
+};
+
+interface SettingsItemProps {
+  readonly title: string;
+  readonly description: string | React.ReactNode;
+  readonly badge?: string;
+  readonly className?: string;
+  readonly children?: React.ReactNode;
+  readonly badgeTheme?: keyof typeof theme;
+}
+
+export function MetricHeader(props: SettingsItemProps) {
+  const { title, description, badge } = props;
+  const badgeVariants = cva({ variants: { theme: theme } });
+
+  return (
+    <div className="space-y-0.5">
+      <div className="flex items-center gap-x-2">
+        <div className="flex w-full items-center justify-between text-base font-semibold text-black dark:text-white">
+          {title}
+          {badge && (
+            <span
+              className={cx(
+                "ml-2 rounded-sm px-2 py-1 font-mono text-[10px] leading-none font-medium",
+                badgeVariants({ theme: props.badgeTheme ?? "light" }),
+              )}
+            >
+              {badge}
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="text-sm text-slate-700 dark:text-slate-300">{description}</div>
+    </div>
+  );
+}
+
+export function Metric<T, K extends keyof T>({
+  title,
+  description,
+  stream,
+  metric,
+  data,
+  gate,
+  supported,
+  map,
+  domain = [0, 600],
+  unit = "",
+  heightClassName = "h-[127px]",
+  badge,
+  badgeTheme,
+}: MetricProps<T, K>) {
+  const ready = gate ? gate.size > 0 : stream ? stream.size > 0 : true;
+  const supportedFinal =
+    supported ??
+    (stream && metric ? someIterable(stream, ([, s]) => s[metric] !== undefined) : true);
+
+  // Either we let the consumer provide their own chartArray, or we create one from the stream and metric.
+  const raw = data ?? ((stream && metric && createChartArray(stream, metric)) || []);
+
+  // If the consumer provides a map function, we apply it to the raw data.
+  const dataFinal: ChartPoint[] = map ? raw.map(map) : raw;
+
+  // Compute the average value of the metric.
+  const referenceValue = computeReferenceValue(dataFinal);
+
+  return (
+    <div className="space-y-2">
+      <MetricHeader
+        title={title}
+        description={description}
+        badge={badge}
+        badgeTheme={badgeTheme}
+      />
+
+      <GridCard>
+        <div
+          className={`flex ${heightClassName} w-full items-center justify-center text-sm text-slate-500`}
+        >
+          {!ready ? (
+            <div className="flex flex-col items-center space-y-1">
+              <p className="text-slate-700">Waiting for data...</p>
+            </div>
+          ) : supportedFinal ? (
+            <MetricsChart
+              data={dataFinal}
+              domain={domain}
+              unit={unit}
+              referenceValue={referenceValue}
+            />
+          ) : (
+            <div className="flex flex-col items-center space-y-1">
+              <p className="text-black">Metric not supported</p>
+            </div>
+          )}
+        </div>
+      </GridCard>
+    </div>
+  );
+}

ui/src/components/MetricsChart.tsx

@@ -12,13 +12,13 @@ import {
 
 import CustomTooltip, { CustomTooltipProps } from "@components/CustomTooltip";
 
-export default function StatChart({
+export default function MetricsChart({
   data,
   domain,
   unit,
   referenceValue,
 }: {
-  data: { date: number; stat: number | null | undefined }[];
+  data: { date: number; metric: number | null | undefined }[];
   domain?: [string | number, string | number];
   unit?: string;
   referenceValue?: number;
@@ -33,7 +33,7 @@ export default function StatChart({
           strokeLinecap="butt"
           stroke="rgba(30, 41, 59, 0.1)"
         />
-        {referenceValue && (
+        {referenceValue !== undefined && (
           <ReferenceLine
             y={referenceValue}
             strokeDasharray="3 3"
@@ -64,7 +64,7 @@ export default function StatChart({
             .map(x => x.date)}
         />
         <YAxis
-          dataKey="stat"
+          dataKey="metric"
           axisLine={false}
           orientation="right"
           tick={{
@@ -73,6 +73,7 @@ export default function StatChart({
             fill: "rgba(107, 114, 128, 1)",
           }}
           padding={{ top: 0, bottom: 0 }}
+          allowDecimals
           tickLine={false}
           unit={unit}
           domain={domain || ["auto", "auto"]}
@@ -87,7 +88,7 @@ export default function StatChart({
         <Line
           type="monotone"
           isAnimationActive={false}
-          dataKey="stat"
+          dataKey="metric"
           stroke="rgb(29 78 216)"
           strokeLinecap="round"
           strokeWidth={2}

ui/src/components/popovers/PasteModal.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { LuCornerDownLeft } from "react-icons/lu";
 import { ExclamationCircleIcon } from "@heroicons/react/16/solid";
 import { useClose } from "@headlessui/react";
@@ -12,6 +12,7 @@ import { useHidStore, useSettingsStore, useUiStore } from "@/hooks/stores";
 import useKeyboard from "@/hooks/useKeyboard";
 import useKeyboardLayout from "@/hooks/useKeyboardLayout";
 import notifications from "@/notifications";
+import { InputFieldWithLabel } from "@components/InputField";
 
 export default function PasteModal() {
   const TextAreaRef = useRef<HTMLTextAreaElement>(null);
@@ -22,6 +23,13 @@ export default function PasteModal() {
   const { executeMacro, cancelExecuteMacro } = useKeyboard();
 
   const [invalidChars, setInvalidChars] = useState<string[]>([]);
+  const [delayValue, setDelayValue] = useState(100);
+  const delay = useMemo(() => {
+    if (delayValue < 50 || delayValue > 65534) {
+      return 100;
+    }
+    return delayValue;
+  }, [delayValue]);
   const close = useClose();
 
   const { setKeyboardLayout } = useSettingsStore();
@@ -41,9 +49,6 @@ export default function PasteModal() {
   }, [setDisableVideoFocusTrap, cancelExecuteMacro]);
 
   const onConfirmPaste = useCallback(async () => {
-    // setPasteModeEnabled(false);
-    // setDisableVideoFocusTrap(false);
-
     if (!TextAreaRef.current || !selectedKeyboard) return;
 
     const text = TextAreaRef.current.value;
@@ -71,7 +76,7 @@ export default function PasteModal() {
           macroSteps.push({
             keys: [String(accentKey.key)],
             modifiers: accentModifiers.length > 0 ? accentModifiers : null,
-            delay: 100,
+            delay,
           });
         }
 
@@ -83,12 +88,12 @@ export default function PasteModal() {
         macroSteps.push({
           keys: [String(key)],
           modifiers: modifiers.length > 0 ? modifiers : null,
-          delay: 100,
+          delay
         });
 
         // if what was requested was a dead key, we need to send an unmodified space to emit
         // just the accent character
-        if (deadKey) macroSteps.push({ keys: ["Space"], modifiers: null, delay: 100 });
+        if (deadKey) macroSteps.push({ keys: ["Space"], modifiers: null, delay });
       }
 
       if (macroSteps.length > 0) {
@@ -98,7 +103,7 @@ export default function PasteModal() {
       console.error("Failed to paste text:", error);
       notifications.error("Failed to paste text");
     }
-  }, [selectedKeyboard, executeMacro]);
+  }, [selectedKeyboard, executeMacro, delay]);
 
   useEffect(() => {
     if (TextAreaRef.current) {
@@ -171,6 +176,27 @@ export default function PasteModal() {
                     )}
                   </div>
                 </div>
+                <div className="text-xs text-slate-600 dark:text-slate-400">
+                  <InputFieldWithLabel
+                    type="number"
+                    label="Delay between keys"
+                    placeholder="Delay between keys"
+                    min={50}
+                    max={65534}
+                    value={delayValue}
+                    onChange={e => {
+                      setDelayValue(parseInt(e.target.value, 10));
+                    }}
+                  />
+                  {delayValue < 50 || delayValue > 65534 && (
+                    <div className="mt-2 flex items-center gap-x-2">
+                      <ExclamationCircleIcon className="h-4 w-4 text-red-500 dark:text-red-400" />
+                      <span className="text-xs text-red-500 dark:text-red-400">
+                        Delay must be between 50 and 65534
+                      </span>
+                    </div>
+                  )}
+                </div>
                 <div className="space-y-4">
                   <p className="text-xs text-slate-600 dark:text-slate-400">
                     Sending text using keyboard layout: {selectedKeyboard.isoCode}-

ui/src/components/sidebar/connectionStats.tsx

@@ -1,74 +1,40 @@
 import { useInterval } from "usehooks-ts";
 
 import SidebarHeader from "@/components/SidebarHeader";
-import { GridCard } from "@/components/Card";
 import { useRTCStore, useUiStore } from "@/hooks/stores";
-import StatChart from "@/components/StatChart";
+import { someIterable } from "@/utils";
 
-function createChartArray<T, K extends keyof T>(
+import { createChartArray, Metric } from "../Metric";
-  stream: Map<number, T>,
+import { SettingsSectionHeader } from "../SettingsSectionHeader";
-  metric: K,
-): { date: number; stat: T[K] | null }[] {
-  const stat = Array.from(stream).map(([key, stats]) => {
-    return { date: key, stat: stats[metric] };
-  });
-
-  // Sort the dates to ensure they are in chronological order
-  const sortedStat = stat.map(x => x.date).sort((a, b) => a - b);
-
-  // Determine the earliest statistic date
-  const earliestStat = sortedStat[0];
-
-  // Current time in seconds since the Unix epoch
-  const now = Math.floor(Date.now() / 1000);
-
-  // Determine the starting point for the chart data
-  const firstChartDate = earliestStat ? Math.min(earliestStat, now - 120) : now - 120;
-
-  // Generate the chart array for the range between 'firstChartDate' and 'now'
-  return Array.from({ length: now - firstChartDate }, (_, i) => {
-    const currentDate = firstChartDate + i;
-    return {
-      date: currentDate,
-      // Find the statistic for 'currentDate', or use the last known statistic if none exists for that date
-      stat: stat.find(x => x.date === currentDate)?.stat ?? null,
-    };
-  });
-}
 
 export default function ConnectionStatsSidebar() {
   const { sidebarView, setSidebarView } = useUiStore();
   const {
-     mediaStream,
+    mediaStream,
-     peerConnection,
+    peerConnection,
-     inboundRtpStats,
+    inboundRtpStats: inboundVideoRtpStats,
-     appendInboundRtpStats,
+    appendInboundRtpStats: appendInboundVideoRtpStats,
-     candidatePairStats,
+    candidatePairStats: iceCandidatePairStats,
-     appendCandidatePairStats,
+    appendCandidatePairStats,
-     appendLocalCandidateStats,
+    appendLocalCandidateStats,
-     appendRemoteCandidateStats,
+    appendRemoteCandidateStats,
-     appendDiskDataChannelStats,
+    appendDiskDataChannelStats,
   } = useRTCStore();
 
-  function isMetricSupported<T, K extends keyof T>(
-    stream: Map<number, T>,
-    metric: K,
-  ): boolean {
-    return Array.from(stream).some(([, stat]) => stat[metric] !== undefined);
-  }
-
   useInterval(function collectWebRTCStats() {
     (async () => {
       if (!mediaStream) return;
+
       const videoTrack = mediaStream.getVideoTracks()[0];
       if (!videoTrack) return;
+
       const stats = await peerConnection?.getStats();
       let successfulLocalCandidateId: string | null = null;
       let successfulRemoteCandidateId: string | null = null;
 
       stats?.forEach(report => {
-        if (report.type === "inbound-rtp") {
+        if (report.type === "inbound-rtp" && report.kind === "video") {
-          appendInboundRtpStats(report);
+          appendInboundVideoRtpStats(report);
         } else if (report.type === "candidate-pair" && report.nominated) {
           if (report.state === "succeeded") {
             successfulLocalCandidateId = report.localCandidateId;
@@ -91,144 +57,133 @@ export default function ConnectionStatsSidebar() {
     })();
   }, 500);
 
+  const jitterBufferDelay = createChartArray(inboundVideoRtpStats, "jitterBufferDelay");
+  const jitterBufferEmittedCount = createChartArray(
+    inboundVideoRtpStats,
+    "jitterBufferEmittedCount",
+  );
+
+  const jitterBufferAvgDelayData = jitterBufferDelay.map((d, idx) => {
+    if (idx === 0) return { date: d.date, metric: null };
+    const prevDelay = jitterBufferDelay[idx - 1]?.metric as number | null | undefined;
+    const currDelay = d.metric as number | null | undefined;
+    const prevCountEmitted =
+      (jitterBufferEmittedCount[idx - 1]?.metric as number | null | undefined) ?? null;
+    const currCountEmitted =
+      (jitterBufferEmittedCount[idx]?.metric as number | null | undefined) ?? null;
+
+    if (
+      prevDelay == null ||
+      currDelay == null ||
+      prevCountEmitted == null ||
+      currCountEmitted == null
+    ) {
+      return { date: d.date, metric: null };
+    }
+
+    const deltaDelay = currDelay - prevDelay;
+    const deltaEmitted = currCountEmitted - prevCountEmitted;
+
+    // Guard counter resets or no emitted frames
+    if (deltaDelay < 0 || deltaEmitted <= 0) {
+      return { date: d.date, metric: null };
+    }
+
+    const valueMs = Math.round((deltaDelay / deltaEmitted) * 1000);
+    return { date: d.date, metric: valueMs };
+  });
+
   return (
     <div className="grid h-full grid-rows-(--grid-headerBody) shadow-xs">
       <SidebarHeader title="Connection Stats" setSidebarView={setSidebarView} />
       <div className="h-full space-y-4 overflow-y-scroll bg-white px-4 py-2 pb-8 dark:bg-slate-900">
         <div className="space-y-4">
-          {/*
-            The entire sidebar component is always rendered, with a display none when not visible
-            The charts below, need a height and width, otherwise they throw. So simply don't render them unless the thing is visible
-          */}
           {sidebarView === "connection-stats" && (
-            <div className="space-y-4">
+            <div className="space-y-8">
-              <div className="space-y-2">
+              {/* Connection Group */}
-                <div>
+              <div className="space-y-3">
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
+                <SettingsSectionHeader
-                    Packets Lost
+                  title="Connection"
-                  </h2>
+                  description="The connection between the client and the JetKVM."
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
+                />
-                    Number of data packets lost during transmission.
+                <Metric
-                  </p>
+                  title="Round-Trip Time"
-                </div>
+                  description="Round-trip time for the active ICE candidate pair between peers."
-                <GridCard>
+                  stream={iceCandidatePairStats}
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
+                  metric="currentRoundTripTime"
-                    {inboundRtpStats.size === 0 ? (
+                  map={x => ({
-                      <div className="flex flex-col items-center space-y-1">
+                    date: x.date,
-                        <p className="text-slate-700">Waiting for data...</p>
+                    metric: x.metric != null ? Math.round(x.metric * 1000) : null,
-                      </div>
+                  })}
-                    ) : isMetricSupported(inboundRtpStats, "packetsLost") ? (
+                  domain={[0, 600]}
-                      <StatChart
+                  unit=" ms"
-                        data={createChartArray(inboundRtpStats, "packetsLost")}
+                />
-                        domain={[0, 100]}
-                        unit=" packets"
-                      />
-                    ) : (
-                      <div className="flex flex-col items-center space-y-1">
-                        <p className="text-black">Metric not supported</p>
-                      </div>
-                    )}
-                  </div>
-                </GridCard>
               </div>
-              <div className="space-y-2">
+
-                <div>
+              {/* Video Group */}
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
+              <div className="space-y-3">
-                    Round-Trip Time
+                <SettingsSectionHeader
-                  </h2>
+                  title="Video"
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
+                  description="The video stream from the JetKVM to the client."
-                    Time taken for data to travel from source to destination and back
+                />
-                  </p>
+
-                </div>
+                {/* RTP Jitter */}
-                <GridCard>
+                <Metric
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
+                  title="Network Stability"
-                    {inboundRtpStats.size === 0 ? (
+                  badge="Jitter"
-                      <div className="flex flex-col items-center space-y-1">
+                  badgeTheme="light"
-                        <p className="text-slate-700">Waiting for data...</p>
+                  description="How steady the flow of inbound video packets is across the network."
-                      </div>
+                  stream={inboundVideoRtpStats}
-                    ) : isMetricSupported(candidatePairStats, "currentRoundTripTime") ? (
+                  metric="jitter"
-                      <StatChart
+                  map={x => ({
-                        data={createChartArray(
+                    date: x.date,
-                          candidatePairStats,
+                    metric: x.metric != null ? Math.round(x.metric * 1000) : null,
-                          "currentRoundTripTime",
+                  })}
-                        ).map(x => {
+                  domain={[0, 10]}
-                          return {
+                  unit=" ms"
-                            date: x.date,
+                />
-                            stat: x.stat ? Math.round(x.stat * 1000) : null,
+
-                          };
+                {/* Playback Delay */}
-                        })}
+                <Metric
-                        domain={[0, 600]}
+                  title="Playback Delay"
-                        unit=" ms"
+                  description="Delay added by the jitter buffer to smooth playback when frames arrive unevenly."
-                      />
+                  badge="Jitter Buffer Avg. Delay"
-                    ) : (
+                  badgeTheme="light"
-                      <div className="flex flex-col items-center space-y-1">
+                  data={jitterBufferAvgDelayData}
-                        <p className="text-black">Metric not supported</p>
+                  gate={inboundVideoRtpStats}
-                      </div>
+                  supported={
-                    )}
+                    someIterable(
-                  </div>
+                      inboundVideoRtpStats,
-                </GridCard>
+                      ([, x]) => x.jitterBufferDelay != null,
-              </div>
+                    ) &&
-              <div className="space-y-2">
+                    someIterable(
-                <div>
+                      inboundVideoRtpStats,
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
+                      ([, x]) => x.jitterBufferEmittedCount != null,
-                    Jitter
+                    )
-                  </h2>
+                  }
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
+                  domain={[0, 30]}
-                    Variation in packet delay, affecting video smoothness.{" "}
+                  unit=" ms"
-                  </p>
+                />
-                </div>
+
-                <GridCard>
+                {/* Packets Lost */}
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
+                <Metric
-                    {inboundRtpStats.size === 0 ? (
+                  title="Packets Lost"
-                      <div className="flex flex-col items-center space-y-1">
+                  description="Count of lost inbound video RTP packets."
-                        <p className="text-slate-700">Waiting for data...</p>
+                  stream={inboundVideoRtpStats}
-                      </div>
+                  metric="packetsLost"
-                    ) : (
+                  domain={[0, 100]}
-                      <StatChart
+                  unit=" packets"
-                        data={createChartArray(inboundRtpStats, "jitter").map(x => {
+                />
-                          return {
+
-                            date: x.date,
+                {/* Frames Per Second */}
-                            stat: x.stat ? Math.round(x.stat * 1000) : null,
+                <Metric
-                          };
+                  title="Frames per second"
-                        })}
+                  description="Number of inbound video frames displayed per second."
-                        domain={[0, 300]}
+                  stream={inboundVideoRtpStats}
-                        unit=" ms"
+                  metric="framesPerSecond"
-                      />
+                  domain={[0, 80]}
-                    )}
+                  unit=" fps"
-                  </div>
+                />
-                </GridCard>
-              </div>
-              <div className="space-y-2">
-                <div>
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
-                    Frames per second
-                  </h2>
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
-                    Number of video frames displayed per second.
-                  </p>
-                </div>
-                <GridCard>
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
-                    {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1">
-                        <p className="text-slate-700">Waiting for data...</p>
-                      </div>
-                    ) : (
-                      <StatChart
-                        data={createChartArray(inboundRtpStats, "framesPerSecond").map(
-                          x => {
-                            return {
-                              date: x.date,
-                              stat: x.stat ? x.stat : null,
-                            };
-                          },
-                        )}
-                        domain={[0, 80]}
-                        unit=" fps"
-                      />
-                    )}
-                  </div>
-                </GridCard>
               </div>
             </div>
           )}

ui/src/hooks/hidRpc.ts

@@ -8,8 +8,10 @@ export const HID_RPC_MESSAGE_TYPES = {
     KeypressReport: 0x05,
     MouseReport: 0x06,
     KeyboardMacroReport: 0x07,
+    CancelKeyboardMacroReport: 0x08,
     KeyboardLedState: 0x32,
     KeysDownState: 0x33,
+    KeyboardMacroStateReport: 0x34,
 }
 
 export type HidRpcMessageType = typeof HID_RPC_MESSAGE_TYPES[keyof typeof HID_RPC_MESSAGE_TYPES];
@@ -211,34 +213,39 @@ export class KeyboardReportMessage extends RpcMessage {
     }
 }
 
-export interface KeyboardMacro extends KeysDownState {
+export interface KeyboardMacroStep extends KeysDownState {
     delay: number;
 }
 
 export class KeyboardMacroReportMessage extends RpcMessage {
     isPaste: boolean;
     length: number;
-    macro: KeyboardMacro[];
+    steps: KeyboardMacroStep[];
 
     KEYS_LENGTH = 6;
 
-    constructor(isPaste: boolean, length: number, macro: KeyboardMacro[]) {
+    constructor(isPaste: boolean, length: number, steps: KeyboardMacroStep[]) {
         super(HID_RPC_MESSAGE_TYPES.KeyboardMacroReport);
         this.isPaste = isPaste;
         this.length = length;
-        this.macro = macro;
+        this.steps = steps;
     }
 
     marshal(): Uint8Array {
-        const dataHeader = new Uint8Array([
+        // validate if length is correct
+        if (this.length !== this.steps.length) {
+            throw new Error(`Length ${this.length} is not equal to the number of steps ${this.steps.length}`);
+        }
+
+        const data = new Uint8Array(this.length * 9 + 6);
+        data.set(new Uint8Array([
             this.messageType,
             this.isPaste ? 1 : 0,
             ...fromUint32toUint8(this.length),
-        ]);
+        ]), 0);
 
-        let dataBody = new Uint8Array();
+        for (let i = 0; i < this.length; i++) {
-
+            const step = this.steps[i];
-        for (const step of this.macro) {
             if (!withinUint8Range(step.modifier)) {
                 throw new Error(`Modifier ${step.modifier} is not within the uint8 range`);
             }
@@ -262,10 +269,40 @@ export class KeyboardMacroReportMessage extends RpcMessage {
                 ...keys,
                 ...fromUint16toUint8(step.delay),
             ]);
+            const offset = 6 + i * 9;
 
-            dataBody = new Uint8Array([...dataBody, ...macroBinary]);
+            
+            data.set(macroBinary, offset);
         }
-        return new Uint8Array([...dataHeader, ...dataBody]);
+
+        return data;
+    }
+}
+
+export class KeyboardMacroStateReportMessage extends RpcMessage {
+    state: boolean;
+    isPaste: boolean;
+
+    constructor(state: boolean, isPaste: boolean) {
+        super(HID_RPC_MESSAGE_TYPES.KeyboardMacroStateReport);
+        this.state = state;
+        this.isPaste = isPaste;
+    }
+
+    marshal(): Uint8Array {
+        return new Uint8Array([
+            this.messageType,
+            this.state ? 1 : 0,
+            this.isPaste ? 1 : 0,
+        ]);
+    }
+
+    public static unmarshal(data: Uint8Array): KeyboardMacroStateReportMessage | undefined {
+        if (data.length < 1) {
+            throw new Error(`Invalid keyboard macro state report message length: ${data.length}`);
+        }
+
+        return new KeyboardMacroStateReportMessage(data[0] === 1, data[1] === 1);
     }
 }
 
@@ -339,6 +376,17 @@ export class PointerReportMessage extends RpcMessage {
     }
 }
 
+export class CancelKeyboardMacroReportMessage extends RpcMessage {
+
+    constructor() {
+        super(HID_RPC_MESSAGE_TYPES.CancelKeyboardMacroReport);
+    }
+
+    marshal(): Uint8Array {
+        return new Uint8Array([this.messageType]);
+    }
+}
+
 export class MouseReportMessage extends RpcMessage {
     dx: number;
     dy: number;
@@ -367,6 +415,9 @@ export const messageRegistry = {
     [HID_RPC_MESSAGE_TYPES.KeyboardLedState]: KeyboardLedStateMessage,
     [HID_RPC_MESSAGE_TYPES.KeyboardReport]: KeyboardReportMessage,
     [HID_RPC_MESSAGE_TYPES.KeypressReport]: KeypressReportMessage,
+    [HID_RPC_MESSAGE_TYPES.KeyboardMacroReport]: KeyboardMacroReportMessage,
+    [HID_RPC_MESSAGE_TYPES.CancelKeyboardMacroReport]: CancelKeyboardMacroReportMessage,
+    [HID_RPC_MESSAGE_TYPES.KeyboardMacroStateReport]: KeyboardMacroStateReportMessage,
 }
 
 export const unmarshalHidRpcMessage = (data: Uint8Array): RpcMessage | undefined => {

ui/src/hooks/useHidRpc.ts

@@ -3,9 +3,10 @@ import { useCallback, useEffect, useMemo } from "react";
 import { useRTCStore } from "@/hooks/stores";
 
 import {
+  CancelKeyboardMacroReportMessage,
   HID_RPC_VERSION,
   HandshakeMessage,
-  KeyboardMacro,
+  KeyboardMacroStep,
   KeyboardMacroReportMessage,
   KeyboardReportMessage,
   KeypressReportMessage,
@@ -71,10 +72,16 @@ export function useHidRpc(onHidRpcMessage?: (payload: RpcMessage) => void) {
   );
 
   const reportKeyboardMacroEvent = useCallback(
-    (macro: KeyboardMacro[]) => {
+    (macro: KeyboardMacroStep[]) => {
       const d = new KeyboardMacroReportMessage(false, macro.length, macro);
       sendMessage(d);
-      console.log("Sent keyboard macro report", d, d.marshal());
+    },
+    [sendMessage],
+  );
+
+  const cancelOngoingKeyboardMacro = useCallback(
+    () => {
+      sendMessage(new CancelKeyboardMacroReportMessage());
     },
     [sendMessage],
   );
@@ -155,6 +162,7 @@ export function useHidRpc(onHidRpcMessage?: (payload: RpcMessage) => void) {
     reportAbsMouseEvent,
     reportRelMouseEvent,
     reportKeyboardMacroEvent,
+    cancelOngoingKeyboardMacro,
     rpcHidProtocolVersion,
     rpcHidReady,
     rpcHidStatus,

ui/src/hooks/useKeyboard.ts

@@ -9,13 +9,13 @@ import {
 } from "@/hooks/stores";
 import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
 import { useHidRpc } from "@/hooks/useHidRpc";
-import { KeyboardLedStateMessage, KeyboardMacro, KeysDownStateMessage } from "@/hooks/hidRpc";
+import { KeyboardLedStateMessage, KeyboardMacroStateReportMessage, KeyboardMacroStep, KeysDownStateMessage } from "@/hooks/hidRpc";
 import { hidKeyToModifierMask, keys, modifiers } from "@/keyboardMappings";
 
 export default function useKeyboard() {
   const { send } = useJsonRpc();
   const { rpcDataChannel } = useRTCStore();
-  const { keysDownState, setKeysDownState, setKeyboardLedState } = useHidStore();
+  const { keysDownState, setKeysDownState, setKeyboardLedState, setPasteModeEnabled } = useHidStore();
 
   // INTRODUCTION: The earlier version of the JetKVM device shipped with all keyboard state
   // being tracked on the browser/client-side. When adding the keyPressReport API to the
@@ -33,6 +33,7 @@ export default function useKeyboard() {
     reportKeyboardEvent: sendKeyboardEventHidRpc,
     reportKeypressEvent: sendKeypressEventHidRpc,
     reportKeyboardMacroEvent: sendKeyboardMacroEventHidRpc,
+    cancelOngoingKeyboardMacro: cancelOngoingKeyboardMacroHidRpc,
     rpcHidReady,
   } = useHidRpc(message => {
     switch (message.constructor) {
@@ -42,6 +43,10 @@ export default function useKeyboard() {
       case KeyboardLedStateMessage:
         setKeyboardLedState((message as KeyboardLedStateMessage).keyboardLedState);
         break;
+      case KeyboardMacroStateReportMessage:
+        if (!(message as KeyboardMacroStateReportMessage).isPaste) break;
+        setPasteModeEnabled((message as KeyboardMacroStateReportMessage).state);
+        break;  
       default:
         break;
     }
@@ -101,7 +106,7 @@ export default function useKeyboard() {
   const executeMacro = async (
     steps: { keys: string[] | null; modifiers: string[] | null; delay: number }[],
   ) => {
-    const macro: KeyboardMacro[] = [];
+    const macro: KeyboardMacroStep[] = [];
 
     for (const [_, step] of steps.entries()) {
       const keyValues = (step.keys || []).map(key => keys[key]).filter(Boolean);
@@ -111,8 +116,8 @@ export default function useKeyboard() {
 
       // If the step has keys and/or modifiers, press them and hold for the delay
       if (keyValues.length > 0 || modifierMask > 0) {
-        macro.push({ keys: keyValues, modifier: modifierMask, delay: 50 });
+        macro.push({ keys: keyValues, modifier: modifierMask, delay: 20 });
-        macro.push({ ...MACRO_RESET_KEYBOARD_STATE, delay: 200 });
+        macro.push({ ...MACRO_RESET_KEYBOARD_STATE, delay: step.delay || 100 });
       }
     }
 
@@ -120,12 +125,9 @@ export default function useKeyboard() {
   };
 
   const cancelExecuteMacro = useCallback(async () => {
-    send("cancelKeyboardReportMulti", {}, (resp: JsonRpcResponse) => {
+    if (!rpcHidReady) return;
-      if ("error" in resp) {
+    cancelOngoingKeyboardMacroHidRpc();
-        console.error(`Failed to cancel keyboard report multi`, resp.error);
+  }, [rpcHidReady, cancelOngoingKeyboardMacroHidRpc]);
-      }
-    });
-  }, [send]);
 
   // handleKeyPress is used to handle a key press or release event.
   // This function handle both key press and key release events.

ui/src/main.tsx

@@ -116,6 +116,7 @@ if (isOnDevice) {
       path: "/",
       errorElement: <ErrorBoundary />,
       element: <DeviceRoute />,
+      HydrateFallback: () => <div className="p-4">Loading...</div>,
       loader: DeviceRoute.loader,
       children: [
         {

ui/src/routes/devices.$id.mount.tsx

@@ -355,7 +355,7 @@ function UrlView({
   const popularImages = [
     {
       name: "Ubuntu 24.04 LTS",
-      url: "https://releases.ubuntu.com/24.04.2/ubuntu-24.04.2-desktop-amd64.iso",
+      url: "https://releases.ubuntu.com/24.04.3/ubuntu-24.04.3-desktop-amd64.iso",
       icon: UbuntuIcon,
     },
     {
@@ -369,8 +369,8 @@ function UrlView({
       icon: DebianIcon,
     },
     {
-      name: "Fedora 41",
+      name: "Fedora 42",
-      url: "https://download.fedoraproject.org/pub/fedora/linux/releases/41/Workstation/x86_64/iso/Fedora-Workstation-Live-x86_64-41-1.4.iso",
+      url: "https://download.fedoraproject.org/pub/fedora/linux/releases/42/Workstation/x86_64/iso/Fedora-Workstation-Live-42-1.1.x86_64.iso",
       icon: FedoraIcon,
     },
     {
@@ -385,7 +385,7 @@ function UrlView({
     },
     {
       name: "Arch Linux",
-      url: "https://archlinux.doridian.net/iso/2025.02.01/archlinux-2025.02.01-x86_64.iso",
+      url: "https://archlinux.doridian.net/iso/latest/archlinux-x86_64.iso",
       icon: ArchIcon,
     },
     {

ui/src/routes/devices.$id.settings.mouse.tsx

@@ -90,6 +90,7 @@ export default function SettingsMouseRoute() {
     send("getJigglerState", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) return;
       const isEnabled = resp.result as boolean;
+      console.log("Jiggler is enabled:", isEnabled);
 
       // If the jiggler is disabled, set the selected option to "disabled" and nothing else
       if (!isEnabled) return setSelectedJigglerOption("disabled");

ui/src/routes/devices.$id.settings.video.tsx

@@ -1,15 +1,16 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import { Button } from "@/components/Button";
 import { TextAreaWithLabel } from "@/components/TextArea";
 import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useSettingsStore } from "@/hooks/stores";
-
+import { SelectMenuBasic } from "@components/SelectMenuBasic";
-import notifications from "../notifications";
+import Fieldset from "@components/Fieldset";
-import { SelectMenuBasic } from "../components/SelectMenuBasic";
+import notifications from "@/notifications";
 
 import { SettingsItem } from "./devices.$id.settings";
+
 const defaultEdid =
   "00ffffffffffff0052620188008888881c150103800000780a0dc9a05747982712484c00000001010101010101010101010101010101023a801871382d40582c4500c48e2100001e011d007251d01e206e285500c48e2100001e000000fc00543734392d6648443732300a20000000fd00147801ff1d000a202020202020017b";
 const edids = [
@@ -50,21 +51,27 @@ export default function SettingsVideoRoute() {
   const [streamQuality, setStreamQuality] = useState("1");
   const [customEdidValue, setCustomEdidValue] = useState<string | null>(null);
   const [edid, setEdid] = useState<string | null>(null);
+  const [edidLoading, setEdidLoading] = useState(false);
 
   // Video enhancement settings from store
   const {
-    videoSaturation, setVideoSaturation,
+    videoSaturation,
-    videoBrightness, setVideoBrightness,
+    setVideoSaturation,
-    videoContrast, setVideoContrast
+    videoBrightness,
+    setVideoBrightness,
+    videoContrast,
+    setVideoContrast,
   } = useSettingsStore();
 
   useEffect(() => {
+    setEdidLoading(true);
     send("getStreamQualityFactor", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) return;
       setStreamQuality(String(resp.result));
     });
 
     send("getEDID", {}, (resp: JsonRpcResponse) => {
+      setEdidLoading(false);
       if ("error" in resp) {
         notifications.error(`Failed to get EDID: ${resp.error.data || "Unknown error"}`);
         return;
@@ -89,28 +96,36 @@ export default function SettingsVideoRoute() {
   }, [send]);
 
   const handleStreamQualityChange = (factor: string) => {
-    send("setStreamQualityFactor", { factor: Number(factor) }, (resp: JsonRpcResponse) => {
+    send(
-      if ("error" in resp) {
+      "setStreamQualityFactor",
-        notifications.error(
+      { factor: Number(factor) },
-          `Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
+      (resp: JsonRpcResponse) => {
-        );
+        if ("error" in resp) {
-        return;
+          notifications.error(
-      }
+            `Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
+          );
+          return;
+        }
 
-      notifications.success(`Stream quality set to ${streamQualityOptions.find(x => x.value === factor)?.label}`);
+        notifications.success(
-      setStreamQuality(factor);
+          `Stream quality set to ${streamQualityOptions.find(x => x.value === factor)?.label}`,
-    });
+        );
+        setStreamQuality(factor);
+      },
+    );
   };
 
   const handleEDIDChange = (newEdid: string) => {
+    setEdidLoading(true);
     send("setEDID", { edid: newEdid }, (resp: JsonRpcResponse) => {
+      setEdidLoading(false);
       if ("error" in resp) {
         notifications.error(`Failed to set EDID: ${resp.error.data || "Unknown error"}`);
         return;
       }
 
       notifications.success(
-        `EDID set successfully to ${edids.find(x => x.value === newEdid)?.label}`,
+        `EDID set successfully to ${edids.find(x => x.value === newEdid)?.label ?? "the custom EDID"}`,
       );
       // Update the EDID value in the UI
       setEdid(newEdid);
@@ -158,7 +173,7 @@ export default function SettingsVideoRoute() {
                   step="0.1"
                   value={videoSaturation}
                   onChange={e => setVideoSaturation(parseFloat(e.target.value))}
-                  className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+                  className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
                 />
               </SettingsItem>
 
@@ -173,7 +188,7 @@ export default function SettingsVideoRoute() {
                   step="0.1"
                   value={videoBrightness}
                   onChange={e => setVideoBrightness(parseFloat(e.target.value))}
-                  className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+                  className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
                 />
               </SettingsItem>
 
@@ -188,7 +203,7 @@ export default function SettingsVideoRoute() {
                   step="0.1"
                   value={videoContrast}
                   onChange={e => setVideoContrast(parseFloat(e.target.value))}
-                  className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+                  className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
                 />
               </SettingsItem>
 
@@ -205,60 +220,64 @@ export default function SettingsVideoRoute() {
                 />
               </div>
             </div>
-
+            <Fieldset disabled={edidLoading} className="space-y-2">
-            <SettingsItem
+              <SettingsItem
-              title="EDID"
+                title="EDID"
-              description="Adjust the EDID settings for the display"
+                description="Adjust the EDID settings for the display"
-            >
+                loading={edidLoading}
-              <SelectMenuBasic
+              >
-                size="SM"
+                <SelectMenuBasic
-                label=""
+                  size="SM"
-                fullWidth
+                  label=""
-                value={customEdidValue ? "custom" : edid || "asd"}
+                  fullWidth
-                onChange={e => {
+                  value={customEdidValue ? "custom" : edid || "asd"}
-                  if (e.target.value === "custom") {
+                  onChange={e => {
-                    setEdid("custom");
+                    if (e.target.value === "custom") {
-                    setCustomEdidValue("");
+                      setEdid("custom");
-                  } else {
+                      setCustomEdidValue("");
-                    setCustomEdidValue(null);
+                    } else {
-                    handleEDIDChange(e.target.value as string);
-                  }
-                }}
-                options={[...edids, { value: "custom", label: "Custom" }]}
-              />
-            </SettingsItem>
-            {customEdidValue !== null && (
-              <>
-                <SettingsItem
-                  title="Custom EDID"
-                  description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments."
-                />
-                <TextAreaWithLabel
-                  label="EDID File"
-                  placeholder="00F..."
-                  rows={3}
-                  value={customEdidValue}
-                  onChange={e => setCustomEdidValue(e.target.value)}
-                />
-                <div className="flex justify-start gap-x-2">
-                  <Button
-                    size="SM"
-                    theme="primary"
-                    text="Set Custom EDID"
-                    onClick={() => handleEDIDChange(customEdidValue)}
-                  />
-                  <Button
-                    size="SM"
-                    theme="light"
-                    text="Restore to default"
-                    onClick={() => {
                       setCustomEdidValue(null);
-                      handleEDIDChange(defaultEdid);
+                      handleEDIDChange(e.target.value as string);
-                    }}
+                    }
+                  }}
+                  options={[...edids, { value: "custom", label: "Custom" }]}
+                />
+              </SettingsItem>
+              {customEdidValue !== null && (
+                <>
+                  <SettingsItem
+                    title="Custom EDID"
+                    description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments."
                   />
-                </div>
+                  <TextAreaWithLabel
-              </>
+                    label="EDID File"
-            )}
+                    placeholder="00F..."
+                    rows={3}
+                    value={customEdidValue}
+                    onChange={e => setCustomEdidValue(e.target.value)}
+                  />
+                  <div className="flex justify-start gap-x-2">
+                    <Button
+                      size="SM"
+                      theme="primary"
+                      text="Set Custom EDID"
+                      loading={edidLoading}
+                      onClick={() => handleEDIDChange(customEdidValue)}
+                    />
+                    <Button
+                      size="SM"
+                      theme="light"
+                      text="Restore to default"
+                      loading={edidLoading}
+                      onClick={() => {
+                        setCustomEdidValue(null);
+                        handleEDIDChange(defaultEdid);
+                      }}
+                    />
+                  </div>
+                </>
+              )}
+            </Fieldset>
           </div>
         </div>
       </div>

ui/src/routes/devices.$id.tsx

@@ -580,7 +580,7 @@ export default function KvmIdRoute() {
   const { setNetworkState} = useNetworkStateStore();
   const { setHdmiState } = useVideoStore();
   const { 
-    keyboardLedState,  setKeyboardLedState, setPasteModeEnabled,
+    keyboardLedState,  setKeyboardLedState,
     keysDownState, setKeysDownState, setUsbState,
   } = useHidStore();
 
@@ -598,12 +598,6 @@ export default function KvmIdRoute() {
       setUsbState(usbState);
     }
 
-    if (resp.method === "keyboardReportMultiState") {
-      const reportMultiState = resp.params as unknown as boolean;
-      console.debug("Setting keyboard report multi state", reportMultiState);
-      setPasteModeEnabled(reportMultiState);
-    }
-
     if (resp.method === "videoInputState") {
       const hdmiState = resp.params as Parameters<VideoState["setHdmiState"]>[0];
       console.debug("Setting HDMI state", hdmiState);

ui/src/utils.ts

@@ -94,6 +94,17 @@ export const formatters = {
   },
 };
 
+export function someIterable<T>(
+  iterable: Iterable<T>,
+  predicate: (item: T) => boolean,
+): boolean {
+  for (const item of iterable) {
+    if (predicate(item)) return true;
+  }
+
+  return false;
+}
+
 export const VIDEO = new Blob(
   [
     new Uint8Array([

web.go

@@ -200,7 +200,7 @@ func handleWebRTCSession(c *gin.Context) {
 	}
 
 	// Cancel any ongoing keyboard report multi when session changes
-	cancelKeyboardReportMulti()
+	cancelKeyboardMacro()
 
 	currentSession = session
 	c.JSON(http.StatusOK, gin.H{"sd": sd})

webrtc.go

@@ -267,7 +267,7 @@ func newSession(config SessionConfig) (*Session, error) {
 			scopedLogger.Debug().Msg("ICE Connection State is closed, unmounting virtual media")
 			if session == currentSession {
 				// Cancel any ongoing keyboard report multi when session closes
-				cancelKeyboardReportMulti()
+				cancelKeyboardMacro()
 				currentSession = nil
 			}
 			// Stop RPC processor