LocalStorage is Finite

[ryanmelt]

Describe the bug

Make sure we limit how much data is saved to localStorage everywhere we use localStorage.
Browsers usually limit this to 5MB.

Specifically script_runner__recent is one key. The CmdSender cmd history is probably another.

To Reproduce

Run lots of scripts to fill the local storage

Expected behavior

COSMOS prevents running out of localStorage by limiting amount saved.

Screenshots

No response

OS

No response

OpenC3 COSMOS Version

7.4.0

Browser

No response

[crawlchat]

Findings from the codebase

script_runner__recent (ScriptRunner.vue) is actually already bounded — addToRecent() caps the array at 8 entries before persisting:

this.recent.unshift(this.buildRecentEntry(filename))
if (this.recent.length > 8) {
  this.recent.pop()
}
this.persistRecent()

(ScriptRunner.vue lines 3259‑3270). So this key shouldn't grow unbounded in normal use — good to double check whether long filenames/paths could still be an issue, but count-wise it's capped.

command_sender__history (CommandSender.vue) is the real offender — it has no size limit at all. Every sent command is prepended to the Ace editor's full text buffer and the entire buffer is written to localStorage on every command:

// building the new command text
this.editor.setValue(value)   // value = msg + '\n' + this.history  (line ~697-703)
...
processCmdResponse() {
  this.history = this.editor.getValue()
  localStorage['command_sender__history'] = this.editor.getValue()   // line 737
}

There's no trimming of this.history by line count or byte size — it will grow forever until clearHistory() is manually called (line 750‑753).

Suggested fix

In processCmdResponse(), before assigning to localStorage, truncate this.history to a max number of lines (or bytes), e.g.:

processCmdResponse() {
  this.history = this.editor.getValue()
  const MAX_HISTORY_LINES = 1000 // or similar
  const lines = this.history.split('\n')
  if (lines.length > MAX_HISTORY_LINES) {
    this.history = lines.slice(0, MAX_HISTORY_LINES).join('\n')
    this.editor.setValue(this.history)
    this.editor.moveCursorTo(0, 0)
  }
  localStorage['command_sender__history'] = this.history
  this.sendDisabled = false
}

A more general fix would be a shared safeSetLocalStorage(key, value, maxBytes) helper used everywhere localStorage is written (CmdSender history, ScriptRunner recent, etc.) that truncates/rejects writes exceeding a byte budget and logs a warning — this would guard against future additions hitting the same issue, but I don't see such a helper currently in the codebase.

If there are other specific localStorage keys you've seen growing large in practice (besides these two), please list them so we can check those code paths too.

[jmthomas]

Customer reported the following dialog "Filed to open FILENAME due to QuotaExceededError : failed to set a named property 'script_runner__recent' on 'Storage': Setting the value of 'script_runner__recent' exceeded the quota."

[jmthomas]

Here's the way to output the localStorage keys that are using the most space: Object.entries(localStorage).map(([k,v])=>[k,v.length]).sort((a,b)=>b[1]-a[1]).slice(0,10)

As a single datapoint, running that on the LTS COSMOS instance results in:

0: (2) ['data_extractor__default', 1981]
1: (2) ['openc3Token', 1247]
2: (2) ['openc3RefreshToken', 661]
3: (2) ['script_runner__recent', 659]
4: (2) ['telemetry_grapher__default', 580]
5: (2) ['packet_viewer__default', 176]
6: (2) ['command_sender__history', 161]
7: (2) ['ackedAlerts', 145]
8: (2) ['grafana.dashboards.panelEdit.lastUsedDatasource', 62]
9: (2) ['notebooks__default', 52]