refac

Author: tjbck

src/lib/components/common/ToolCallDisplay.svelte

@@ -198,10 +198,9 @@
 								</div>
 							{:else}
 								<div class="tool-call-body w-full max-w-none!">
-									<Markdown
-										id={`${componentId}-tool-call-args`}
-										content={`\`\`\`json\n${formatJSONString(args)}\n\`\`\``}
-									/>
+									<pre
+										class="text-xs text-gray-600 dark:text-gray-300 whitespace-pre font-mono bg-gray-50 dark:bg-gray-900 rounded-lg p-2.5 overflow-x-auto"
+									>{formatJSONString(args)}</pre>
 								</div>
 							{/if}
 						</div>
@@ -217,10 +216,9 @@
 							</div>
 							<div class="w-full max-w-none!">
 								{#if typeof parsedResult === 'object' && parsedResult !== null}
-									<Markdown
-										id={`${componentId}-tool-call-result`}
-										content={`\`\`\`json\n${JSON.stringify(parsedResult, null, 2)}\n\`\`\``}
-									/>
+									<pre
+										class="text-xs text-gray-600 dark:text-gray-300 whitespace-pre font-mono bg-gray-50 dark:bg-gray-900 rounded-lg p-2.5 overflow-x-auto"
+									>{JSON.stringify(parsedResult, null, 2)}</pre>
 								{:else}
 									{@const resultStr = String(parsedResult)}
 									{@const isTruncated = resultStr.length > RESULT_PREVIEW_LIMIT && !expandedResult}