Initial impl

Author: jahooma

bun.lock

@@ -21,7 +21,7 @@ import { MessageWithAgents } from './components/message-with-agents'
 import { PendingBashMessage } from './components/pending-bash-message'
 import { StatusBar } from './components/status-bar'
 import { TopBanner } from './components/top-banner'
-import { SLASH_COMMANDS } from './data/slash-commands'
+import { getSlashCommandsWithSkills } from './data/slash-commands'
 import { useAgentValidation } from './hooks/use-agent-validation'
 import { useAskUserBridge } from './hooks/use-ask-user-bridge'
 import { useChatInput } from './hooks/use-chat-input'
@@ -63,6 +63,7 @@ import {
   createDefaultChatKeyboardState,
 } from './utils/keyboard-actions'
 import { loadLocalAgents } from './utils/local-agent-registry'
+import { getLoadedSkills } from './utils/skill-registry'
 import {
   getStatusIndicatorState,
   type AuthStatus,
@@ -205,15 +206,20 @@ export const Chat = ({
   const setInputMode = useChatStore((state) => state.setInputMode)
   const askUserState = useChatStore((state) => state.askUserState)
 
+  // Get loaded skills for slash commands
+  const loadedSkills = useMemo(() => getLoadedSkills(), [])
+
   // Filter slash commands based on current ads state - only show the option that changes state
+  // Also merge in skill commands
   const filteredSlashCommands = useMemo(() => {
     const adsEnabled = getAdsEnabled()
-    return SLASH_COMMANDS.filter((cmd) => {
+    const allCommands = getSlashCommandsWithSkills(loadedSkills)
+    return allCommands.filter((cmd) => {
       if (cmd.id === 'ads:enable') return !adsEnabled
       if (cmd.id === 'ads:disable') return adsEnabled
       return true
     })
-  }, [inputValue]) // Re-evaluate when input changes (user may have just toggled)
+  }, [inputValue, loadedSkills]) // Re-evaluate when input changes (user may have just toggled)
 
   const {
     slashContext,

cli/src/chat.tsx

@@ -15,6 +15,7 @@ import { useLoginStore } from '../state/login-store'
 import { capturePendingAttachments } from '../utils/pending-attachments'
 import { AGENT_MODES } from '../utils/constants'
 import { getSystemMessage, getUserMessage } from '../utils/message-history'
+import { getSkillByName } from '../utils/skill-registry'
 
 import type { MultilineInputHandle } from '../components/multiline-input'
 import type { InputValue, PendingAttachment } from '../state/chat-store'
@@ -490,7 +491,77 @@ export const COMMAND_REGISTRY: CommandDefinition[] = [
 
 export function findCommand(cmd: string): CommandDefinition | undefined {
   const lowerCmd = cmd.toLowerCase()
-  return COMMAND_REGISTRY.find(
+  
+  // First check the static command registry
+  const staticCommand = COMMAND_REGISTRY.find(
     (def) => def.name === lowerCmd || def.aliases.includes(lowerCmd),
   )
+  if (staticCommand) {
+    return staticCommand
+  }
+
+  // Check if this is a skill command
+  const skill = getSkillByName(lowerCmd)
+  if (skill) {
+    return createSkillCommand(skill.name)
+  }
+
+  return undefined
+}
+
+/**
+ * Creates a dynamic command definition for a skill.
+ * When invoked, the skill's content is sent to the agent.
+ */
+function createSkillCommand(skillName: string): CommandDefinition {
+  return defineCommandWithArgs({
+    name: skillName,
+    handler: (params, args) => {
+      const skill = getSkillByName(skillName)
+      if (!skill) {
+        params.setMessages((prev) => [
+          ...prev,
+          getUserMessage(params.inputValue.trim()),
+          getSystemMessage(`Skill not found: ${skillName}`),
+        ])
+        params.saveToHistory(params.inputValue.trim())
+        params.setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false })
+        return
+      }
+
+      const trimmed = params.inputValue.trim()
+      params.saveToHistory(trimmed)
+      params.setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false })
+
+      // Build the message content with skill context and optional user args
+      const skillContext = `<skill name="${skill.name}">
+${skill.content}
+</skill>`
+
+      const userPrompt = args.trim()
+        ? `${skillContext}\n\nUser request: ${args.trim()}`
+        : `${skillContext}\n\nPlease use this skill to help me.`
+
+      // Check streaming/queue state
+      if (
+        params.isStreaming ||
+        params.streamMessageIdRef.current ||
+        params.isChainInProgressRef.current
+      ) {
+        const pendingAttachments = capturePendingAttachments()
+        params.addToQueue(userPrompt, pendingAttachments)
+        params.setInputFocused(true)
+        params.inputRef.current?.focus()
+        return
+      }
+
+      params.sendMessage({
+        content: userPrompt,
+        agentMode: params.agentMode,
+      })
+      setTimeout(() => {
+        params.scrollToLatest()
+      }, 0)
+    },
+  })
 }

cli/src/commands/command-registry.ts

@@ -1,3 +1,5 @@
+import type { SkillsMap } from '@codebuff/common/types/skill'
+
 import { AGENT_MODES } from '../utils/constants'
 
 export interface SlashCommand {
@@ -150,3 +152,17 @@ export const SLASHLESS_COMMAND_IDS = new Set(
     cmd.id.toLowerCase(),
   ),
 )
+
+/**
+ * Returns SLASH_COMMANDS merged with skill commands.
+ * Skills become slash commands that users can invoke directly.
+ */
+export function getSlashCommandsWithSkills(skills: SkillsMap): SlashCommand[] {
+  const skillCommands: SlashCommand[] = Object.values(skills).map((skill) => ({
+    id: skill.name,
+    label: skill.name,
+    description: skill.description,
+  }))
+
+  return [...SLASH_COMMANDS, ...skillCommands]
+}

cli/src/data/slash-commands.ts

@@ -27,6 +27,7 @@ import { getAuthTokenDetails } from './utils/auth'
 import { resetCodebuffClient } from './utils/codebuff-client'
 import { getCliEnv } from './utils/env'
 import { initializeAgentRegistry } from './utils/local-agent-registry'
+import { initializeSkillRegistry } from './utils/skill-registry'
 import { clearLogFile, logger } from './utils/logger'
 import { shouldShowProjectPicker } from './utils/project-picker'
 import { saveRecentProject } from './utils/recent-projects'
@@ -190,6 +191,9 @@ async function main(): Promise<void> {
     await initializeAgentRegistry()
   }
 
+  // Initialize skill registry (loads skills from .agents/skills)
+  await initializeSkillRegistry()
+
   // Handle publish command before rendering the app
   if (isPublishCommand) {
     const publishIndex = process.argv.indexOf('publish')