Merge 1e2cee7060 into c8dd84c6b7

fix: performance issue of Uint8Array concat
fix: jsonrpc.go:1142:21: Error return value is not checked (errcheck)
2025-09-11 00:57:11 +00:00 · 2025-09-11 02:56:47 +02:00 · 2025-09-11 02:16:45 +02:00 · 2025-09-11 02:15:01 +02:00 · 2025-09-11 02:12:30 +02:00 · 2025-09-10 23:48:26 +02:00
25 changed files with 720 additions and 388 deletions
--- a/cloud.go
+++ b/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})
--- a/config.go
+++ b/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
 }

--- a/hidrpc.go
+++ b/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)
+}
--- a/internal/hidrpc/hidrpc.go
+++ b/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,
+	}
+}
--- a/internal/hidrpc/message.go
+++ b/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
+}
--- a/jiggler.go
+++ b/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) {
-	jigglerEnabled = enabled
+func rpcSetJigglerState(enabled bool) error {
+	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)
--- a/jsonrpc.go
+++ b/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 cancelKeyboardReportMulti() {
-// 	keyboardReportMultiLock.Lock()
-// 	defer keyboardReportMultiLock.Unlock()
+func setKeyboardMacroCancel(cancel context.CancelFunc) {
+	keyboardMacroLock.Lock()
+	defer keyboardMacroLock.Unlock()

-// 	if keyboardReportMultiCancel != nil {
-// 		keyboardReportMultiCancel()
-// 		logger.Info().Msg("canceled keyboard report multi")
-// 		keyboardReportMultiCancel = nil
-// 	}
-// }
+	keyboardMacroCancel = cancel
+}

-// func setKeyboardReportMultiCancel(cancel context.CancelFunc) {
-// 	keyboardReportMultiLock.Lock()
-// 	defer keyboardReportMultiLock.Unlock()
+func rpcExecuteKeyboardMacro(macro []hidrpc.KeyboardMacro) (usbgadget.KeysDownState, error) {
+	cancelKeyboardMacro()

-// 	keyboardReportMultiCancel = cancel
-// }
+	ctx, cancel := context.WithCancel(context.Background())
+	setKeyboardMacroCancel(cancel)

-// func rpcKeyboardReportMultiWrapper(macro []map[string]any) (usbgadget.KeysDownState, error) {
-// 	// cancelKeyboardReportMulti()
+	s := hidrpc.KeyboardMacroStateReport{
+		State:   true,
+		IsPaste: true,
+	}

-// 	// ctx, cancel := context.WithCancel(context.Background())
-// 	// setKeyboardReportMultiCancel(cancel)
+	if currentSession != nil {
+		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 (
-// 	keyboardReportMultiCancel context.CancelFunc
-// 	keyboardReportMultiLock   sync.Mutex
-// )
+var keyboardClearStateKeys = make([]byte, 6)

-// func rpcCancelKeyboardReportMulti() {
-// 	cancelKeyboardReportMulti()
-// }
+func isClearKeyStep(step hidrpc.KeyboardMacro) bool {
+	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},
-	"reboot":             {Func: rpcReboot, Params: []string{"force"}},
-	"getDeviceID":        {Func: rpcGetDeviceID},
-	"deregisterDevice":   {Func: rpcDeregisterDevice},
-	"getCloudState":      {Func: rpcGetCloudState},
-	"getNetworkState":    {Func: rpcGetNetworkState},
-	"getNetworkSettings": {Func: rpcGetNetworkSettings},
-	"setNetworkSettings": {Func: rpcSetNetworkSettings, Params: []string{"settings"}},
-	"renewDHCPLease":     {Func: rpcRenewDHCPLease},
-	"keyboardReport":     {Func: rpcKeyboardReport, Params: []string{"modifier", "keys"}},
-	// "keyboardReportMulti":       {Func: rpcKeyboardReportMultiWrapper, Params: []string{"macro"}},
-	// "cancelKeyboardReportMulti": {Func: rpcCancelKeyboardReportMulti},
+	"ping":                   {Func: rpcPing},
+	"reboot":                 {Func: rpcReboot, Params: []string{"force"}},
+	"getDeviceID":            {Func: rpcGetDeviceID},
+	"deregisterDevice":       {Func: rpcDeregisterDevice},
+	"getCloudState":          {Func: rpcGetCloudState},
+	"getNetworkState":        {Func: rpcGetNetworkState},
+	"getNetworkSettings":     {Func: rpcGetNetworkSettings},
+	"setNetworkSettings":     {Func: rpcSetNetworkSettings, Params: []string{"settings"}},
+	"renewDHCPLease":         {Func: rpcRenewDHCPLease},
+	"keyboardReport":         {Func: rpcKeyboardReport, Params: []string{"modifier", "keys"}},
 	"getKeyboardLedState":    {Func: rpcGetKeyboardLedState},
 	"keypressReport":         {Func: rpcKeypressReport, Params: []string{"key", "press"}},
 	"getKeyDownState":        {Func: rpcGetKeysDownState},
--- a/ui/src/components/CustomTooltip.tsx
+++ b/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="font-semibold">
+        <div className="px-2 py-1.5 text-black dark:text-white">
+          <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 >
-                {stat} {toolTipData?.unit}
+              <span className="text-[13px]">
+                {metric} {toolTipData?.unit}
              </span>
            </div>
          </div>
--- a/ui/src/components/Header.tsx
+++ b/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
--- a/ui/src/components/KvmCard.tsx
+++ b/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
-                as={Button}
-                theme="light"
-                TrailingIcon={LuEllipsisVertical}
-                size="MD"
-              ></MenuButton>
-            </div>
-
+            <MenuButton
+              as={Button}
+              theme="light"
+              TrailingIcon={LuEllipsisVertical}
+              size="MD"
+            ></MenuButton>
            <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"
--- a/ui/src/components/Metric.tsx
+++ b/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>
+  );
+}
--- a/ui/src/components/MetricsChart.tsx
+++ b/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}
--- a/ui/src/components/popovers/PasteModal.tsx
+++ b/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}-
--- a/ui/src/components/sidebar/connectionStats.tsx
+++ b/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>(
-  stream: Map<number, T>,
-  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,
-    };
-  });
-}
+import { createChartArray, Metric } from "../Metric";
+import { SettingsSectionHeader } from "../SettingsSectionHeader";

 export default function ConnectionStatsSidebar() {
  const { sidebarView, setSidebarView } = useUiStore();
  const {
-     mediaStream,
-     peerConnection,
-     inboundRtpStats,
-     appendInboundRtpStats,
-     candidatePairStats,
-     appendCandidatePairStats,
-     appendLocalCandidateStats,
-     appendRemoteCandidateStats,
-     appendDiskDataChannelStats,
+    mediaStream,
+    peerConnection,
+    inboundRtpStats: inboundVideoRtpStats,
+    appendInboundRtpStats: appendInboundVideoRtpStats,
+    candidatePairStats: iceCandidatePairStats,
+    appendCandidatePairStats,
+    appendLocalCandidateStats,
+    appendRemoteCandidateStats,
+    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") {
-          appendInboundRtpStats(report);
+        if (report.type === "inbound-rtp" && report.kind === "video") {
+          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-2">
-                <div>
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
-                    Packets Lost
-                  </h2>
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
-                    Number of data packets lost during transmission.
-                  </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>
-                    ) : isMetricSupported(inboundRtpStats, "packetsLost") ? (
-                      <StatChart
-                        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 className="space-y-8">
+              {/* Connection Group */}
+              <div className="space-y-3">
+                <SettingsSectionHeader
+                  title="Connection"
+                  description="The connection between the client and the JetKVM."
+                />
+                <Metric
+                  title="Round-Trip Time"
+                  description="Round-trip time for the active ICE candidate pair between peers."
+                  stream={iceCandidatePairStats}
+                  metric="currentRoundTripTime"
+                  map={x => ({
+                    date: x.date,
+                    metric: x.metric != null ? Math.round(x.metric * 1000) : null,
+                  })}
+                  domain={[0, 600]}
+                  unit=" ms"
+                />
              </div>
-              <div className="space-y-2">
-                <div>
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
-                    Round-Trip Time
-                  </h2>
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
-                    Time taken for data to travel from source to destination and back
-                  </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>
-                    ) : isMetricSupported(candidatePairStats, "currentRoundTripTime") ? (
-                      <StatChart
-                        data={createChartArray(
-                          candidatePairStats,
-                          "currentRoundTripTime",
-                        ).map(x => {
-                          return {
-                            date: x.date,
-                            stat: x.stat ? Math.round(x.stat * 1000) : null,
-                          };
-                        })}
-                        domain={[0, 600]}
-                        unit=" ms"
-                      />
-                    ) : (
-                      <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>
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
-                    Jitter
-                  </h2>
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
-                    Variation in packet delay, affecting video smoothness.{" "}
-                  </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, "jitter").map(x => {
-                          return {
-                            date: x.date,
-                            stat: x.stat ? Math.round(x.stat * 1000) : null,
-                          };
-                        })}
-                        domain={[0, 300]}
-                        unit=" ms"
-                      />
-                    )}
-                  </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>
+
+              {/* Video Group */}
+              <div className="space-y-3">
+                <SettingsSectionHeader
+                  title="Video"
+                  description="The video stream from the JetKVM to the client."
+                />
+
+                {/* RTP Jitter */}
+                <Metric
+                  title="Network Stability"
+                  badge="Jitter"
+                  badgeTheme="light"
+                  description="How steady the flow of inbound video packets is across the network."
+                  stream={inboundVideoRtpStats}
+                  metric="jitter"
+                  map={x => ({
+                    date: x.date,
+                    metric: x.metric != null ? Math.round(x.metric * 1000) : null,
+                  })}
+                  domain={[0, 10]}
+                  unit=" ms"
+                />
+
+                {/* Playback Delay */}
+                <Metric
+                  title="Playback Delay"
+                  description="Delay added by the jitter buffer to smooth playback when frames arrive unevenly."
+                  badge="Jitter Buffer Avg. Delay"
+                  badgeTheme="light"
+                  data={jitterBufferAvgDelayData}
+                  gate={inboundVideoRtpStats}
+                  supported={
+                    someIterable(
+                      inboundVideoRtpStats,
+                      ([, x]) => x.jitterBufferDelay != null,
+                    ) &&
+                    someIterable(
+                      inboundVideoRtpStats,
+                      ([, x]) => x.jitterBufferEmittedCount != null,
+                    )
+                  }
+                  domain={[0, 30]}
+                  unit=" ms"
+                />
+
+                {/* Packets Lost */}
+                <Metric
+                  title="Packets Lost"
+                  description="Count of lost inbound video RTP packets."
+                  stream={inboundVideoRtpStats}
+                  metric="packetsLost"
+                  domain={[0, 100]}
+                  unit=" packets"
+                />
+
+                {/* Frames Per Second */}
+                <Metric
+                  title="Frames per second"
+                  description="Number of inbound video frames displayed per second."
+                  stream={inboundVideoRtpStats}
+                  metric="framesPerSecond"
+                  domain={[0, 80]}
+                  unit=" fps"
+                />
              </div>
            </div>
          )}
--- a/ui/src/hooks/hidRpc.ts
+++ b/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 (const step of this.macro) {
+        for (let i = 0; i < this.length; i++) {
+            const step = this.steps[i];
            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 => {
--- a/ui/src/hooks/useHidRpc.ts
+++ b/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,
--- a/ui/src/hooks/useKeyboard.ts
+++ b/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({ ...MACRO_RESET_KEYBOARD_STATE, delay: 200 });
+        macro.push({ keys: keyValues, modifier: modifierMask, delay: 20 });
+        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 ("error" in resp) {
-        console.error(`Failed to cancel keyboard report multi`, resp.error);
-      }
-    });
-  }, [send]);
+    if (!rpcHidReady) return;
+    cancelOngoingKeyboardMacroHidRpc();
+  }, [rpcHidReady, cancelOngoingKeyboardMacroHidRpc]);

  // handleKeyPress is used to handle a key press or release event.
  // This function handle both key press and key release events.
--- a/ui/src/main.tsx
+++ b/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: [
        {
--- a/ui/src/routes/devices.$id.mount.tsx
+++ b/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",
-      url: "https://download.fedoraproject.org/pub/fedora/linux/releases/41/Workstation/x86_64/iso/Fedora-Workstation-Live-x86_64-41-1.4.iso",
+      name: "Fedora 42",
+      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,
    },
    {
--- a/ui/src/routes/devices.$id.settings.mouse.tsx
+++ b/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");
--- a/ui/src/routes/devices.$id.settings.video.tsx
+++ b/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 notifications from "../notifications";
-import { SelectMenuBasic } from "../components/SelectMenuBasic";
+import { SelectMenuBasic } from "@components/SelectMenuBasic";
+import Fieldset from "@components/Fieldset";
+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,
-    videoBrightness, setVideoBrightness,
-    videoContrast, setVideoContrast
+    videoSaturation,
+    setVideoSaturation,
+    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) => {
-      if ("error" in resp) {
-        notifications.error(
-          `Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
+    send(
+      "setStreamQualityFactor",
+      { factor: Number(factor) },
+      (resp: JsonRpcResponse) => {
+        if ("error" in resp) {
+          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}`);
-      setStreamQuality(factor);
-    });
+        notifications.success(
+          `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>
-
-            <SettingsItem
-              title="EDID"
-              description="Adjust the EDID settings for the display"
-            >
-              <SelectMenuBasic
-                size="SM"
-                label=""
-                fullWidth
-                value={customEdidValue ? "custom" : edid || "asd"}
-                onChange={e => {
-                  if (e.target.value === "custom") {
-                    setEdid("custom");
-                    setCustomEdidValue("");
-                  } else {
-                    setCustomEdidValue(null);
-                    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={() => {
+            <Fieldset disabled={edidLoading} className="space-y-2">
+              <SettingsItem
+                title="EDID"
+                description="Adjust the EDID settings for the display"
+                loading={edidLoading}
+              >
+                <SelectMenuBasic
+                  size="SM"
+                  label=""
+                  fullWidth
+                  value={customEdidValue ? "custom" : edid || "asd"}
+                  onChange={e => {
+                    if (e.target.value === "custom") {
+                      setEdid("custom");
+                      setCustomEdidValue("");
+                    } else {
                      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>
--- a/ui/src/routes/devices.$id.tsx
+++ b/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);
--- a/ui/src/utils.ts
+++ b/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([
--- a/web.go
+++ b/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})
--- a/webrtc.go
+++ b/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
Author	SHA1	Message	Date
Aveline	63333acd7e	Merge `1e2cee7060` into `c8dd84c6b7`	2025-09-11 00:57:11 +00:00
Siyuan Miao	1e2cee7060	fix: performance issue of Uint8Array concat	2025-09-11 02:56:47 +02:00
Siyuan Miao	a86b516f9a	fix: jsonrpc.go:1142:21: Error return value is not checked (errcheck)	2025-09-11 02:16:45 +02:00
Siyuan Miao	137d22b0b3	fix: use currentSession.reportHidRPCKeyboardMacroState	2025-09-11 02:15:01 +02:00
Siyuan Miao	d6de9668bd	chore: clear keysDownState	2025-09-11 02:12:30 +02:00
Siyuan Miao	a667aefc96	allow user to override delay	2025-09-10 23:48:26 +02:00
Siyuan Miao	7014560b41	feat: allow paste progress to be cancelled	2025-09-10 23:35:24 +02:00
Siyuan Miao	d7c8abbb11	add delay	2025-09-10 17:21:44 +02:00
Marc Brooks	c8dd84c6b7	fix/Jiggler settings not saving (#786 ) 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	2025-09-09 14:48:49 +02:00
Adam Shiervani	c98592a412	feat(ui): Enhance EDID settings with loading state (#691 ) * feat(ui): Enhance EDID settings with loading state and Fieldset component * fix(ui): Improve notifications and adjust styling in custom EDID component * fix(ui): specify JsonRpcResponse type	2025-09-08 11:38:49 +02:00
Marc Brooks	8fbad0112e	fix(ui): Don't render a button in a button (#782 ) Gets rid of warning at initial page load.	2025-09-08 11:06:08 +02:00
Claus Holst	8a90555fad	Update URL Mount entries for Ubuntu, Fedora and Arch Linux (#783 )	2025-09-08 11:02:46 +02:00
Adam Shiervani	a7db0e8408	Enhance connection stats sidebar (#748 ) * feat: add Metric component for data visualization * refactor: update ConnectionStatsSidebar to use Metric component for improved data visualization * feat: add someIterable utility function and update Metric components for consistent metric handling - Introduced `someIterable` function to check for the presence of a metric in an iterable. - Updated `CustomTooltip` and `Metric` components to use `metric` instead of `stat` for improved clarity. - Refactored `StatChart` to align with the new metric naming convention. * refactor: rename variable for clarity in Metric component * docs: add JSDoc comments to createChartArray function in Metric component for better documentation * feat: do an actual avg reference calc * feat: Dont collect stats without a video track * refactor: rename variables for clarity	2025-09-08 10:59:36 +02:00