diff --git a/apps/app/src/components/thread/timeline/rows/Tool.stories.tsx b/apps/app/src/components/thread/timeline/rows/Tool.stories.tsx index 3ddb7a4c62..3ac271f986 100644 --- a/apps/app/src/components/thread/timeline/rows/Tool.stories.tsx +++ b/apps/app/src/components/thread/timeline/rows/Tool.stories.tsx @@ -36,6 +36,26 @@ const toolSearchTool: TimelineRow = toolRow({ durationMs: 105, }); +const nativeSkillTool: TimelineRow = toolRow({ + id: "thr_skill_native:tool:toolu_skill_native", + threadId: "thr_skill_native", + turnId: "turn_skill_native_1", + sourceSeqStart: 1, + sourceSeqEnd: 2, + status: "completed", + callId: "toolu_skill_native", + toolName: "Skill", + toolArgs: { skill: "visual-qa-loop" }, + output: "Skill loaded", + approvalStatus: null, + durationMs: 120, + presentation: { + label: { pending: "Loading skill", completed: "Loaded skill" }, + icon: { glyph: "Zap" }, + title: "visual-qa-loop", + }, +}); + const longOutputTool: TimelineRow = toolRow({ id: "thr_tool_long_output:tool:toolu_long_output", threadId: "thr_tool_long_output", @@ -435,3 +455,18 @@ export function SkillReads() { ); } + +export function NativeSkillCall() { + return ( + + + + + + + + ); +} diff --git a/plugins/provider-claude-code/src/presentation.test.ts b/plugins/provider-claude-code/src/presentation.test.ts index c54abb0838..51232ab902 100644 --- a/plugins/provider-claude-code/src/presentation.test.ts +++ b/plugins/provider-claude-code/src/presentation.test.ts @@ -371,6 +371,19 @@ describe("claude item presentation", () => { }); }); + it("uses the established skill glyph for native Skill calls", () => { + const harness = createClaudeDeltaHarness(); + const events = harness.translate( + toolUse("skill-1", "Skill", { skill: "debugging" }), + ); + + expect(presentationOf(startedItems(events)[0])).toEqual({ + label: { pending: "Loading skill", completed: "Loaded skill" }, + icon: { glyph: "Zap" }, + title: "debugging", + }); + }); + it("maps MultiEdit and NotebookEdit to file changes with their own verbs", () => { const harness = createClaudeDeltaHarness(); const events = harness.translate({ diff --git a/plugins/provider-claude-code/src/presentation.ts b/plugins/provider-claude-code/src/presentation.ts index 3db8588d98..bb9fac0776 100644 --- a/plugins/provider-claude-code/src/presentation.ts +++ b/plugins/provider-claude-code/src/presentation.ts @@ -167,7 +167,7 @@ const BUILTIN_TOOL_PRESENTATIONS: Readonly< }, Skill: { label: { pending: "Loading skill", completed: "Loaded skill" }, - glyph: "Puzzle", + glyph: "Zap", titleField: "skill", }, StructuredOutput: {