fix(app): display skill name in skill tool call (#15413)

1 files changed, 27 insertions, 0 deletions

diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 5c110ccd6..6b6dfe2e5 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -250,6 +250,11 @@ export function getToolInfo(tool: string, input: any = {}): ToolInfo {
         icon: "bubble-5",
         title: i18n.t("ui.tool.questions"),
       }
+    case "skill":
+      return {
+        icon: "brain",
+        title: input.name || "skill",
+      }
     default:
       return {
         icon: "mcp",
@@ -1900,3 +1905,25 @@ ToolRegistry.register({
     )
   },
 })
+
+ToolRegistry.register({
+  name: "skill",
+  render(props) {
+    const title = createMemo(() => props.input.name || "skill")
+    const running = createMemo(() => props.status === "pending" || props.status === "running")
+
+    const titleContent = () => <TextShimmer text={title()} active={running()} />
+
+    const trigger = () => (
+      <div data-slot="basic-tool-tool-info-structured">
+        <div data-slot="basic-tool-tool-info-main">
+          <span data-slot="basic-tool-tool-title" class="capitalize agent-title">
+            {titleContent()}
+          </span>
+        </div>
+      </div>
+    )
+
+    return <BasicTool icon="brain" status={props.status} trigger={trigger()} hideDetails />
+  },
+})