Feat: Create custom profiles and save them in browser storage. Filter serial data for chart and console.

[A-N-M-Noor]

feat: add settings profile management with browser storage

Add ability to save and load settings profiles to browser local-storage:

• Profile drop-down with Default and saved custom profiles
• Auto-detect when settings are modified:
  • Modifying Default switches to "Custom" with Save Profile button
  • Modifying saved profile shows Save (overwrite) and Save As buttons
• Confirmation dialog for destructive actions (delete/overwrite)
• Profile name tool-tips for long names with truncation
• Settings persist across browser sessions
• Profiles stored in local-storage (wsp.settings.profiles key)

feat: add bracket-based data filtering for chart and console

Add selective data routing with configurable filters:

• Lines enclosed in [brackets] can be filtered separately
• Chart filter: only plot [bracketed] lines when enabled
• Console filter: hide [bracketed] lines when enabled
• Both filters enabled by default
• Content extraction: [# temp, humidity] → parses as header
• Compatible with existing data formats (works with/without brackets)

Use case: Send both debug messages and chart data on same serial
connection - debug prints to console, sensor data to chart.

Filter settings persist in profiles and browser storage.

Screenshot

Summary

This fork can save settings to browser storage and can be re-used from a drop-down menu inside the settings panel. It makes maintaining multiple projects at a time easier.

Motivation & Context

I was using this with a project of mine, and I needed to set the Y-scale manually every time I used this tool. This felt a bit annoying. So I though that if I could save those settings to my browser's storage, it could become a totally plug-and-play tool for me. Being able to save multiple profiles would also let me easily switch between projects.

I also need to show regular debug info besides just charts. But sending normal text sometimes breaks the chart. And the console overflows with chart values that I can't see the debug texts there. Therefore I implemented a filter system as well.

Changes

A drop-down menu has been added in the settings panel. It starts with the 'Default' profile. Changing any parameter switches to 'Custom' profile and spawns a 'Save' button. Clicking on the Save button prompts for a name and saves it to the browser's storage. A profile can be deleted, edited, or saved as a new profile at any time.

The settings panel includes two check-boxes. One for removing regular texts from chart, another for removing chart values from the console.

How to Test

Profile system:

1. Open settings panel
2. Change any parameter
3. Click 'Save'
4. Enter the name for this profile
5. Use the drop-down to switch between profiles
6. Select a profile, click the cross icon to delete that profile
7. Change settings while a profile is selected, click 'Save' button to overwrite the saved profile with the changed values
8. Or, click 'Save as...' button to save the changed settings as a new profile

Filter system:

1. Firmware: Keep regular texts as is.
2. Firmware: Put values targeted for the chart in a pair of square brackets []
3. App: Select the two check-boxes in the settings panel (They are selected by default)

Checklist

• I ran npm run lint and fixed any issues
• I ran npm run typecheck (TypeScript) with no errors
• I ran npm test and tests pass
• I ran npm run test:coverage if code paths changed significantly
• I updated docs/README if needed
• No breaking changes without clear migration notes