diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index a1c02e1c80..559915d3ff 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -9,29 +9,25 @@
 	interface Props {
 		key?: string;
 		value: Ast;
-		collapsed?: boolean;
 		path_nodes?: Ast[];
 		autoscroll?: boolean;
+		depth?: number;
 	}
 
-	let {
-		key = '',
-		value,
-		collapsed = $bindable(true),
-		path_nodes = [],
-		autoscroll = true
-	}: Props = $props();
+	let { key = '', value, path_nodes = [], autoscroll = true, depth = 0 }: Props = $props();
 
 	const { toggleable } = get_repl_context();
 
+	let root = depth === 0;
+	let open = $state(root);
+
 	let list_item_el = $state() as HTMLLIElement;
 
-	let is_root = $derived(path_nodes[0] === value);
 	let is_leaf = $derived(path_nodes[path_nodes.length - 1] === value);
-	let is_ast_array = $derived(Array.isArray(value));
-	let is_collapsable = $derived(value && typeof value === 'object');
+	let is_array = $derived(Array.isArray(value));
+	let is_primitive = $derived(value === null || typeof value !== 'object');
 	let is_markable = $derived(
-		is_collapsable &&
+		!is_primitive &&
 			'start' in value &&
 			'end' in value &&
 			typeof value.start === 'number' &&
@@ -39,22 +35,8 @@
 	);
 	let key_text = $derived(key ? `${key}:` : '');
 
-	let preview_text = $state('');
-
-	$effect(() => {
-		if (!is_collapsable || !collapsed) return;
-
-		if (is_ast_array) {
-			if (!('length' in value)) return;
-
-			preview_text = `[ ${value.length} element${value.length === 1 ? '' : 's'} ]`;
-		} else {
-			preview_text = `{ ${Object.keys(value).join(', ')} }`;
-		}
-	});
-
 	$effect(() => {
-		collapsed = !path_nodes.includes(value);
+		open = path_nodes.includes(value);
 	});
 
 	$effect(() => {
@@ -95,36 +77,59 @@
 
 <li
 	bind:this={list_item_el}
-	class:marked={!is_root && is_leaf}
+	class:marked={!root && is_leaf}
 	onmouseover={handle_mark_text}
 	onfocus={handle_mark_text}
 	onmouseleave={handle_unmark_text}
 >
-	{#if !is_root && is_collapsable}
-		<button class="ast-toggle" class:open={!collapsed} onclick={() => (collapsed = !collapsed)}>
-			{key_text}
-		</button>
-	{:else if key_text}
-		<span>{key_text}</span>
-	{/if}
-	{#if is_collapsable}
-		{#if collapsed && !is_root}
-			<button class="preview" onclick={() => (collapsed = !collapsed)}>
-				{preview_text}
-			</button>
-		{:else}
-			<span>{is_ast_array ? '[' : '{'}</span>
+	{#if is_primitive || (is_array && value.length === 0)}
+		<span class="value">
+			{#if key_text}
+				<span>{key_text}</span>
+			{/if}
+
+			{#if value == undefined}
+				<span class="token comment">{String(value)}</span>
+			{:else}
+				<span class="token {typeof value}">
+					{JSON.stringify(value)}
+				</span>
+			{/if}
+		</span>
+	{:else}
+		<details bind:open>
+			<summary>
+				{#if key}
+					<span class="key">{key}</span>:
+				{/if}
+
+				{#if is_array}
+					[{#if !open}
+						<span class="token comment">...</span>]
+						<span class="token comment">({value.length})</span>
+					{/if}
+				{:else}
+					{#if value.type}
+						<span class="token comment">{value.type}</span>
+					{/if}
+					{'{'}{#if !open}<span class="token comment">...</span>}{/if}
+				{/if}
+			</summary>
+
 			<ul>
 				{#each Object.entries(value) as [k, v]}
-					<AstNode key={is_ast_array ? '' : k} value={v} {path_nodes} {autoscroll} />
+					<AstNode
+						key={is_array ? undefined : k}
+						value={v}
+						{path_nodes}
+						{autoscroll}
+						depth={depth + 1}
+					/>
 				{/each}
 			</ul>
-			<span>{is_ast_array ? ']' : '}'}</span>
-		{/if}
-	{:else}
-		<span class="token {typeof value}">
-			{JSON.stringify(value)}
-		</span>
+
+			<span>{is_array ? ']' : '}'}</span>
+		</details>
 	{/if}
 </li>
 
@@ -143,26 +148,18 @@
 		background-color: var(--sk-highlight-color);
 	}
 
-	button {
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
-	.ast-toggle {
+	summary {
 		position: relative;
-	}
+		display: block;
+		cursor: pointer;
 
-	.ast-toggle::before {
-		content: '\25B6';
-		position: absolute;
-		bottom: 0;
-		left: -1.3rem;
-		opacity: 0.7;
-	}
+		.key {
+			text-decoration: underline;
+		}
 
-	.ast-toggle.open::before {
-		content: '\25BC';
+		&:hover .key {
+			text-decoration: underline;
+		}
 	}
 
 	.token {
@@ -176,4 +173,8 @@
 	.token.number {
 		color: var(--sk-code-number);
 	}
+
+	.token.comment {
+		color: var(--sk-code-comment);
+	}
 </style>
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index b1cacf4af3..2ebf9e0afe 100644
--- a/packages/repl/src/lib/Output/AstView.svelte
+++ b/packages/repl/src/lib/Output/AstView.svelte
@@ -65,7 +65,7 @@
 		<code>
 			{#if typeof ast === 'object'}
 				<ul>
-					<AstNode value={ast} {path_nodes} {autoscroll} collapsed={false} />
+					<AstNode value={ast} {path_nodes} {autoscroll} />
 				</ul>
 			{:else}
 				<p>No AST available</p>