feat(cli): add /publish command with interactive agent selection UI

- Add new /publish command to publish local agents to the agent store -
Create searchable multi-select agent checklist with expandable
dependency trees - Show (+ N subagents) count with click-to-expand
dependency visualization - Add two-step flow: selection -> confirmation
with side-by-side Selected/Dependencies lists - Display success/error UI
after publishing with detailed results - Create usePublishMutation hook
using TanStack Query for proper state management - Add publish-store.ts
for managing publish mode state - Extract shared getSimpleAgentId
utility to reduce code duplication

Author: brandonkachen

cli/src/chat.tsx

@@ -45,6 +45,7 @@ import { useUsageMonitor } from './hooks/use-usage-monitor'
 import { getProjectRoot } from './project-files'
 import { useChatStore } from './state/chat-store'
 import { useFeedbackStore } from './state/feedback-store'
+import { usePublishStore } from './state/publish-store'
 import { addClipboardPlaceholder, addPendingImageFromFile, validateAndAddImage } from './utils/add-pending-image'
 import { createChatScrollAcceleration } from './utils/chat-scroll-accel'
 import { showClipboardMessage } from './utils/clipboard'
@@ -56,6 +57,7 @@ import {
   createDefaultChatKeyboardState,
 } from './utils/keyboard-actions'
 import { loadLocalAgents } from './utils/local-agent-registry'
+import { usePublishMutation } from './hooks/use-publish-mutation'
 import { buildMessageTree } from './utils/message-tree-utils'
 import {
   getStatusIndicatorState,
@@ -720,6 +722,22 @@ export const Chat = ({
     })),
   )
 
+  const {
+    publishMode,
+    openPublishMode,
+    closePublish,
+    preSelectAgents,
+  } = usePublishStore(
+    useShallow((state) => ({
+      publishMode: state.publishMode,
+      openPublishMode: state.openPublishMode,
+      closePublish: state.closePublish,
+      preSelectAgents: state.preSelectAgents,
+    })),
+  )
+
+  const publishMutation = usePublishMutation()
+
   const inputValueRef = useRef(inputValue)
   const cursorPositionRef = useRef(cursorPosition)
   useEffect(() => {
@@ -773,6 +791,18 @@ export const Chat = ({
     handleExitFeedback()
   }, [closeFeedback, handleExitFeedback])
 
+  const handleExitPublish = useCallback(() => {
+    closePublish()
+    setInputFocused(true)
+  }, [closePublish, setInputFocused])
+
+  const handlePublish = useCallback(
+    async (agentIds: string[]) => {
+      await publishMutation.mutateAsync(agentIds)
+    },
+    [publishMutation],
+  )
+
   // Ensure bracketed paste events target the active chat input
   useEffect(() => {
     if (feedbackMode) {
@@ -814,6 +844,16 @@ export const Chat = ({
       saveCurrentInput('', 0)
       openFeedbackForMessage(null)
     }
+
+    if (result?.openPublishMode) {
+      if (result.preSelectAgents && result.preSelectAgents.length > 0) {
+        // Pre-select agents and skip to confirmation
+        preSelectAgents(result.preSelectAgents)
+      } else {
+        // Open selection UI
+        openPublishMode()
+      }
+    }
   }, [
     abortControllerRef,
     agentMode,
@@ -838,6 +878,8 @@ export const Chat = ({
     ensureQueueActiveBeforeSubmit,
     saveCurrentInput,
     openFeedbackForMessage,
+    openPublishMode,
+    preSelectAgents,
   ])
 
   const totalMentionMatches = agentMatches.length + fileMatches.length
@@ -1295,6 +1337,9 @@ export const Chat = ({
           isNarrowWidth={isNarrowWidth}
           feedbackMode={feedbackMode}
           handleExitFeedback={handleExitFeedback}
+          publishMode={publishMode}
+          handleExitPublish={handleExitPublish}
+          handlePublish={handlePublish}
           handleSubmit={handleSubmit}
           onPaste={createPasteHandler({
             text: inputValue,

cli/src/commands/command-registry.ts

@@ -46,7 +46,7 @@ export type RouterParams = {
   stopStreaming: () => void
 }
 
-export type CommandResult = { openFeedbackMode?: boolean } | void
+export type CommandResult = { openFeedbackMode?: boolean; openPublishMode?: boolean; preSelectAgents?: string[] } | void
 
 export type CommandHandler = (
   params: RouterParams,
@@ -265,6 +265,24 @@ export const COMMAND_REGISTRY: CommandDefinition[] = [
       clearInput(params)
     },
   })),
+  {
+    name: 'publish',
+    aliases: [],
+    handler: (params, args) => {
+      const trimmedArgs = args.trim()
+      params.saveToHistory(params.inputValue.trim())
+      clearInput(params)
+
+      // If user provided agent ids directly, skip to confirmation step
+      if (trimmedArgs) {
+        const agentIds = trimmedArgs.split(/\s+/).filter(Boolean)
+        return { openPublishMode: true, preSelectAgents: agentIds }
+      }
+
+      // Otherwise open selection UI
+      return { openPublishMode: true }
+    },
+  },
 ]
 
 export function findCommand(cmd: string): CommandDefinition | undefined {

cli/src/commands/publish.ts

@@ -1,5 +1,4 @@
 import { WEBSITE_URL } from '@codebuff/sdk'
-import { cyan, green, red, yellow } from 'picocolors'
 
 import { getUserCredentials } from '../utils/auth'
 import { getApiClient, setApiClientAuthToken } from '../utils/codebuff-api'
@@ -10,6 +9,19 @@ import type {
   PublishAgentsResponse,
 } from '@codebuff/common/types/api/agents/publish'
 
+export interface PublishResult {
+  success: boolean
+  publisherId?: string
+  agents?: Array<{
+    id: string
+    version: string
+    displayName: string
+  }>
+  error?: string
+  details?: string
+  hint?: string
+}
+
 /**
  * Publish agent templates to the backend
  */
@@ -77,42 +89,37 @@ async function publishAgentTemplates(
 /**
  * Handle the publish command to upload agent templates to the backend
  * @param agentIds The ids or display names of the agents to publish
+ * @returns PublishResult with success/error information
  */
-export async function handlePublish(agentIds: string[]): Promise<void> {
+export async function handlePublish(agentIds: string[]): Promise<PublishResult> {
   const user = getUserCredentials()
 
   if (!user) {
-    console.log(red('Please log in first using "login" command or web UI.'))
-    return
+    return {
+      success: false,
+      error: 'Not logged in',
+      hint: 'Please log in first using "login" command or web UI.',
+    }
   }
 
   const availableAgents = getLoadedAgentsData()?.agents || []
 
   if (agentIds?.length === 0) {
-    console.log(
-      red('Agent id is required. Usage: publish <agent-id> [agent-id2] ...'),
-    )
-
-    // Show available agents
-    if (availableAgents.length > 0) {
-      console.log(cyan('Available agents:'))
-      availableAgents.forEach((agent) => {
-        const identifier =
-          agent.displayName && agent.displayName !== agent.id
-            ? `${agent.displayName} (${agent.id})`
-            : agent.displayName || agent.id
-        console.log(`  - ${identifier}`)
-      })
+    return {
+      success: false,
+      error: 'No agents specified',
+      hint: 'Usage: publish <agent-id> [agent-id2] ...',
     }
-    return
   }
 
   try {
     const loadedDefinitions = loadAgentDefinitions()
 
     if (loadedDefinitions.length === 0) {
-      console.log(red('No valid agent templates found in .agents directory.'))
-      return
+      return {
+        success: false,
+        error: 'No valid agent templates found in .agents directory.',
+      }
     }
 
     const matchingTemplates: Record<string, any> = {}
@@ -125,15 +132,18 @@ export async function handlePublish(agentIds: string[]): Promise<void> {
       )
 
       if (!matchingTemplate) {
-        console.log(red(`Agent "${agentId}" not found. Available agents:`))
-        availableAgents.forEach((agent) => {
-          const identifier =
+        const availableList = availableAgents
+          .map((agent) =>
             agent.displayName && agent.displayName !== agent.id
               ? `${agent.displayName} (${agent.id})`
-              : agent.displayName || agent.id
-          console.log(`  - ${identifier}`)
-        })
-        return
+              : agent.displayName || agent.id,
+          )
+          .join(', ')
+        return {
+          success: false,
+          error: `Agent "${agentId}" not found`,
+          details: `Available agents: ${availableList}`,
+        }
       }
 
       // Process the template for publishing
@@ -149,59 +159,38 @@ export async function handlePublish(agentIds: string[]): Promise<void> {
       matchingTemplates[matchingTemplate.id] = processedTemplate
     }
 
-    console.log(yellow(`Publishing:`))
-    for (const template of Object.values(matchingTemplates)) {
-      const displayName = (template as any).displayName || template.id
-      console.log(`  - ${displayName} (${template.id})`)
-    }
-
     const result = await publishAgentTemplates(
       Object.values(matchingTemplates),
       user.authToken!,
     )
 
     if (result.success) {
-      console.log(green(`✅ Successfully published:`))
-      for (const agent of result.agents) {
-        console.log(
-          cyan(
-            `  - ${agent.displayName} (${result.publisherId}/${agent.id}@${agent.version})`,
-          ),
-        )
+      return {
+        success: true,
+        publisherId: result.publisherId,
+        agents: result.agents,
       }
-      return
     }
 
-    console.log(red(`❌ Failed to publish your agents`))
-    if (result.error) console.log(red(`Error: ${result.error}`))
-    if (result.details) console.log(red(`\n${result.details}`))
-    if (result.hint) console.log(yellow(`\nHint: ${result.hint}`))
-
-    // Show helpful guidance based on error type
+    // Build error result
+    let hint = result.hint
     if (result.error?.includes('Publisher field required')) {
-      console.log()
-      console.log(cyan('Add a "publisher" field to your agent templates:'))
-      console.log(yellow('  "publisher": "<publisher-id>"'))
-      console.log()
-    } else if (
-      result.error?.includes('Publisher not found or not accessible')
-    ) {
-      console.log()
-      console.log(
-        cyan(
-          'Check that the publisher ID is correct and you have access to it.',
-        ),
-      )
-      console.log()
+      hint = 'Add a "publisher" field to your agent templates.'
+    } else if (result.error?.includes('Publisher not found or not accessible')) {
+      hint = `Check that the publisher ID is correct and you have access to it. Visit ${WEBSITE_URL}/publishers to manage publishers.`
     }
 
-    console.log(cyan('Visit the website to manage your publishers:'))
-    console.log(yellow(`${WEBSITE_URL}/publishers`))
+    return {
+      success: false,
+      error: result.error,
+      details: result.details,
+      hint,
+    }
   } catch (error) {
-    console.log(
-      red(
-        `Error during publish: ${error instanceof Error ? error.message + '\n' + error.stack : String(error)}`,
-      ),
-    )
+    return {
+      success: false,
+      error: 'Publish failed',
+      details: error instanceof Error ? error.message : String(error),
+    }
   }
 }