# mabbott2011/skl-webconsole architecture

> Architecture diagram of the GitHub repository mabbott2011/skl-webconsole, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mabbott2011/skl-webconsole
- Repository: https://github.com/mabbott2011/skl-webconsole

## Overview

SKLWebConsole is an ESP32 browser-based serial console. Firmware prints through the library; the console numbers and broadcasts complete lines, while retaining recent output for browser replay. Users view and filter logs in the browser and send commands back to firmware handlers. The README documents additional browser features, including quick commands, download/copy, and pause/resume. The sampled C++ excerpts show setup, buffering, authorization, and WebSocket handling; browser-side behavior is described in the README, so its internal implementation is not inferred.

Main entry points: [`src/SKLWebConsole.cpp`](https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.cpp) (WebSocket transport), [`src/SKLWebConsole.h`](https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.h) (WebConsole API), [`page/console.html`](https://github.com/mabbott2011/skl-webconsole/blob/main/page/console.html) (Console interface), [`src/SKLWebConsolePage.h`](https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsolePage.h) (Embedded page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_firmware["Firmware integration"]
  node_device_app["Firmware application"]
  node_message_handler["Command handler"]
end

subgraph group_runtime["Console runtime"]
  node_console_api["WebConsole API<br/>[SKLWebConsole.h]"]
  node_line_pipeline["Line assembly<br/>[SKLWebConsole.cpp]"]
  node_history[("Replay buffer<br/>[SKLWebConsole.cpp]")]
  node_websocket["WebSocket transport<br/>[SKLWebConsole.cpp]"]
  node_http_routes["Page and auth routes<br/>[SKLWebConsole.cpp]"]
  node_embedded_page["Embedded page"]
end

subgraph group_web["Browser console"]
  node_browser_ui["Console interface<br/>[console.html]"]
end

node_async_server["Async web server"]
node_browser(("Browser user"))
node_custom_auth["Custom auth check"]

node_device_app -->|"prints to"| node_console_api
node_console_api -->|"assembles lines"| node_line_pipeline
node_line_pipeline -->|"appends lines"| node_history
node_line_pipeline -->|"broadcasts lines"| node_websocket
node_history -->|"replays history"| node_websocket
node_console_api -->|"registers routes"| node_http_routes
node_console_api -->|"registers socket"| node_websocket
node_http_routes -->|"registers with"| node_async_server
node_websocket -->|"uses"| node_async_server
node_http_routes -->|"serves page"| node_embedded_page
node_browser -->|"opens console"| node_http_routes
node_browser -->|"connects and sends"| node_websocket
node_websocket -->|"streams logs"| node_browser_ui
node_browser_ui -->|"shows controls"| node_browser
node_websocket -->|"dispatches commands"| node_message_handler
node_message_handler -->|"may print replies"| node_console_api
node_console_api -->|"invokes check"| node_custom_auth

click node_console_api "https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.h"
click node_line_pipeline "https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.cpp"
click node_history "https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.cpp"
click node_websocket "https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.cpp"
click node_http_routes "https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.cpp"
click node_embedded_page "https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsolePage.h"
click node_browser_ui "https://github.com/mabbott2011/skl-webconsole/blob/main/page/console.html"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_device_app,node_message_handler,node_browser toneBlue
class node_console_api,node_line_pipeline,node_history,node_websocket,node_http_routes,node_embedded_page toneAmber
class node_browser_ui,node_async_server toneMint
class node_custom_auth toneIndigo
```

## Components

### Firmware integration

- **Firmware application**
- **Command handler**

### Console runtime

- [WebConsole API](https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.h): `src/SKLWebConsole.h`
- [Line assembly](https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.cpp): `src/SKLWebConsole.cpp`
- [Replay buffer](https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.cpp): `src/SKLWebConsole.cpp`
- [WebSocket transport](https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.cpp): `src/SKLWebConsole.cpp`
- [Page and auth routes](https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsole.cpp): `src/SKLWebConsole.cpp`
- [Embedded page](https://github.com/mabbott2011/skl-webconsole/blob/main/src/SKLWebConsolePage.h): `src/SKLWebConsolePage.h`

### Browser console

- [Console interface](https://github.com/mabbott2011/skl-webconsole/blob/main/page/console.html): `page/console.html`

### Other components

- **Async web server**
- **Browser user**
- **Custom auth check**

## Connections

- Firmware application → WebConsole API: prints to (evidence: `README.md`)
- WebConsole API → Line assembly: assembles lines (evidence: `src/SKLWebConsole.cpp`)
- Line assembly → Replay buffer: appends lines (evidence: `src/SKLWebConsole.cpp`)
- Line assembly → WebSocket transport: broadcasts lines (evidence: `src/SKLWebConsole.cpp`)
- Replay buffer → WebSocket transport: replays history (evidence: `src/SKLWebConsole.cpp`)
- WebConsole API → Page and auth routes: registers routes (evidence: `src/SKLWebConsole.cpp`)
- WebConsole API → WebSocket transport: registers socket (evidence: `src/SKLWebConsole.cpp`)
- Page and auth routes → Async web server: registers with (evidence: `src/SKLWebConsole.cpp`)
- WebSocket transport → Async web server: uses (evidence: `src/SKLWebConsole.cpp`)
- Page and auth routes → Embedded page: serves page (evidence: `src/SKLWebConsole.cpp`)
- Browser user → Page and auth routes: opens console (evidence: `README.md`)
- Browser user → WebSocket transport: connects and sends (evidence: `README.md`)
- WebSocket transport → Console interface: streams logs (evidence: `README.md`)
- Console interface → Browser user: shows controls (evidence: `README.md`)
- WebSocket transport → Command handler: dispatches commands (evidence: `src/SKLWebConsole.cpp`)
- Command handler → WebConsole API: may print replies (evidence: `README.md`)
- WebConsole API → Custom auth check: invokes check