feat: Improved serial flasher by hhvrc · Pull Request #183 · OpenShock/Frontend

hhvrc · 2026-04-01T05:52:35Z

Summary

Add a persistent serial terminal panel with ANSI-colored output, command input with history, and auto-scroll
Parse OpenShock ([uptimeMs][LEVEL][tag]) and ESP-IDF (LEVEL (uptimeMs) TAG:) log formats to color output by log level and display device uptime
Rework flashtool UI into a guided 4-step wizard (Connect → Channel → Board → Flash)
Refactor FlashManager to connect in application mode first, entering bootloader lazily only when flashing
Scope FlashManager lifecycle to the component via FlashContext

Details

SerialTerminal: new component with 5000-line buffer, copy/clear/reset controls, and monospace rendering of parsed ANSI SGR sequences
ansi.ts: lightweight ANSI parser + log line parser that extracts log level, device uptime, and source tag from serial output
FlashManager: application-mode connect with serial read loop, proper reader/writer lock cleanup on loop exit, and explicit return from ensureApplication()
Stepper UX: step confirmation now tracks both channel and version, step buttons have aria-labels for accessibility

Resolve conflicts: keep stepper UI and ANSI terminal from branch, adopt lucide v1 icon names from develop. Fix lint errors in SerialTerminal (unused import, bare expression, missing each keys). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Resolve conflicts in flashtool: keep stepper UI and ANSI terminal from feature branch, adopt scoped serial/flash lifecycle contexts from develop. Update FlashContext to use ConnectApplication. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

cloudflare-workers-and-pages · 2026-04-01T05:53:02Z

Deploying openshockapp with Cloudflare Pages

Latest commit:	`350330b`
Status:	✅ Deploy successful!
Preview URL:	https://d4967096.openshockapp.pages.dev
Branch Preview URL:	https://feature-improved-serial-flas.openshockapp.pages.dev

View logs

Copilot

Pull request overview

Adds an improved serial console experience to the flashtool page, including ANSI-colored output rendering and a persistent terminal panel, while adjusting FlashManager to support connecting in “application mode” first and entering bootloader mode lazily.

Changes:

Introduces a new SerialTerminal component with command history, auto-scroll, and line capping for display.
Adds a lightweight ANSI SGR parser to render colored/styled serial output.
Refactors FlashManager connection flow to support ConnectApplication() and starts an application serial read loop on connect.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`src/routes/flashtool/SerialTerminal.svelte`	New terminal UI component rendering segmented ANSI output and command input.
`src/routes/flashtool/FlashManager.ts`	Adds application-mode connect/read-loop path and bootloader connect rename.
`src/routes/flashtool/flash-context.svelte.ts`	Switches connect flow to `ConnectApplication()`.
`src/routes/flashtool/ansi.ts`	New ANSI parser/stripper for styled terminal output.
`src/routes/flashtool/+page.svelte`	Reworks UI into a stepper flow and integrates persistent terminal + ANSI parsing.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/routes/flashtool/FlashManager.ts

src/routes/flashtool/+page.svelte

src/routes/flashtool/SerialTerminal.svelte

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-01T09:26:49Z

src/routes/flashtool/FlashManager.ts

  async ensureBootloader(forceReset?: boolean) {
    if (!this.serialPort) return false;
    if (this.loader && !forceReset) return true;

    const serialPort = await this._cycleTransport();

    const loader = await setupESPLoader(serialPort, this.terminal);
    if (loader) {
      // success (if a failure occurs we're left disconnected)
      this.serialPort = serialPort;
      this.loader = loader;
      this.chip = loader.chip.CHIP_NAME;
    }
  }


ensureBootloader returns false/true in the early branches but has no return statement after attempting setupESPLoader(). That makes the resolved value undefined on the success/failure path and hides whether entering bootloader actually worked (and on failure leaves the instance in the disconnected state after _cycleTransport()). Return an explicit boolean (e.g., true when loader is set, otherwise false) and consider restoring/handling the disconnected state on failure so callers can react appropriately.

Copilot · 2026-04-01T09:26:49Z

src/routes/flashtool/SerialTerminal.svelte

+  async function copyOutput() {
+    const text = lines.map((l) => stripAnsi(l.text)).join('\n');
+    await navigator.clipboard.writeText(text);
+    copied = true;
+    clearTimeout(copyTimeout);
+    copyTimeout = setTimeout(() => (copied = false), 2000);
+  }


copyOutput() assumes navigator.clipboard.writeText will always succeed. In practice it can throw/reject (permission denied, insecure context, clipboard API unavailable), which would create an unhandled rejection and leave the UI in a confusing state. Wrap the clipboard call in try/catch and surface a failure state (or at least avoid toggling copied when the write fails).

Copilot · 2026-04-01T09:26:50Z

src/routes/flashtool/SerialTerminal.svelte

+  let copyTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  async function copyOutput() {
+    const text = lines.map((l) => stripAnsi(l.text)).join('\n');


copyOutput() copies from lines, but the UI renders visibleLines (capped to MAX_LINES). If the parent ever passes more than MAX_LINES, the copied output will include lines the user can’t see and could be unexpectedly large. Consider copying from visibleLines (or explicitly documenting that copy includes the full backlog).

Suggested change

const text = lines.map((l) => stripAnsi(l.text)).join('\n');

const text = visibleLines.map((l) => stripAnsi(l.text)).join('\n');

Copilot · 2026-04-01T09:26:50Z

src/routes/flashtool/+page.svelte

    writeLine: (data: string) => {
-      terminalText += data + '\n';
+      const newLines = [...terminalLines, makeTerminalLine(data)];
+      terminalLines = newLines.length > MAX_LINES ? newLines.slice(-MAX_LINES) : newLines;
    },
    write: (data: string) => {
-      terminalText += data;
+      if (terminalLines.length > 0) {
+        const last = terminalLines[terminalLines.length - 1];
+        const newText = last.text + data;
+        const parsed = parseLogLine(newText);
+        terminalLines = [
+          ...terminalLines.slice(0, -1),
+          {
+            ...last,
+            text: newText,
+            segments: parseAnsi(newText),
+            logLevel: parsed?.logLevel ?? null,
+            deviceUptime: parsed?.deviceUptime ?? null,
+            logTag: parsed?.tag ?? null,
+          },
+        ];
+      } else {


Terminal output updates clone/slice the entire terminalLines array on every writeLine/write call. With high-rate serial logs this becomes O(n) per chunk and can noticeably degrade UI responsiveness even with MAX_LINES = 5000. Prefer mutating the $state array in-place (and trimming in-place), or use a ring buffer approach to avoid allocating/copying thousands of entries per incoming line.

hhvrc and others added 3 commits March 23, 2026 00:05

Initial improvements

ef8ada9

hhvrc self-assigned this Apr 1, 2026

Copilot AI review requested due to automatic review settings April 1, 2026 05:52

Copilot started reviewing on behalf of hhvrc April 1, 2026 05:53 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

hhvrc added 2 commits April 1, 2026 11:02

Address PR comments and add more colors

195fed0

Format stuff

350330b

hhvrc requested a review from Copilot April 1, 2026 09:21

Copilot started reviewing on behalf of hhvrc April 1, 2026 09:22 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Improved serial flasher#183

feat: Improved serial flasher#183
hhvrc wants to merge 5 commits intodevelopfrom
feature/improved-serial-flasher

hhvrc commented Apr 1, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages bot commented Apr 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	const text = lines.map((l) => stripAnsi(l.text)).join('\n');
	const text = visibleLines.map((l) => stripAnsi(l.text)).join('\n');

Conversation

hhvrc commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Details

Uh oh!

cloudflare-workers-and-pages bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying openshockapp with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

hhvrc commented Apr 1, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 1, 2026 •

edited

Loading