From 96328b55ec74bf8e5f760d1459e5aa2a2830491a Mon Sep 17 00:00:00 2001
From: shallinta <shallinta@gmail.com>
Date: Wed, 29 Jul 2026 20:56:05 +0800
Subject: [PATCH] feat: add preview arguments button to tool call items

Adds an eye-icon button next to the existing 'Copy arguments' button
in tool call list items, which opens a PreviewDialog showing all tool
call arguments as formatted JSON in a single view.

Also adds .omc to .gitignore.
---
 .gitignore                                     |  1 +
 .../message/tool-call-list-item.tsx            | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/.gitignore b/.gitignore
index 696a9b4a..f3db04a8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ node_modules
 
 # local home for testing
 .llm-space
+.omc
 
 # output
 out
diff --git a/packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx b/packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx
index 41743e1b..343b9408 100644
--- a/packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx
+++ b/packages/ui/src/components/thread-playground/message/tool-call-list-item.tsx
@@ -67,6 +67,7 @@ function _ToolCallListItem({
   const executable = tool !== undefined && isExecutableTool(tool);
   const [calling, setCalling] = useState(false);
   const [previewOpen, setPreviewOpen] = useState(false);
+  const [argsPreviewOpen, setArgsPreviewOpen] = useState(false);
   const outputText = useMemo(() => getToolCallOutputText(toolCall), [toolCall]);
   const isError = toolCall.output?.isError ?? false;
   const handleOutputChange = useCallback(
@@ -137,6 +138,16 @@ function _ToolCallListItem({
       <div className="relative flex min-w-0 items-start">
         <ToolCallInputView input={toolCall.input} />
         <div className="absolute top-0 right-0 flex items-center">
+          <Tooltip content="Preview arguments">
+            <Button
+              className="invisible shrink-0 group-hover/message:visible"
+              size="icon"
+              variant="secondary"
+              onClick={() => setArgsPreviewOpen(true)}
+            >
+              <EyeIcon className="size-3" />
+            </Button>
+          </Tooltip>
           <Tooltip content="Copy arguments">
             <Button
               className="invisible shrink-0 group-hover/message:visible"
@@ -200,6 +211,13 @@ function _ToolCallListItem({
             </div>
           )}
         </div>
+        <PreviewDialog
+          open={argsPreviewOpen}
+          title={`Arguments of ${toolCall.input.name}()`}
+          type="json"
+          value={formatJson(toolCall.input.arguments)}
+          onOpenChange={setArgsPreviewOpen}
+        />
         <PreviewDialog
           open={previewOpen}
           title={`Response of ${toolCall.input.name}()`}