Simple skill tool component UI

Author: jahooma

cli/src/components/tools/registry.ts

@@ -1,4 +1,5 @@
 import { CodeSearchComponent } from './code-search'
+import { SkillComponent } from './skill'
 import { GlobComponent } from './glob'
 import { ListDirectoryComponent } from './list-directory'
 import { ReadDocsComponent } from './read-docs'
@@ -40,6 +41,7 @@ const toolComponentRegistry = new Map<ToolName, ToolComponent>([
   // Propose tools reuse the same rendering as their base counterparts
   ['propose_str_replace', StrReplaceComponent],
   ['propose_write_file', WriteFileComponent],
+  [SkillComponent.toolName, SkillComponent],
 ])
 
 /**

cli/src/components/tools/skill.tsx

@@ -0,0 +1,29 @@
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+
+import type { ToolRenderConfig } from './types'
+
+/**
+ * UI component for skill tool.
+ * Displays the skill name being loaded in a compact format.
+ */
+export const SkillComponent = defineToolComponent({
+  toolName: 'skill',
+
+  render(toolBlock): ToolRenderConfig {
+    const input = toolBlock.input as any
+
+    const skillName =
+      typeof input?.name === 'string' ? input.name.trim() : ''
+
+    if (!skillName) {
+      return { content: null }
+    }
+
+    return {
+      content: (
+        <SimpleToolCallItem name="Load Skill" description={skillName} />
+      ),
+    }
+  },
+})