diff --git a/src/test/setup-webview.ts b/src/test/setup-webview.ts
index 85d56f1e3..b2dd6fba0 100644
--- a/src/test/setup-webview.ts
+++ b/src/test/setup-webview.ts
@@ -99,6 +99,16 @@ if (
   };
 }
 
+// Polyfill for requestAnimationFrame / cancelAnimationFrame (not implemented by JSDOM)
+if (!global.requestAnimationFrame) {
+  global.requestAnimationFrame = (cb: FrameRequestCallback): number => {
+    return setTimeout(() => cb(Date.now()), 0) as unknown as number;
+  };
+  global.cancelAnimationFrame = (id: number): void => {
+    clearTimeout(id);
+  };
+}
+
 // Polyfill for ResizeObserver (required by @vscode-elements/elements)
 // JSDOM does not support ResizeObserver, so we provide a no-op implementation
 class ResizeObserverPolyfill {
diff --git a/src/test/suite/views/data-browsing-app/monaco-viewer.test.tsx b/src/test/suite/views/data-browsing-app/monaco-viewer.test.tsx
index 4c3c7feb0..9c9f8a62d 100644
--- a/src/test/suite/views/data-browsing-app/monaco-viewer.test.tsx
+++ b/src/test/suite/views/data-browsing-app/monaco-viewer.test.tsx
@@ -15,6 +15,13 @@ import * as vscodeApi from '../../../../views/data-browsing-app/vscode-api';
 // Mock the Monaco Editor component
 let mockEditorValue = '';
 
+// Minimal Monaco instance passed as the second argument to onMount.
+const mockMonacoInstance = {
+  editor: { EditorOption: { lineHeight: 31 } },
+  KeyMod: { CtrlCmd: 2048 },
+  KeyCode: { KeyC: 33 },
+};
+
 const mockEditorInstance = {
   getValue: (): string => mockEditorValue,
   setValue: (value: string): void => {
@@ -24,16 +31,23 @@ const mockEditorInstance = {
     getValue: (): string => mockEditorValue,
   }),
   getContentHeight: (): number => 100,
-  onDidContentSizeChange: (): { dispose: () => void } => ({
+  // getOption is used to read the real line height after mount.
+  getOption: (): number => 19,
+  // addAction is used to register the Ctrl+C keybinding.
+  addAction: (): { dispose: () => void } => ({
     dispose: (): void => {
       /* no-op */
     },
   }),
-  getAction: (): { run: () => void } => ({
-    run: (): void => {
+  onDidContentSizeChange: (): { dispose: () => void } => ({
+    dispose: (): void => {
       /* no-op */
     },
   }),
+  // run() must return a Promise because the component chains .then() on it.
+  getAction: (): { run: () => Promise<void> } => ({
+    run: (): Promise<void> => Promise.resolve(),
+  }),
   dispose: (): void => {
     /* no-op */
   },
@@ -44,9 +58,11 @@ const MockEditor = ({ value, onMount }: any): JSX.Element => {
   React.useEffect(() => {
     if (onMount && value) {
       mockEditorValue = value;
-      // Simulate editor mount
+      // Simulate editor mount, passing both the editor instance and the monaco
+      // instance so the component's handleEditorMount doesn't error on the
+      // second argument (used for EditorOption.lineHeight, KeyMod, KeyCode).
       setTimeout(() => {
-        onMount(mockEditorInstance);
+        onMount(mockEditorInstance, mockMonacoInstance);
       }, 0);
     }
   }, [onMount, value]);
@@ -489,4 +505,117 @@ describe('MonacoViewer test suite', function () {
       expect(deleteIcon).to.exist;
     });
   });
+
+  describe('Show more / Show less', function () {
+    // Builds a document with `count` top-level fields named field0..fieldN.
+    const makeDocument = (count: number): Record<string, unknown> =>
+      Object.fromEntries(
+        Array.from({ length: count }, (_, i) => [`field${i}`, i]),
+      );
+
+    it('should not show toggle buttons for documents with ≤ 15 fields', function () {
+      render(<MonacoViewer document={makeDocument(15)} themeKind="vs-dark" />);
+
+      expect(screen.queryByText(/Show .* more field/)).to.not.exist;
+      expect(screen.queryByText('Show less')).to.not.exist;
+    });
+
+    it('should show "Show N more fields" button for documents with > 15 fields', function () {
+      // 20 fields → 20 - 15 = 5 hidden → "Show 5 more fields"
+      render(<MonacoViewer document={makeDocument(20)} themeKind="vs-dark" />);
+
+      // Button text lives inside a <span>; use closest('button') for the
+      // data-expanded attribute which is set on the <button> element.
+      const btnText = screen.getByText(/Show 5 more fields/);
+      expect(btnText).to.exist;
+      expect(btnText.closest('button')?.getAttribute('data-expanded')).to.equal(
+        'false',
+      );
+    });
+
+    it('should use singular "field" when exactly one field is hidden', function () {
+      // 16 fields → 16 - 15 = 1 hidden → "Show 1 more field" (no trailing "s")
+      render(<MonacoViewer document={makeDocument(16)} themeKind="vs-dark" />);
+
+      expect(screen.getByText(/Show 1 more field/)).to.exist;
+      expect(screen.queryByText(/Show 1 more fields/)).to.not.exist;
+    });
+
+    it('should switch to "Show less" button after clicking "Show more"', function () {
+      render(<MonacoViewer document={makeDocument(20)} themeKind="vs-dark" />);
+
+      fireEvent.click(screen.getByText(/Show 5 more fields/));
+
+      // "Show less" text is inside a <span>; the data-expanded attribute is on
+      // the parent <button>.
+      const btnText = screen.getByText('Show less');
+      expect(btnText).to.exist;
+      expect(btnText.closest('button')?.getAttribute('data-expanded')).to.equal(
+        'true',
+      );
+      expect(screen.queryByText(/Show 5 more fields/)).to.not.exist;
+    });
+
+    it('should switch back to "Show more" button after clicking "Show less"', function () {
+      render(<MonacoViewer document={makeDocument(20)} themeKind="vs-dark" />);
+
+      fireEvent.click(screen.getByText(/Show 5 more fields/));
+      fireEvent.click(screen.getByText('Show less'));
+
+      expect(screen.getByText(/Show 5 more fields/)).to.exist;
+      expect(screen.queryByText('Show less')).to.not.exist;
+    });
+
+    it('should call window.scrollBy to restore button viewport position after collapsing', async function () {
+      // JSDOM may not have scrollBy — define a no-op so sinon can stub it.
+      if (!window.scrollBy) {
+        (window as any).scrollBy = () => {
+          /* no-op */
+        };
+      }
+      const scrollByStub = sinon.stub(window, 'scrollBy');
+
+      render(<MonacoViewer document={makeDocument(20)} themeKind="vs-dark" />);
+
+      // Expand so the "Show less" button is visible.
+      fireEvent.click(screen.getByText(/Show 5 more fields/));
+
+      // "Show less" text is inside a <span> inside a <button> inside the
+      // <div ref={buttonWrapperRef}>.  We need to stub getBoundingClientRect
+      // on that outer <div>, which is what handleCollapse reads.
+      //   1st call (in handleCollapse, while expanded) → top = 500
+      //   2nd call (inside requestAnimationFrame, after collapse) → top = 200
+      const showLessSpan = screen.getByText('Show less');
+      const buttonWrapper = showLessSpan.closest('button')
+        ?.parentElement as HTMLDivElement;
+      let rectCallCount = 0;
+      sinon
+        .stub(buttonWrapper, 'getBoundingClientRect')
+        .callsFake(
+          () => ({ top: rectCallCount++ === 0 ? 500 : 200 }) as DOMRect,
+        );
+
+      fireEvent.click(showLessSpan);
+
+      await waitFor(() => {
+        expect(scrollByStub.calledOnce).to.be.true;
+        // delta = newTop - targetTop = 200 - 500 = -300
+        expect(scrollByStub.calledWith(0, -300)).to.be.true;
+      });
+    });
+
+    it('should not call window.scrollBy when clicking "Show more"', function () {
+      if (!window.scrollBy) {
+        (window as any).scrollBy = () => {
+          /* no-op */
+        };
+      }
+      const scrollByStub = sinon.stub(window, 'scrollBy');
+
+      render(<MonacoViewer document={makeDocument(20)} themeKind="vs-dark" />);
+      fireEvent.click(screen.getByText(/Show 5 more fields/));
+
+      expect(scrollByStub.called).to.be.false;
+    });
+  });
 });
diff --git a/src/views/data-browsing-app/monaco-viewer.tsx b/src/views/data-browsing-app/monaco-viewer.tsx
index 09d1f3b8f..bec034e50 100644
--- a/src/views/data-browsing-app/monaco-viewer.tsx
+++ b/src/views/data-browsing-app/monaco-viewer.tsx
@@ -113,6 +113,32 @@ const cardStyles = css({
   },
 });
 
+const showMoreButtonStyles = css({
+  color: 'var(--vscode-textLink-foreground, #3794ff)',
+  cursor: 'pointer',
+  background: 'none',
+  border: 'none',
+  padding: '8px 12px',
+  fontSize: '13px',
+  fontFamily:
+    'var(--vscode-editor-font-family, "Consolas", "Courier New", monospace)',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  width: '100%',
+  '&:hover span': {
+    textDecoration: 'underline',
+  },
+  '&::before': {
+    content: '"▸"',
+    display: 'inline-block',
+    transition: 'transform 0.2s',
+  },
+  '&[data-expanded="false"]::before': {
+    transform: 'rotate(90deg)',
+  },
+});
+
 const actionButtonStyles = css({
   position: 'relative',
   background: 'transparent',
@@ -164,6 +190,44 @@ const actionButtonStyles = css({
   },
 });
 
+const MAX_INITIAL_FIELDS_SHOWING = 15;
+
+/**
+ * Scan the serialized document string to find the model line number where the
+ * (maxFields+1)th top-level field starts. We track brace/bracket depth so that
+ * nested objects and arrays (which span many model lines) are skipped correctly.
+ * Returns null if the document has fewer than maxFields+1 top-level fields.
+ */
+function findCollapseLineNumber(
+  serialized: string,
+  maxFields: number,
+): number | null {
+  const lines = serialized.split('\n');
+  let depth = 0;
+  let topLevelFields = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const depthBefore = depth;
+    const trimmed = lines[i].trim();
+
+    for (const ch of trimmed) {
+      if (ch === '{' || ch === '[') depth++;
+      else if (ch === '}' || ch === ']') depth--;
+    }
+
+    // A new top-level field starts on a line where depth was 1 before the line
+    // (inside the root object) and the line looks like a key (contains a colon).
+    if (depthBefore === 1 && trimmed.includes(':')) {
+      topLevelFields++;
+      if (topLevelFields > maxFields) {
+        return i + 1; // 1-based line number
+      }
+    }
+  }
+
+  return null;
+}
+
 const viewerOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
   readOnly: true,
   domReadOnly: false,
@@ -218,7 +282,17 @@ const MonacoViewer: React.FC<MonacoViewerProps> = ({
 }) => {
   const monaco = useMonaco();
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const lineHeightRef = useRef<number>(19);
+  // Tracks the last known Monaco content height so we can compute deltas.
+  const prevContentHeightRef = useRef<number>(0);
+  // True once the initial foldLevel2 + updateCollapsedHeight pass is done.
+  const collapsedHeightInitializedRef = useRef<boolean>(false);
   const [editorHeight, setEditorHeight] = useState<number>(0);
+  const [showAllFields, setShowAllFields] = useState(false);
+  const [collapsedHeight, setCollapsedHeight] = useState<number | null>(null);
+  const buttonWrapperRef = useRef<HTMLDivElement | null>(null);
+  // Stores the button's viewport Y before collapsing so we can scroll to restore it.
+  const collapseScrollTargetRef = useRef<number | null>(null);
 
   // Monaco expects colors without the # prefix, so strip it here once.
   // Individual color properties may be undefined when the active VS Code
@@ -273,6 +347,7 @@ const MonacoViewer: React.FC<MonacoViewerProps> = ({
     monaco.typescript.typescriptDefaults.setDiagnosticsOptions({
       noSemanticValidation: true,
       noSyntaxValidation: false,
+      noSuggestionDiagnostics: true,
     });
     monaco.typescript.typescriptDefaults.setCompilerOptions({
       target: monaco.typescript.ScriptTarget.Latest,
@@ -281,10 +356,27 @@ const MonacoViewer: React.FC<MonacoViewerProps> = ({
     });
   }, [monaco, colors, themeKind]);
 
-  const documentString = useMemo(() => {
-    const deserialized = EJSON.deserialize(document, { relaxed: false });
-    return toJSString(deserialized) ?? '';
-  }, [document]);
+  const deserialized = useMemo(
+    () =>
+      EJSON.deserialize(document, { relaxed: false }) as Record<
+        string,
+        unknown
+      >,
+    [document],
+  );
+
+  const documentString = useMemo(
+    () => toJSString(deserialized) ?? '',
+    [deserialized],
+  );
+
+  const collapseAtLine = useMemo(
+    () => findCollapseLineNumber(documentString, MAX_INITIAL_FIELDS_SHOWING),
+    [documentString],
+  );
+  const hasMoreFields = collapseAtLine !== null;
+  const hiddenFieldCount =
+    Object.keys(document).length - MAX_INITIAL_FIELDS_SHOWING;
 
   const calculateHeight = useCallback(() => {
     if (!editorRef.current) {
@@ -302,6 +394,20 @@ const MonacoViewer: React.FC<MonacoViewerProps> = ({
     setEditorHeight(calculateHeight());
   }, [documentString, calculateHeight]);
 
+  const updateCollapsedHeight = useCallback(() => {
+    if (collapseAtLine === null) return;
+    if (editorRef.current) {
+      // Use Monaco's API to get the actual pixel offset for the collapse line.
+      // collapseAtLine is the correct model line number (computed by scanning
+      // the serialized string with depth tracking), and after foldLevel2 the
+      // editor knows the real visual position accounting for folded regions.
+      const top = editorRef.current.getTopForLineNumber(collapseAtLine);
+      setCollapsedHeight(top);
+    } else {
+      setCollapsedHeight((collapseAtLine - 1) * lineHeightRef.current);
+    }
+  }, [collapseAtLine]);
+
   const handleEditorMount = useCallback(
     (
       editorInstance: editor.IStandaloneCodeEditor,
@@ -310,14 +416,27 @@ const MonacoViewer: React.FC<MonacoViewerProps> = ({
       >[1],
     ) => {
       editorRef.current = editorInstance;
-      setEditorHeight(calculateHeight());
 
-      // Fold all levels except the outermost object
-      const runFold = (): void => {
-        void editorInstance.getAction('editor.foldLevel2')?.run();
-      };
-
-      requestAnimationFrame(runFold);
+      // Capture the real line height now that the editor and monaco are ready.
+      const lh = editorInstance.getOption(
+        monacoInstance.editor.EditorOption.lineHeight,
+      );
+      lineHeightRef.current = lh > 0 ? lh : 19;
+
+      // Fold all levels except the outermost object, then — and only then —
+      // apply the collapsed height so we never clip before folding has run.
+      // After that, record the baseline content height and mark initialization
+      // complete so subsequent fold-toggle deltas are tracked correctly.
+      requestAnimationFrame(() => {
+        void editorInstance
+          .getAction('editor.foldLevel2')
+          ?.run()
+          .then(() => {
+            updateCollapsedHeight();
+            prevContentHeightRef.current = editorInstance.getContentHeight();
+            collapsedHeightInitializedRef.current = true;
+          });
+      });
 
       // VS Code webviews intercept Ctrl+C before it reaches the embedded Monaco editor,
       const copyKeybinding = editorInstance.addAction({
@@ -338,12 +457,24 @@ const MonacoViewer: React.FC<MonacoViewerProps> = ({
 
       const disposable = editorInstance.onDidContentSizeChange(() => {
         const contentHeight = editorInstance.getContentHeight();
+        const delta = contentHeight - prevContentHeightRef.current;
+        prevContentHeightRef.current = contentHeight;
         setEditorHeight(contentHeight);
+
+        // After the initial fold pass, keep the collapsed-height cap in sync
+        // with Monaco's fold state: when the user expands or collapses a
+        // section inside the visible area the card grows or shrinks by the
+        // same number of pixels, so newly revealed lines are always visible.
+        if (collapsedHeightInitializedRef.current && delta !== 0) {
+          setCollapsedHeight((prev) =>
+            prev !== null ? Math.max(0, prev + delta) : prev,
+          );
+        }
       });
 
       (editorInstance as any).__foldDisposables = [disposable, copyKeybinding];
     },
-    [calculateHeight],
+    [calculateHeight, updateCollapsedHeight],
   );
 
   // Cleanup effect to dispose event listeners when component unmounts
@@ -356,6 +487,26 @@ const MonacoViewer: React.FC<MonacoViewerProps> = ({
     };
   }, []);
 
+  const handleCollapse = useCallback(() => {
+    // Capture the button wrapper's viewport Y before the DOM collapses.
+    collapseScrollTargetRef.current =
+      buttonWrapperRef.current?.getBoundingClientRect().top ?? null;
+    setShowAllFields(false);
+  }, []);
+
+  // After collapsing, scroll so the button stays at the same viewport position.
+  useEffect(() => {
+    if (showAllFields || collapseScrollTargetRef.current === null) return;
+    const targetTop = collapseScrollTargetRef.current;
+    collapseScrollTargetRef.current = null;
+
+    requestAnimationFrame(() => {
+      if (!buttonWrapperRef.current) return;
+      const newTop = buttonWrapperRef.current.getBoundingClientRect().top;
+      window.scrollBy(0, newTop - targetTop);
+    });
+  }, [showAllFields]);
+
   const handleEdit = useCallback(() => {
     if (document._id) {
       sendEditDocument(document._id);
@@ -418,16 +569,51 @@ const MonacoViewer: React.FC<MonacoViewerProps> = ({
           </button>
         )}
       </div>
-      <div className={monacoWrapperStyles}>
-        <Editor
-          height={editorHeight}
-          defaultLanguage="typescript"
-          value={documentString}
-          theme="currentVSCodeTheme"
-          options={viewerOptions}
-          loading={null}
-          onMount={handleEditorMount}
-        />
+      <div
+        style={{
+          maxHeight:
+            hasMoreFields && !showAllFields && collapsedHeight !== null
+              ? collapsedHeight
+              : undefined,
+          overflow: hasMoreFields && !showAllFields ? 'hidden' : undefined,
+        }}
+      >
+        <div className={monacoWrapperStyles}>
+          <Editor
+            height={editorHeight}
+            defaultLanguage="typescript"
+            value={documentString}
+            theme="currentVSCodeTheme"
+            options={viewerOptions}
+            loading={null}
+            onMount={handleEditorMount}
+          />
+        </div>
+      </div>
+
+      <div ref={buttonWrapperRef}>
+        {hasMoreFields && !showAllFields && (
+          <button
+            className={showMoreButtonStyles}
+            onClick={() => setShowAllFields(true)}
+            data-expanded="false"
+          >
+            <span>
+              Show {hiddenFieldCount} more field
+              {hiddenFieldCount !== 1 ? 's' : ''}
+            </span>
+          </button>
+        )}
+
+        {hasMoreFields && showAllFields && (
+          <button
+            className={showMoreButtonStyles}
+            onClick={handleCollapse}
+            data-expanded="true"
+          >
+            <span>Show less</span>
+          </button>
+        )}
       </div>
     </div>
   );