Function PublishConfirmation

cli/src/components/publish-confirmation.tsx:237–417

({
  selectedAgents,
  allAgents,
  agentDefinitions,
  includeDependents,
  onToggleDependents,
})

)

export const PublishConfirmation: React.FC<PublishConfirmationProps> = ({
  selectedAgents,
  allAgents,
  agentDefinitions,
  includeDependents,
  onToggleDependents,
}) => {
  const theme = useTheme()
  const [toggleHovered, setToggleHovered] = useState(false)

  const selectedIds = useMemo(
    () => new Set(selectedAgents.map((a) => a.id)),
    [selectedAgents]
  )

  // Only include non-bundled agents in localAgentIds for dependency resolution
  // (allAgents is already filtered to exclude bundled agents)
  const localAgentIds = useMemo(
    () => new Set(allAgents.map((a) => a.id)),
    [allAgents]
  )

  // Compute dependencies (agents the selected agents spawn)
  const dependencyIds = useMemo(
    () => computeDependencies(selectedIds, agentDefinitions, localAgentIds),
    [selectedIds, agentDefinitions, localAgentIds]
  )

  // Compute dependents (agents that spawn the selected agents)
  const dependentIds = useMemo(
    () => computeDependents(selectedIds, dependencyIds, agentDefinitions, localAgentIds),
    [selectedIds, dependencyIds, agentDefinitions, localAgentIds]
  )

  // Build lists with display info
  const selectedList = useMemo(
    () =>
      selectedAgents.map((a) => ({
        id: a.id,
        displayName: a.displayName,
      })),
    [selectedAgents]
  )

  const dependencyList = useMemo(
    () =>
      Array.from(dependencyIds).map((id) => {
        const agent = allAgents.find((a) => a.id === id)
        return {
          id,
          displayName: agent?.displayName ?? id,
        }
      }),
    [dependencyIds, allAgents]
  )

  const dependentList = useMemo(
    () =>