feat: new server summary tab

packages/web/src/jsontree/JSONArrayNode.svelte

@@ -3,6 +3,8 @@
 
   export let key, value, isParentExpanded, isParentArray;
   export let expanded = false;
+  export let labelOverride = null;
+  export let hideKey = false;
   const filteredKey = new Set(['length']);
 
   $: keys = Object.getOwnPropertyNames(value);
@@ -22,8 +24,10 @@
   {keys}
   {previewKeys}
   {getValue}
-  label="Array({value.length})"
+  label={labelOverride || `Array(${value.length})`}
   bracketOpen="["
   bracketClose="]"
   elementValue={value}
-/>
+  {labelOverride}
+  {hideKey}
+/>

packages/web/src/jsontree/JSONIterableArrayNode.svelte

@@ -2,6 +2,8 @@
   import JSONNested from './JSONNested.svelte';
 
   export let key, value, isParentExpanded, isParentArray, nodeType;
+  export let labelOverride = null;
+  export let hideKey = false;
 
   let keys = [];
 
@@ -29,7 +31,9 @@
   {getKey}
   {getValue}
   isArray={true}
-  label="{nodeType}({keys.length})"
+  label={labelOverride || `${nodeType}(${keys.length})`}
   bracketOpen={'{'}
   bracketClose={'}'}
-/>
+  {labelOverride}
+  {hideKey}
+/>

packages/web/src/jsontree/JSONIterableMapNode.svelte

@@ -3,6 +3,8 @@
   import MapEntry from './utils/MapEntry'
 
   export let key, value, isParentExpanded, isParentArray, nodeType;
+  export let labelOverride = null;
+  export let hideKey = false;
 
   let keys = [];
 
@@ -28,8 +30,10 @@
   {keys}
   {getKey}
   {getValue}
-  label="{nodeType}({keys.length})"
+  label={labelOverride || `${nodeType}(${keys.length})`}
   colon=""
   bracketOpen={'{'}
   bracketClose={'}'}
+  {labelOverride}
+  {hideKey}
 />

packages/web/src/jsontree/JSONMapEntryNode.svelte

@@ -3,6 +3,8 @@
 
   export let key, value, isParentExpanded, isParentArray;
   export let expanded = false;
+  export let hideKey = false;
+  export let labelOverride = null;
 
   const keys = ['key', 'value'];
 
@@ -17,7 +19,9 @@
   key={isParentExpanded ? String(key) : value.key}
   {keys}
   {getValue}
-  label={isParentExpanded ? 'Entry ' : '=> '}
+  label={labelOverride || (isParentExpanded ? 'Entry ' : '=> ')}
   bracketOpen={'{'}
   bracketClose={'}'}
-/>
+  {labelOverride}
+  {hideKey}
+/>

packages/web/src/jsontree/JSONNested.svelte

@@ -21,11 +21,14 @@
     expandable = true;
   export let elementValue = null;
   export let onRootExpandedChanged = null;
+  export let labelOverride = null;
+  export let hideKey = false;
 
   const context = getContext('json-tree-context-key');
   setContext('json-tree-context-key', { ...context, colon });
   const elementData = getContext('json-tree-element-data');
   const slicedKeyCount = getContext('json-tree-sliced-key-count');
+  const keyLabel = labelOverride ?? key;
 
   $: slicedKeys = expanded ? keys : previewKeys.slice(0, slicedKeyCount || 5);
 
@@ -56,7 +59,16 @@
     {#if expandable && isParentExpanded}
       <JSONArrow on:click={toggleExpand} {expanded} />
     {/if}
-    <JSONKey {key} colon={context.colon} {isParentExpanded} {isParentArray} on:click={toggleExpand} />
+    {#if !hideKey}
+      <JSONKey
+        key={keyLabel}
+        colon={context.colon}
+        {isParentExpanded}
+        {isParentArray}
+        {hideKey}
+        on:click={toggleExpand}
+      />
+    {/if}
     <span on:click={toggleExpand}><span>{label}</span>{bracketOpen}</span>
   </label>
   {#if isParentExpanded}

packages/web/src/jsontree/JSONNode.svelte

@@ -16,6 +16,7 @@
   export let expanded = !!getContext('json-tree-default-expanded');
   export let labelOverride = null;
   export let onRootExpandedChanged = null;
+  export let hideKey = false;
 
   $: nodeType = objType(value);
   $: componentType = getComponent(nodeType);
@@ -85,4 +86,5 @@
   {expanded}
   {labelOverride}
   {onRootExpandedChanged}
+  {hideKey}
 />

packages/web/src/jsontree/JSONObjectNode.svelte

@@ -5,6 +5,7 @@
   export let expanded = false;
   export let labelOverride = null;
   export let onRootExpandedChanged = null;
+  export let hideKey = false;
 
   $: keys = Object.getOwnPropertyNames(value);
 
@@ -26,4 +27,5 @@
   bracketClose={'}'}
   elementValue={value}
   {onRootExpandedChanged}
+  {hideKey}
 />

packages/web/src/jsontree/JSONTree.svelte

@@ -2,7 +2,6 @@
   import JSONNode from './JSONNode.svelte';
   import { setContext } from 'svelte';
   import contextMenu, { getContextMenu } from '../utility/contextMenu';
-  import openNewTab from '../utility/openNewTab';
   import _ from 'lodash';
   import { copyTextToClipboard } from '../utility/clipboard';
   import { openJsonLinesData } from '../utility/openJsonLinesData';
@@ -23,6 +22,7 @@
   export let isDeleted = false;
   export let isInserted = false;
   export let isModified = false;
+  export let hideKey = false;
 
   const settings = useSettings();
   $: wrap = $settings?.['behaviour.jsonPreviewWrap'];
@@ -73,6 +73,7 @@
   class:wrap
 >
   <JSONNode
+    {hideKey}
     {key}
     {value}
     isParentExpanded={true}

packages/web/src/jsontree/JSONValueNode.svelte

@@ -3,10 +3,25 @@
 
   import JSONKey from './JSONKey.svelte';
 
-  export let key, value, valueGetter = null, isParentExpanded, isParentArray, nodeType;
+  export let key,
+    value,
+    valueGetter = null,
+    labelOverride,
+    isParentExpanded,
+    isParentArray,
+    nodeType;
 
+  const label = labelOverride ?? key;
   const { colon } = getContext('json-tree-context-key');
 </script>
+
+<li class:indent={isParentExpanded}>
+  <JSONKey key={label} {colon} {isParentExpanded} {isParentArray} />
+  <span class={nodeType}>
+    {valueGetter ? valueGetter(value) : value}
+  </span>
+</li>
+
 <style>
   li {
     user-select: text;
@@ -45,9 +60,4 @@
     color: var(--symbol-color);
   }
 </style>
-<li class:indent={isParentExpanded}>
-  <JSONKey {key} {colon} {isParentExpanded} {isParentArray} />
-  <span class={nodeType}>
-    {valueGetter ? valueGetter(value) : value}
-  </span>
-</li>
+