From a41b4c2482b8134ca8a7daca168af4ecc6cc8492 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Wed, 20 May 2026 13:11:06 +0900
Subject: feat: markdown rendering, daisyUI 5 compliance fixes, garden/luxury
 themes

---
 .../src/lib/components/ToolCallDisplay.svelte      | 82 +++++++++++-----------
 1 file changed, 40 insertions(+), 42 deletions(-)

(limited to 'packages/frontend/src/lib/components/ToolCallDisplay.svelte')

diff --git a/packages/frontend/src/lib/components/ToolCallDisplay.svelte b/packages/frontend/src/lib/components/ToolCallDisplay.svelte
index 070a8e3..f92f0f7 100644
--- a/packages/frontend/src/lib/components/ToolCallDisplay.svelte
+++ b/packages/frontend/src/lib/components/ToolCallDisplay.svelte
@@ -43,7 +43,7 @@ const shellResult = $derived(
 );
 </script>
 
-<div class="collapse collapse-arrow bg-base-200 my-1 rounded-lg border border-base-300 {isExpanded ? 'collapse-open' : ''}">
+<div class="collapse collapse-arrow bg-base-200 text-base-content my-1 rounded-lg border border-base-300 {isExpanded ? 'collapse-open' : ''}">
 	<button
 		type="button"
 		class="collapse-title flex items-center gap-2 text-sm font-medium cursor-pointer w-full text-left"
@@ -67,49 +67,48 @@ const shellResult = $derived(
 		{/if}
 	</button>
 
-	{#if isExpanded}
-		<div class="collapse-content text-xs">
-			<div class="mt-2">
-				<p class="font-semibold text-base-content/70 mb-1">Arguments</p>
-				<pre class="bg-base-300 rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all">{JSON.stringify(toolCall.arguments, null, 2)}</pre>
-			</div>
+	<div class="collapse-content text-xs">
+		<div class="mt-2">
+			<p class="font-semibold text-base-content/70 mb-1">Arguments</p>
+			<pre class="bg-base-300 rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all">{JSON.stringify(toolCall.arguments, null, 2)}</pre>
+		</div>
 		{#if isShell && toolCall.result !== undefined}
-				{#if shellResult !== null}
-					<div class="mt-2">
-						<p class="font-semibold text-base-content/70 mb-1">stdout:</p>
-						<pre class="bg-base-300 rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all font-mono">{shellResult.stdout || "(empty)"}</pre>
-					</div>
-					{#if shellResult.stderr}
-						<div class="mt-2">
-							<p class="font-semibold text-error/80 mb-1">stderr:</p>
-							<pre class="bg-error/10 text-error rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all font-mono">{shellResult.stderr}</pre>
-						</div>
-					{/if}
-					<div class="mt-2 flex items-center gap-2">
-						<span class="font-semibold text-base-content/70">exit code:</span>
-						<span class="badge badge-sm {shellResult.exitCode === 0 ? 'badge-success' : 'badge-error'}">{shellResult.exitCode}</span>
-					</div>
-				{:else}
-					<div class="mt-2">
-						<p class="font-semibold text-base-content/70 mb-1">Result</p>
-						<pre class="rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all {toolCall.isError ? 'bg-error/20 text-error' : 'bg-base-300'}">{toolCall.result}</pre>
-					</div>
-				{/if}
-			{:else if isShell && toolCall.shellOutput}
-				{#if toolCall.shellOutput.stdout}
+			{#if shellResult !== null}
+				<div class="mt-2">
+					<p class="font-semibold text-base-content/70 mb-1">stdout:</p>
+					<pre class="bg-base-300 rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all font-mono">{shellResult.stdout || "(empty)"}</pre>
+				</div>
+				{#if shellResult.stderr}
 					<div class="mt-2">
-						<p class="font-semibold text-base-content/70 mb-1">stdout</p>
-						<pre class="bg-base-300 rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all text-xs">{toolCall.shellOutput.stdout}</pre>
+						<p class="font-semibold text-error/80 mb-1">stderr:</p>
+						<pre class="bg-error/10 text-error rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all font-mono">{shellResult.stderr}</pre>
 					</div>
 				{/if}
-				{#if toolCall.shellOutput.stderr}
-					<div class="mt-2">
-						<p class="font-semibold text-error/70 mb-1">stderr</p>
-						<pre class="bg-error/10 rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all text-xs text-error">{toolCall.shellOutput.stderr}</pre>
-					</div>
-				{/if}
-				<span class="text-xs text-base-content/50 italic">Running...</span>
-			{:else if toolCall.result !== undefined}
+				<div class="mt-2 flex items-center gap-2">
+					<span class="font-semibold text-base-content/70">exit code:</span>
+					<span class="badge badge-sm {shellResult.exitCode === 0 ? 'badge-success' : 'badge-error'}">{shellResult.exitCode}</span>
+				</div>
+			{:else}
+				<div class="mt-2">
+					<p class="font-semibold text-base-content/70 mb-1">Result</p>
+					<pre class="rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all {toolCall.isError ? 'bg-error/20 text-error' : 'bg-base-300'}">{toolCall.result}</pre>
+				</div>
+			{/if}
+		{:else if isShell && toolCall.shellOutput}
+			{#if toolCall.shellOutput.stdout}
+				<div class="mt-2">
+					<p class="font-semibold text-base-content/70 mb-1">stdout</p>
+					<pre class="bg-base-300 rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all text-xs">{toolCall.shellOutput.stdout}</pre>
+				</div>
+			{/if}
+			{#if toolCall.shellOutput.stderr}
+				<div class="mt-2">
+					<p class="font-semibold text-error/70 mb-1">stderr</p>
+					<pre class="bg-error/10 rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all text-xs text-error">{toolCall.shellOutput.stderr}</pre>
+				</div>
+			{/if}
+			<span class="text-xs text-base-content/50 italic">Running...</span>
+		{:else if toolCall.result !== undefined}
 			<div class="mt-2">
 				<p class="font-semibold text-base-content/70 mb-1">Result</p>
 				<pre
@@ -118,6 +117,5 @@ const shellResult = $derived(
 						: 'bg-base-300'}">{toolCall.result}</pre>
 			</div>
 		{/if}
-		</div>
-	{/if}
+	</div>
 </div>
-- 
cgit v1.2.3