Enhance publish UI with dependency direction visualization

- Add optional dependents (parent agents) to publish flow with toggle -
Redesign confirmation screen with vertical tree and directional arrows -
Filter bundled agents from publish list (isBundled flag) - Escape key
clears search first, then exits publish mode - Add terminal too-small
detection with helpful message - Clean up code: optional title prop,
rename agents→allAgents for clarity

Author: brandonkachen

cli/scripts/prebuild-agents.ts

@@ -115,6 +115,7 @@ export function getBundledAgentsAsLocalInfo(): LocalAgentInfo[] {
     id: agent.id,
     displayName: agent.displayName || agent.id,
     filePath: '[bundled]',
+    isBundled: true,
   }));
 }
 

cli/src/__tests__/unit/publish-confirmation.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, test } from 'bun:test'
+
+import { getAllPublishAgentIds } from '../../components/publish-confirmation'
+
+import type { LocalAgentInfo } from '../../utils/local-agent-registry'
+
+const makeAgent = (id: string, isBundled = false): LocalAgentInfo => ({
+  id,
+  displayName: id,
+  filePath: `/agents/${id}.ts`,
+  isBundled,
+})
+
+describe('getAllPublishAgentIds', () => {
+  test('ignores bundled agents even if selected', () => {
+    const base = makeAgent('base', true)
+    const userA = makeAgent('user-a')
+    const agents = [base, userA]
+    const defs = new Map<string, { spawnableAgents?: string[] }>()
+
+    const ids = getAllPublishAgentIds([base, userA], agents, defs)
+
+    expect(ids).toEqual(['user-a'])
+  })
+
+  test('does not include bundled dependencies discovered via spawns', () => {
+    const base = makeAgent('base', true)
+    const userA = makeAgent('user-a')
+    const agents = [base, userA]
+    const defs = new Map<string, { spawnableAgents?: string[] }>([
+      ['user-a', { spawnableAgents: ['base'] }],
+    ])
+
+    const ids = getAllPublishAgentIds([userA], agents, defs)
+
+    expect(ids).toEqual(['user-a'])
+  })
+
+  test('only adds publishable dependents when includeDependents is true', () => {
+    const base = makeAgent('base', true)
+    const userA = makeAgent('user-a')
+    const userB = makeAgent('user-b')
+    const agents = [base, userA, userB]
+    const defs = new Map<string, { spawnableAgents?: string[] }>([
+      ['user-a', { spawnableAgents: [] }],
+      ['user-b', { spawnableAgents: ['user-a'] }],
+      ['base', { spawnableAgents: ['user-a'] }],
+    ])
+
+    const ids = getAllPublishAgentIds([userA], agents, defs, true)
+
+    expect(ids).toEqual(['user-a', 'user-b'])
+  })
+
+  test('includes transitive dependents when includeDependents is true', () => {
+    const userA = makeAgent('user-a')
+    const userB = makeAgent('user-b')
+    const userC = makeAgent('user-c')
+    const agents = [userA, userB, userC]
+    const defs = new Map<string, { spawnableAgents?: string[] }>([
+      ['user-a', { spawnableAgents: [] }],
+      ['user-b', { spawnableAgents: ['user-a'] }],
+      ['user-c', { spawnableAgents: ['user-b'] }],
+    ])
+
+    const ids = getAllPublishAgentIds([userA], agents, defs, true)
+
+    expect(ids).toEqual(['user-a', 'user-b', 'user-c'])
+  })
+})

cli/src/commands/publish.ts

@@ -28,12 +28,13 @@ export interface PublishResult {
 async function publishAgentTemplates(
   data: Record<string, any>[],
   authToken: string,
+  allLocalAgentIds: string[],
 ): Promise<PublishAgentsResponse & { statusCode?: number }> {
   setApiClientAuthToken(authToken)
   const apiClient = getApiClient()
 
   try {
-    const response = await apiClient.publish(data)
+    const response = await apiClient.publish(data, allLocalAgentIds)
 
     if (!response.ok) {
       // Try to use the full error data if available (includes details, hint, etc.)
@@ -159,16 +160,21 @@ export async function handlePublish(agentIds: string[]): Promise<PublishResult>
       matchingTemplates[matchingTemplate.id] = processedTemplate
     }
 
+    // Get all local agent IDs so the server knows which agents exist locally
+    // (even if not being published) for validation purposes
+    const allLocalAgentIds = loadedDefinitions.map((template) => template.id)
+
     const result = await publishAgentTemplates(
       Object.values(matchingTemplates),
       user.authToken!,
+      allLocalAgentIds,
     )
 
     if (result.success) {
       return {
         success: true,
         publisherId: result.publisherId,
-        agents: result.agents,
+        agents: result.agents ?? [],
       }
     }
 

cli/src/components/agent-checklist.tsx

@@ -1,6 +1,8 @@
 import { TextAttributes } from '@opentui/core'
 import React, { useMemo, useRef, useEffect, useState } from 'react'
 
+import { pluralize } from '@codebuff/common/util/string'
+
 import { Button } from './button'
 import { useTheme } from '../hooks/use-theme'
 import { getSimpleAgentId } from '../utils/agent-id-utils'
@@ -108,7 +110,10 @@ const DepTree: React.FC<{
 }
 
 interface AgentChecklistProps {
-  agents: LocalAgentInfo[]
+  /** All agents (used for dependency tree calculations) */
+  allAgents: LocalAgentInfo[]
+  /** Agents filtered by search query (displayed in the list) */
+  filteredAgents: LocalAgentInfo[]
   selectedIds: Set<string>
   searchQuery: string
   focusedIndex: number
@@ -119,7 +124,8 @@ interface AgentChecklistProps {
 }
 
 export const AgentChecklist: React.FC<AgentChecklistProps> = ({
-  agents,
+  allAgents,
+  filteredAgents,
   selectedIds,
   searchQuery,
   focusedIndex,
@@ -135,17 +141,17 @@ export const AgentChecklist: React.FC<AgentChecklistProps> = ({
   const [hoveredSubagentLink, setHoveredSubagentLink] = useState<string | null>(null)
 
   // Precompute local agent IDs for dependency calculations
-  const localAgentIds = useMemo(() => new Set(agents.map((a) => a.id)), [agents])
+  const localAgentIds = useMemo(() => new Set(allAgents.map((a) => a.id)), [allAgents])
 
   // Calculate dependency count for each agent
   const dependencyCounts = useMemo(() => {
     const counts = new Map<string, number>()
-    for (const agent of agents) {
+    for (const agent of allAgents) {
       const count = countDependencies(agent.id, agentDefinitions, localAgentIds, new Set())
       counts.set(agent.id, count)
     }
     return counts
-  }, [agents, agentDefinitions, localAgentIds])
+  }, [allAgents, agentDefinitions, localAgentIds])
 
   // Toggle expansion of an agent's dependencies
   const toggleExpanded = (agentId: string) => {
@@ -160,19 +166,6 @@ export const AgentChecklist: React.FC<AgentChecklistProps> = ({
     })
   }
 
-  // Filter agents based on search query (instant filter)
-  const filteredAgents = useMemo(() => {
-    if (!searchQuery.trim()) {
-      return agents
-    }
-    const query = searchQuery.toLowerCase()
-    return agents.filter(
-      (agent) =>
-        agent.displayName.toLowerCase().includes(query) ||
-        agent.id.toLowerCase().includes(query),
-    )
-  }, [agents, searchQuery])
-
   // Scroll focused item into view when focus changes via keyboard
   useEffect(() => {
     const scrollbox = scrollRef.current
@@ -244,6 +237,7 @@ export const AgentChecklist: React.FC<AgentChecklistProps> = ({
           const depCount = dependencyCounts.get(agent.id) ?? 0
           const isExpanded = expandedAgentIds.has(agent.id)
           const isSubagentLinkHovered = hoveredSubagentLink === agent.id
+          const subagentLabel = `(${isExpanded ? '-' : '+'} ${pluralize(depCount, 'subagent')})`
 
           const symbol = isSelected
             ? SYMBOLS.CHECKBOX_CHECKED
@@ -333,7 +327,7 @@ export const AgentChecklist: React.FC<AgentChecklistProps> = ({
                           : undefined,
                       }}
                     >
-                      {isExpanded ? `(- ${depCount} subagent${depCount === 1 ? '' : 's'})` : `(+ ${depCount} subagent${depCount === 1 ? '' : 's'})`}
+                      {subagentLabel}
                     </text>
                   </Button>
                 )}
@@ -342,7 +336,7 @@ export const AgentChecklist: React.FC<AgentChecklistProps> = ({
               {/* Expanded dependency tree */}
               {isExpanded && depCount > 0 && (
                 <DepTree
-                  nodes={buildDepTree(agent.id, agents, agentDefinitions, localAgentIds, new Set())}
+                  nodes={buildDepTree(agent.id, allAgents, agentDefinitions, localAgentIds, new Set())}
                   depth={0}
                   theme={theme}
                 />
@@ -351,15 +345,6 @@ export const AgentChecklist: React.FC<AgentChecklistProps> = ({
           )
         })}
       </scrollbox>
-
-      {/* Selection count */}
-      <box style={{ marginTop: 1, marginLeft: 1 }}>
-        <text style={{ fg: theme.secondary }}>
-          {selectedIds.size === 0
-            ? 'No agents selected'
-            : `Selected: ${Array.from(selectedIds).join(', ')}`}
-        </text>
-      </box>
     </box>
   )
 }