feat: Adding Editor Network Stats (#339)

Adding a new debugger stats visualization for editor network statistics

- Fixed an issue with the stats provider where it was only aggregating
the first field
- Added aggregator support for different field variants
- Added CSS styling for resizable table column headers (they only look
different though - turns out the web view table component doesn't
support resizing column headers)
- Fixed an issue in the statistics collector when parent stats had no
children and for aggregating columns of different types
- Added a dynamic multi column display table (just add new labels and it
will expand - no need to set it up beforehand)
- Added an Editor Network Stats pane
- Added flags to prettify camel case strings or display as-is

<img width="2670" height="1286" alt="image"
src="https://github.com/user-attachments/assets/aa71a52b-66b6-4f20-bf33-99736a5b4f03"
/>

---------

Co-authored-by: David Cowan <taz@hexland.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

src/stats/stats-provider.ts

@@ -84,11 +84,25 @@ export class StatsProvider {
         const childStringValues: string[][] = [];
 
         for (const child of stat.children ?? []) {
-            if (!(child.values && typeof child.values[0] === 'string' && child.values[0].length > 0)) {
+            if (!child.values || child.values.length === 0) {
                 continue;
             }
 
-            childStringValues.push([child.name, child.values[0]]);
+            // Handle different value types
+            if (typeof child.values[0] === 'string' && child.values[0].length > 0) {
+                // Original behavior: string values
+                childStringValues.push([child.name, child.values[0]]);
+            } else if (typeof child.values[0] === 'number') {
+                // New behavior: numeric values
+                if (child.values.length === 1) {
+                    // Single numeric value
+                    childStringValues.push([child.name, child.values[0].toString()]);
+                } else if (child.values.length >= 2) {
+                    // Multiple numeric values - create a row with all values
+                    const valueStrings = child.values.map(v => v.toString());
+                    childStringValues.push([child.name, ...valueStrings]);
+                }
+            }
         }
 
         const childStatData: StatData = {

webview-ui/src/diagnostics_panel/App.css

@@ -156,3 +156,56 @@ main {
   background-color: var(--vscode-button-background);
   color: var(--vscode-button-foreground);
 }
+
+/* Multi-column table with enhanced column interaction */
+#multi-column-grid {
+  width: 100%;
+  overflow-x: auto;
+  table-layout: fixed;
+}
+
+/* Enhanced column styling for better visual feedback */
+#multi-column-grid vscode-data-grid-cell[cell-type="columnheader"] {
+  font-weight: bold;
+  background-color: var(--vscode-editor-background);
+  border-bottom: 2px solid var(--vscode-editorGroup-border);
+  border-right: 1px solid var(--vscode-editorGroup-border);
+  position: relative;
+  cursor: default;
+  user-select: none;
+  padding: 8px 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Add visual resize handle to column headers */
+#multi-column-grid vscode-data-grid-cell[cell-type="columnheader"]::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 4px;
+  height: 100%;
+  background: transparent;
+  cursor: col-resize;
+  z-index: 1;
+}
+
+#multi-column-grid vscode-data-grid-cell[cell-type="columnheader"]:hover::after {
+  background: var(--vscode-focusBorder);
+  opacity: 0.5;
+}
+
+/* Regular cell styling */
+#multi-column-grid vscode-data-grid-cell:not([cell-type="columnheader"]) {
+  padding: 8px 12px;
+  border-right: 1px solid var(--vscode-editorGroup-border);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+/* Default styling for value columns when no columnWidths prop is provided */
+#multi-column-grid vscode-data-grid-cell:not([grid-column="1"]) {
+  text-align: right;
+}

webview-ui/src/diagnostics_panel/StatisticProvider.tsx

@@ -118,7 +118,10 @@ export class MultipleStatisticProvider extends StatisticProvider {
         }
 
         if (event.values.length === 0) {
-            return;
+            // Allow events through if they have children_string_values even if values is empty
+            if (!event.children_string_values || event.children_string_values.length === 0) {
+                return;
+            }
         }
 
         if (this.options.valuesFilter && !this.options.valuesFilter(event)) {