feat: add custom WebSocket message grouping controls

[948049716]

Adds custom WebSocket message grouping in the message details view. Users can group messages by any JSON field, optionally filter to a specific field value, choose how groups are sorted, and display an additional custom field next to each group title when available.

---

Summary by cubic

Adds custom WebSocket message grouping in Message Details to quickly organize traffic. Users can group by any JSON field, filter by a specific value, choose sorting, and show an extra display field on group headers.

• New Features
  • Group by any JSON field (supports dot-paths); optional exact value filter with smart extraction from parsed JSON or raw text.
  • Sorting modes: first sent, first message, latest message, group value, or message count.
  • Optional display field summary shown next to each group title (de-duplicated, truncated).
  • Collapsible group headers with counts; automatic “Other messages” and “No {{field}}” sections.
  • New controls in the toolbar: enable toggle, Field, Value, Display inputs, and Sort select.
  • i18n: added grouping strings and language names across en, en-us, zh_CN, zh-cn, zh-tw, ja, de, fr, ko, plus key mappings.

^{Written for commit 70a3a64. Summary will update on new commits. Review in cubic}

[cubic-dev-ai]

1 issue found across 12 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/components/MessageDetails.jsx">

<violation number="1" location="src/components/MessageDetails.jsx:464">
P2: Per-render JSON parsing and regex scanning in grouping logic causes redundant expensive work on every keystroke and render. `getMessageSections()` iterates all messages and calls `extractGroupValues()` which `JSON.parse`s payloads and runs regexes. This repeats on every render (and every keystroke in the grouping inputs with no debounce) causing O(n * parse/regex) cost that can jank the UI with large message histories.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

P2: Per-render JSON parsing and regex scanning in grouping logic causes redundant expensive work on every keystroke and render. getMessageSections() iterates all messages and calls extractGroupValues() which JSON.parses payloads and runs regexes. This repeats on every render (and every keystroke in the grouping inputs with no debounce) causing O(n * parse/regex) cost that can jank the UI with large message histories.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At src/components/MessageDetails.jsx, line 464:

<comment>Per-render JSON parsing and regex scanning in grouping logic causes redundant expensive work on every keystroke and render. `getMessageSections()` iterates all messages and calls `extractGroupValues()` which `JSON.parse`s payloads and runs regexes. This repeats on every render (and every keystroke in the grouping inputs with no debounce) causing O(n * parse/regex) cost that can jank the UI with large message histories.</comment>

<file context>
@@ -258,6 +264,288 @@ const MessageDetails = ({
+    });
+  };
+
+  const getMessageSections = () => {
+    const trimmedField = groupField.trim();
+    const trimmedValue = groupValue.trim();
</file context>