Add serial console with 5-state machine for debugging and ZMK log detection

[Copilot]

Implements Web Serial API integration for keyboard debugging with intelligent state management and automatic ZMK log detection.

Implementation

Serial Console Component

• Configurable baud rate (9600-230400), message I/O with line buffering
• Regex-based line filtering and sed-style text replacement
• Real-time display with timestamps and auto-scroll
• Support for both Web Serial API and RpcTransport reuse

Draggable Window

• Floating, resizable console overlay with maximize/restore
• Built on Radix UI Dialog primitives for accessibility

5-State Machine

The application implements a precise state machine with 5 states:

• State A: No connection - shows splash screen
• State B: Only ZMK Studio connection - main app without Console tab
• State C: Only serial console - splash screen + draggable console window (from detected logs)
• State D: ZMK + Serial, Console tab active - console shown in tab
• State E: ZMK + Serial, other tab active - console shown as window

ZMK Integration & Transport Stealing

When attempting ZMK Studio connection from splash screen:

• If successful → State B
• If failed, reads connection data to detect ZMK log patterns (boot messages, timestamps, keywords)
• If logs detected → State C, reusing the RpcTransport for serial console instead of closing it
• If not logs → State A with error

Console Tab Behavior

• Console tab only appears when serial console has an active connection
• Not present in State B (ZMK-only connections)
• Dynamically added in States D and E

State Transitions

A → B: ZMK connection succeeds
A → C: ZMK connection fails with detected logs
B → D: User connects serial console
C → E: ZMK connection succeeds while serial active
D → E: User switches to other tab
E → D: User switches to Console tab

Screenshots

Debug Console Tab

Settings Panel

Console Tab in Navigation

Notes

• Requires Chromium-based browser for Web Serial API
• Serial console can operate independently or steal connection from failed ZMK attempts
• ZMK log detection uses pattern matching for boot messages, timestamps, and keywords
• All lint checks and tests passing (150 passed, 1 skipped)

Original prompt

Please implement serial console feature.
The feature supports connecting to web-serial with custom baud rate and shows text messages sent from it.
It also supports filtering lines with regex based keyword search, sed based word replacement.
It also supports sending text message.

As for relation to ZMK studio connection feature,

• When connecting to ZMK studio, if connection failed by unexpected reason, try falling back to serial console mode. Serial console should be shown as if draggable window in DYA studio and other features should not be interrupted.
• If connection to ZMK studio succeeded show new debug console tab. And if the tab is selected, prompt connection to device and show console in the tab.
  • If user selects other tab with active console connection, console should become draggable window.
  • If user selects console tab with active console connection, the existing console moves to within the tab.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[cormoran]

@copilot The UI sounds nice, but transitions are not expected.

There are 3 status:

• A: No connection
• B: Only zmk-studio protocol connection
• C: Only serial console connection
• D: zmk-studio protocol connection + serial console connection, console tab is active
• E: zmk-studio protocol connection + serial console connection, aother tab is active

In state A:

When connecting from splash screen,
if (successfully connect as zmk-studio protocol) -> go state B
else if (connection failed as zmk-studio protocol) {
try read texts from the connection. If the texts are likely ZMK's log, go state C with using the connection
}

In state B:

When user open Console tab and click connect, create new connection and goto state D

In state C:

Show serial console window and splash screen.
When new connection from splash screen, if successfully connect as zmk-studio protocol, goto E
If connection failed, keep C

In state D:

Show console in the tab.
If user select other tab, goto E.

In state E,

Show console as window.
if user select console tab, goto D.

To enable transition for state A, I think you have to somehow wrap RpcTransport returned from serial::connect to steal connection from react-zmk-studio library and the library never close the connection.

If serial console connection closed, just close serial window. No need to try re-connect in any case.

Finally please pass lint before submission, in addition to test.

[Copilot]

@copilot The UI sounds nice, but transitions are not expected.

There are 3 status:
...

I've completely redesigned the serial console feature to implement the 5-state machine (A-E) as requested:

Key changes implemented (commit ace90db):

1. State Machine: Proper A→B→D→E transitions with serial log detection on failed ZMK connections
2. Console Tab: Now only appears when serial console has an active connection (not in State B)
3. Transport Stealing: Failed ZMK connections are analyzed for log patterns. If detected, the RpcTransport is reused for serial console (State C)
4. Log Detection: Pattern matching for ZMK boot messages, timestamps, and keywords
5. Serial Console Window: Shown in States C and E as draggable overlay
6. Lint: All lint checks passing ✅
7. Tests: All 150 tests passing ✅

The log detection checks for patterns like *** Booting, [00:00:00.xxx,xxx], and keywords zmk, bluetooth, keyboard to determine if a failed connection is actually serial output.

[github-actions]

🚀 Cloudflare Workers Preview

Preview URL: https://feb2a9da-dya-studio.cormoran707.workers.dev

_{Deployed from commit c43db53}