From 3107d889fc599e9fd442f49c1efb1b278fb9f71c Mon Sep 17 00:00:00 2001
From: Zamil Majdy <zamil.majdy@agpt.co>
Date: Wed, 11 Feb 2026 22:08:03 +0400
Subject: [PATCH] feat(frontend/copilot): Add generic tool widget for
 unrecognized tools
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SDK built-in tools (Read, Glob, Grep, etc.) have no dedicated frontend
widget, so tool calls silently disappeared. Add a GenericTool component
that shows a spinning gear + "Running {tool}…" for any tool-* part
type that doesn't match a known case.
---
 .../ChatMessagesContainer.tsx                 | 11 ++++
 .../copilot/tools/GenericTool/GenericTool.tsx | 63 +++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx

diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx
index fbe1c03d1d..bda04eb986 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx
@@ -20,6 +20,7 @@ import { FindBlocksTool } from "../../tools/FindBlocks/FindBlocks";
 import { RunAgentTool } from "../../tools/RunAgent/RunAgent";
 import { RunBlockTool } from "../../tools/RunBlock/RunBlock";
 import { SearchDocsTool } from "../../tools/SearchDocs/SearchDocs";
+import { GenericTool } from "../../tools/GenericTool/GenericTool";
 import { ViewAgentOutputTool } from "../../tools/ViewAgentOutput/ViewAgentOutput";
 
 // ---------------------------------------------------------------------------
@@ -255,6 +256,16 @@ export const ChatMessagesContainer = ({
                         />
                       );
                     default:
+                      // Render a generic tool indicator for SDK built-in
+                      // tools (Read, Glob, Grep, etc.) or any unrecognized tool
+                      if (part.type.startsWith("tool-")) {
+                        return (
+                          <GenericTool
+                            key={`${message.id}-${i}`}
+                            part={part as ToolUIPart}
+                          />
+                        );
+                      }
                       return null;
                   }
                 })}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx
new file mode 100644
index 0000000000..677f1d01d1
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/GenericTool/GenericTool.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { ToolUIPart } from "ai";
+import { GearIcon } from "@phosphor-icons/react";
+import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+
+interface Props {
+  part: ToolUIPart;
+}
+
+function extractToolName(part: ToolUIPart): string {
+  // ToolUIPart.type is "tool-{name}", extract the name portion.
+  return part.type.replace(/^tool-/, "");
+}
+
+function formatToolName(name: string): string {
+  // "search_docs" → "Search docs", "Read" → "Read"
+  return name.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+}
+
+function getAnimationText(part: ToolUIPart): string {
+  const label = formatToolName(extractToolName(part));
+
+  switch (part.state) {
+    case "input-streaming":
+    case "input-available":
+      return `Running ${label}…`;
+    case "output-available":
+      return `${label} completed`;
+    case "output-error":
+      return `${label} failed`;
+    default:
+      return `Running ${label}…`;
+  }
+}
+
+export function GenericTool({ part }: Props) {
+  const isStreaming =
+    part.state === "input-streaming" || part.state === "input-available";
+  const isError = part.state === "output-error";
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <GearIcon
+          size={14}
+          weight="regular"
+          className={
+            isError
+              ? "text-red-500"
+              : isStreaming
+                ? "animate-spin text-neutral-500"
+                : "text-neutral-400"
+          }
+        />
+        <MorphingTextAnimation
+          text={getAnimationText(part)}
+          className={isError ? "text-red-500" : undefined}
+        />
+      </div>
+    </div>
+  );
+}