FoBE Device Monitor (VS Code Extension)

A VS Code device monitor for Zephyr ZUI desktop: connects to a device over a serial port, periodically captures the OLED framebuffer and renders it in a VS Code sidebar webview, and provides a small control pad to inject input back to the device.

Features

• Serial connect/disconnect (pick a port from the UI)
• Periodic capture: sends zui dump, parses the device DUMP_* protocol, renders OLED frames live
• Key injection: sends zui key <key> <action> (supports short / long / press / release)
• Serial terminal (VS Code integrated terminal): interact with the Zephyr shell; auto-capture pauses while you type, and resumes after you press Enter
• Output panel: forwards device logs to a VS Code Output Channel (filters DUMP_* and shell command echoes)

Quick Start

1. Open this project in VS Code (or install a packaged VSIX).
2. Open the Device Monitor:
   • Command Palette: FoBE: Open Device Monitor
   • Or Activity Bar: FoBE Device Monitor → Device Monitor
3. Click the power button on the right side of the view:
   • Pick a serial port (enumerated via serialport)
   • Default baud rate: 115200
4. After connecting, the extension starts a capture loop (currently ~every 200ms it sends zui dump).
5. Use the on-screen pad (Up/Down/Left/Right/OK/Back) to inject input:
   • Short press: zui key <key> short
   • Long press (>= 550ms): zui key <key> long
6. Click the top-right “list” icon to open the Output panel: FoBE Device Monitor.

VS Code Commands

• FoBE: Open Device Monitor (fobe.deviceMonitor.open)
• FoBE: Send Shell Command (fobe.deviceMonitor.sendCommand)
• FoBE: Show Device Monitor Output (fobe.deviceMonitor.showOutput)
• FoBE: Open Serial Terminal (fobe.deviceMonitor.openSerialTerminal)
• FoBE: Serial Interrupt (Ctrl+C) (fobe.deviceMonitor.serialInterrupt)
• FoBE: Capture OLED Once (fobe.deviceMonitor.captureOnce)

Device Protocol (OLED dump)

The extension sends a capture command over Zephyr shell (default: zui dump) and expects a line-based protocol like:

DUMP_DISP <W> <H> ... [BUF <SIZE>] ... [ORI <N>] ... [SEQ <N>]
DUMP <hex...>
DUMP <hex...>
...
DUMP_END

Notes:

• The DUMP_DISP line provides W/H. If present, BUF <SIZE> is used as the expected byte count (otherwise W*H/8 is used).
• DUMP lines can span multiple lines; they are concatenated into a single hex string of SIZE bytes.
• When DUMP_END arrives, the frame is considered complete and is rendered.
• ORI/SEQ are optional and passed through for debugging; they do not affect rendering.

Development & Build

Requires: VS Code ^1.90.0, Node.js + npm.

Common scripts:

npm install

# Build: extension host (tsc) + webview (esbuild bundle to media/)
npm run build

# Dev: watch builds
npm run watch

# Package VSIX
npm run package

# Lint
npm run lint

Debug (recommended):

• Open this repo in VS Code
• Run/Debug: Run Extension (.vscode/launch.json)
• In the Extension Development Host, run: FoBE: Open Device Monitor

Troubleshooting

• serialport fails to load (commonly a native module ABI mismatch with VS Code’s embedded Node/Electron):
  • The extension loads it lazily so the UI can still boot, but listing/connecting ports will fail
  • Typically you need to rebuild/reinstall serialport for your current VS Code runtime (e.g. reinstall deps in this folder, then rebuild)
• Connected but no image:
  • Ensure your device shell supports and can execute zui dump
  • Ensure the device output includes DUMP_DISP / DUMP ... / DUMP_END
• No logs in Output:
  • The extension filters DUMP_* and shell echoes; verify your logs are not matching the filter rules

License

See LICENSE (proprietary/confidential, all rights reserved). This repo is marked private: true in package.json and is not intended for public release.