handleResizeMouseDown(e, "s")}
+ />
+
handleResizeMouseDown(e, "w")}
+ />
+
handleResizeMouseDown(e, "e")}
+ />
+
+ )}
+
+ );
+}
diff --git a/src/components/SerialConsole.tsx b/src/components/SerialConsole.tsx
new file mode 100644
index 0000000..d915af7
--- /dev/null
+++ b/src/components/SerialConsole.tsx
@@ -0,0 +1,306 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import {
+ IconTerminal,
+ IconSend,
+ IconFilter,
+ IconClearAll,
+ IconX,
+ IconSettings,
+} from "@tabler/icons-react";
+import { useSerialPort } from "../hooks/useSerialPort";
+import type { SerialPortConfig } from "../hooks/useSerialPort";
+
+interface SerialConsoleProps {
+ consoleId: string;
+ onClose?: () => void;
+ isSnapped?: boolean;
+ onSnapOut?: () => void;
+}
+
+export function SerialConsole({
+ consoleId,
+ onClose,
+ isSnapped = false,
+ onSnapOut,
+}: SerialConsoleProps) {
+ const {
+ isConnected,
+ isConnecting,
+ error,
+ connect,
+ disconnect,
+ sendData,
+ receivedData,
+ clearData,
+ } = useSerialPort();
+
+ const [showConfig, setShowConfig] = useState(!isConnected);
+ const [baudRate, setBaudRate] = useState("115200");
+ const [inputText, setInputText] = useState("");
+ const [filterRegex, setFilterRegex] = useState("");
+ const [replacePattern, setReplacePattern] = useState("");
+ const [replaceWith, setReplaceWith] = useState("");
+ const [showFilters, setShowFilters] = useState(false);
+
+ const terminalRef = useRef
(null);
+
+ // Auto-scroll to bottom when new data arrives
+ useEffect(() => {
+ if (terminalRef.current) {
+ terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+ }
+ }, [receivedData]);
+
+ const handleConnect = useCallback(async () => {
+ const config: SerialPortConfig = {
+ baudRate: parseInt(baudRate, 10),
+ };
+ await connect(config);
+ setShowConfig(false);
+ }, [connect, baudRate]);
+
+ const handleDisconnect = useCallback(async () => {
+ await disconnect();
+ setShowConfig(true);
+ }, [disconnect]);
+
+ const handleSend = useCallback(async () => {
+ if (!inputText.trim()) return;
+ try {
+ await sendData(inputText + "\n");
+ setInputText("");
+ } catch (err) {
+ console.error("Failed to send:", err);
+ }
+ }, [inputText, sendData]);
+
+ const handleKeyPress = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleSend();
+ }
+ },
+ [handleSend],
+ );
+
+ // Apply filtering and replacement
+ const processedData = useMemo(() => {
+ let lines = receivedData.split("\n");
+
+ // Apply regex filter
+ if (filterRegex.trim()) {
+ try {
+ const regex = new RegExp(filterRegex, "i");
+ lines = lines.filter((line) => regex.test(line));
+ } catch {
+ // Invalid regex, skip filtering
+ }
+ }
+
+ // Apply sed-style replacement
+ if (replacePattern.trim() && replaceWith !== undefined) {
+ try {
+ const regex = new RegExp(replacePattern, "g");
+ lines = lines.map((line) => line.replace(regex, replaceWith));
+ } catch {
+ // Invalid regex, skip replacement
+ }
+ }
+
+ return lines.join("\n");
+ }, [receivedData, filterRegex, replacePattern, replaceWith]);
+
+ return (
+
+ {/* Header */}
+
+
+
+
+ Console {consoleId}
+
+ {isConnected && (
+
+ )}
+
+
+
+
+ {isSnapped && onSnapOut && (
+
+ )}
+ {onClose && (
+
+ )}
+
+
+
+ {/* Filters Panel */}
+ {showFilters && (
+
+ )}
+
+ {/* Configuration Panel */}
+ {showConfig && (
+
+
+
+
+
+
+
+ Serial Port Configuration
+
+
+
+
+
+
+
+
+
+
+
+ {onClose && (
+
+ )}
+
+
+ {error && (
+
+ )}
+
+
+
+ )}
+
+ {/* Terminal Display */}
+ {!showConfig && isConnected && (
+ <>
+
+ {processedData}
+
+
+ {/* Input Area */}
+
+ setInputText(e.target.value)}
+ onKeyPress={handleKeyPress}
+ placeholder="Type message and press Enter..."
+ className="flex-1 input-field text-sm"
+ />
+
+
+
+
+ )}
+
+
+ {/* Header */}
+
+
+
+
+
+
+
+ Serial Console
+
+
+ Connect and monitor multiple serial devices
+
+
+
+
+
+
+ {/* Console Container */}
+
+ {/* Snap Preview Overlays */}
+ {draggedConsoleId && snapPreview && (
+
+ )}
+
+ {/* Snapped Consoles */}
+ {snappedConsoles.map((console) => (
+
+ removeConsole(console.id)}
+ isSnapped={true}
+ onSnapOut={() => snapOut(console.id)}
+ />
+
+ ))}
+
+ {/* Floating Windows */}
+ {floatingConsoles.map((console) => (
+
handlePositionChange(console.id, pos)}
+ onDragStart={() => handleDragStart(console.id)}
+ onDragEnd={(pos) => handleDragEnd(console.id, pos)}
+ zIndex={console.zIndex}
+ onFocus={() => bringToFront(console.id)}
+ >
+ removeConsole(console.id)}
+ />
+
+ ))}
+
+ {/* Empty State */}
+ {consoles.length === 0 && (
+
+
+
+
+ No console connections
+
+
+
+
+ )}
+
+
+ {/* Info Box */}
+
+
+ Drag console windows to the edges to snap them into place. Multiple
+ consoles can share the same snap area.
+
+
+
+
))}
From b64796252a434ee3cf60a46d10ad668f7130b3c4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 4 Feb 2026 16:05:32 +0000
Subject: [PATCH 5/8] Add ZMK Studio connection fallback to serial console
- Modified DeviceConnection to support fallback to serial console
- Added onConnectWithFallback method with timeout
- Updated SplashScreen to use fallback connection
- Created reusableSerial transport wrapper (not yet in use)
- When ZMK connection fails, automatically opens serial console
Co-authored-by: cormoran <7994064+cormoran@users.noreply.github.com>
---
src/App.tsx | 1 +
src/components/DeviceConnection.tsx | 40 ++++++-
src/components/SplashScreen.tsx | 14 ++-
src/contexts/ConsoleContext.tsx | 22 ++++
src/lib/transport/reusableSerial.ts | 155 ++++++++++++++++++++++++++++
5 files changed, 229 insertions(+), 3 deletions(-)
create mode 100644 src/lib/transport/reusableSerial.ts
diff --git a/src/App.tsx b/src/App.tsx
index 0e28880..5c784ac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -118,6 +118,7 @@ function AppContent() {
>
diff --git a/src/components/DeviceConnection.tsx b/src/components/DeviceConnection.tsx
index 6f5427c..cd4cac7 100644
--- a/src/components/DeviceConnection.tsx
+++ b/src/components/DeviceConnection.tsx
@@ -1,9 +1,10 @@
import type { ReactNode } from "react";
-import { createContext, useCallback } from "react";
+import { createContext, useCallback, useContext } from "react";
import { useZMKApp, ZMKAppContext } from "@cormoran/zmk-studio-react-hook";
import { connect as connectSerial } from "@zmkfirmware/zmk-studio-ts-client/transport/serial";
import { connect as connectBLE } from "@zmkfirmware/zmk-studio-ts-client/transport/gatt";
import { connect as connectDemo } from "../lib/transport/demo";
+import { ConsoleContext } from "../contexts/ConsoleContext";
export type ConnectionMethod = "serial" | "ble" | "demo";
@@ -15,6 +16,7 @@ interface ConnectionContextValue {
onDisconnect: () => void;
isLoading: boolean;
error: string | null;
+ onConnectWithFallback: (method: ConnectionMethod) => Promise
;
}
const ConnectionContext = createContext({
@@ -24,6 +26,7 @@ const ConnectionContext = createContext({
onDisconnect: () => {},
isLoading: false,
error: null,
+ onConnectWithFallback: async () => false,
});
interface DeviceConnectionProviderProps {
@@ -34,6 +37,7 @@ export function DeviceConnectionProvider({
children,
}: DeviceConnectionProviderProps) {
const zmkApp = useZMKApp();
+ const consoleContext = useContext(ConsoleContext);
const handleConnect = useCallback(
async (method: ConnectionMethod) => {
@@ -50,6 +54,39 @@ export function DeviceConnectionProvider({
[zmkApp],
);
+ // Connect with fallback to serial console if ZMK connection fails
+ const handleConnectWithFallback = useCallback(
+ async (method: ConnectionMethod): Promise => {
+ if (method !== "serial") {
+ // Non-serial connections don't have fallback
+ await handleConnect(method);
+ return true;
+ }
+
+ try {
+ // Try ZMK connection with timeout
+ const connectPromise = handleConnect(method);
+ const timeoutPromise = new Promise((_, reject) => {
+ setTimeout(() => reject(new Error("Connection timeout")), 5000);
+ });
+
+ await Promise.race([connectPromise, timeoutPromise]);
+ return true;
+ } catch {
+ // ZMK connection failed, fallback to serial console
+ console.log("ZMK connection failed, opening serial console...");
+
+ // Add a serial console (user will need to select port again)
+ if (consoleContext) {
+ consoleContext.addConsole();
+ }
+
+ return false;
+ }
+ },
+ [handleConnect, consoleContext],
+ );
+
const handleDisconnect = useCallback(() => {
zmkApp.disconnect();
}, [zmkApp]);
@@ -61,6 +98,7 @@ export function DeviceConnectionProvider({
onDisconnect: handleDisconnect,
isLoading: zmkApp.state.isLoading,
error: zmkApp.state.error,
+ onConnectWithFallback: handleConnectWithFallback,
};
return (
diff --git a/src/components/SplashScreen.tsx b/src/components/SplashScreen.tsx
index 541186d..dbd9685 100644
--- a/src/components/SplashScreen.tsx
+++ b/src/components/SplashScreen.tsx
@@ -1,11 +1,12 @@
import { motion } from "framer-motion";
import { IconBluetooth, IconUsb, IconDeviceDesktop } from "@tabler/icons-react";
-import { useMemo } from "react";
+import { useMemo, useCallback } from "react";
import DyaLogo from "../assets/dya.svg?react";
import type { ConnectionMethod } from "./DeviceConnection";
interface SplashScreenProps {
onConnect: (method: ConnectionMethod) => void;
+ onConnectWithFallback?: (method: ConnectionMethod) => Promise;
isConnecting: boolean;
error: string | null;
}
@@ -21,6 +22,7 @@ function DisabledSlash({ color }: { color: string }) {
export function SplashScreen({
onConnect,
+ onConnectWithFallback,
isConnecting,
error,
}: SplashScreenProps) {
@@ -28,6 +30,14 @@ export function SplashScreen({
const isSerialAvailable = useMemo(() => "serial" in navigator, []);
const isBLEAvailable = useMemo(() => "bluetooth" in navigator, []);
+ const handleSerialConnect = useCallback(async () => {
+ if (onConnectWithFallback) {
+ await onConnectWithFallback("serial");
+ } else {
+ onConnect("serial");
+ }
+ }, [onConnect, onConnectWithFallback]);
+
return (